在 Flutter 中放置两个浮动操作按钮

Question

如何在 Flutter 中定位多个浮动操作按钮。特别是我需要屏幕右下角的一个按钮和左上角的另一个按钮。

Answer 1

使用 Column 并在其中添加两个浮动按钮，一个在左上角，第二个在右下角

       Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: FloatingActionButton(
                tooltip: 'Increment',
                child: Icon(Icons.add),
              ),
            ),
            Expanded( 
              child: Align(
                alignment: Alignment.bottomRight,
                child: FloatingActionButton(
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                ),
              ),
            )
          ],
        ),

Answer 2

检查下面的代码和屏幕截图可能会对您有所帮助：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
              child: Container(
                width: MediaQuery.of(context).size.width,
                color: Colors.red,
                child: Align(
                  alignment: Alignment.topLeft,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      FloatingActionButton(onPressed: (){},child: Icon(Icons.add),),

                    ],
                  ),
                ),
              )
          ),
          Expanded(child: Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.green,
              child: Text('Center',textAlign: TextAlign.center,)
          )),
          Expanded(
              child: Container(
                width: MediaQuery.of(context).size.width,
                color: Colors.red,
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      FloatingActionButton(onPressed: (){},child: Icon(Icons.add),),
                    ],
                  ),
                ),
              )
          ),

        ],
      ),
    );
  }

Answer 3

您可以使用带有 positioned() 的 stack() 小部件来实现此目的，例如：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Maps and Floating Buttons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Maps and Floating Buttons Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GoogleMapController mapController;
  var initialLocation =
      CameraPosition(target: LatLng(-27.56, -58.58), zoom: 12);

  void mapControllerCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: <Widget>[
        GoogleMap(
          zoomControlsEnabled: false,
          zoomGesturesEnabled: true,
          mapToolbarEnabled: true,
          compassEnabled: false,
          myLocationButtonEnabled: true,
          initialCameraPosition: initialLocation,
          onMapCreated: mapControllerCreated,
          onCameraMove: (position) {},
          onCameraIdle: () {},
        ),
        Positioned(
            top: 50,
            right: 20,
            child: FloatingActionButton(
              child: Icon(Icons.textsms_sharp),
              backgroundColor: Colors.blue,
              heroTag: 1,
              onPressed: () {
                //do something on press
              },
            )),
        Positioned(
            top: 50,
            left: 20,
            child: FloatingActionButton(
              child: Icon(Icons.check),
              backgroundColor: Colors.blue,
              heroTag: 1,
              onPressed: () {
                //do something on press
              },
            )),
        Positioned(
          bottom: 50,
          left: 20,
          child: FloatingActionButton(
            child: Icon(Icons.search),
            backgroundColor: Colors.blue,
            heroTag: 1,
            onPressed: () {
              //do something on press
            },
          ),
        )
      ]),
    );
  }
}

这里是截图：

在 Flutter 中放置两个浮动操作按钮

Position two floating action button in Flutter

floating-action-button

flutter