在翩翩中定位两个浮动的动作按钮

Question

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

Answer 1

检查下面的代码和截图可能会帮助你。

  @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 2

使用列，并在里面添加两个浮动按钮，一个在左上角，第二个在右下角。

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