在 Flutter 中定位两个浮动操作按钮

Posted 2023-02-23

【中文标题】在 Flutter 中定位两个浮动操作按钮

【英文标题】：Position two floating action button in Flutter

【发布时间】：2020-09-23 08:12:44

【问题描述】：

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

【问题讨论】：

您可以尝试将 FAB 放入 Stack 并在那里对齐

【参考方案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),
                ),
              ),
            )
          ],
        ),

【讨论】：

@GenchiGenbutsu：不确定他的要求，

我想将这些按钮放在 GoogleMap 小部件的顶部，我应该在哪里添加地图小部件？

【参考方案2】：

您可以使用带有 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
            ,
          ),
        )
      ]),
    );
  

这里是截图：

【参考方案3】：

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

  @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),),
                    ],
                  ),
                ),
              )
          ),

        ],
      ),
    );
  

【讨论】：

我想将这些按钮放在 GoogleMap 小部件的顶部，我应该在哪里添加地图小部件？

@pz7 而不是 Column 使用 Stack[ Align( alignment: Alignment.topLeft, child: FloatingActionButton(onPressed: (),child: Icon(Icons.add),), ), GoogleMap( mapType: MapType.hybrid, initialCameraPosition: _kGooglePlex, onMapCreated: (GoogleMapController controller) _controller.complete(controller); , ), Align(alignment: Alignment.bottomRight, child: FloatingActionButton(onPressed: (),child: Icon (Icons.add),), ) ]