沿着屏幕底部的多个FAB。

Question

我希望沿屏幕底部添加多个FAB，间距均匀。

我最初是通过以下方式实现的。

      body: Center(
        child: Stack(
          children: <Widget>[
            Row(
              children: <Widget>[
                Padding(
                  padding:
                      const EdgeInsets.only(left: 12.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.undo),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.cancel),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.favorite),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.check_circle),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.share),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
              ],
            ),

然而，这感觉真的很糟糕， 虽然它看起来不错 在我的单一测试设备， 当移动到其他设备 它没有规模。

正确的做法是什么？

Answer 1

你把大部分的填充物都硬编码了 所以在很多屏幕上都不能用 尽量让flutter来做定位:)

这是你想要的。它应该适用于任何屏幕类型的纵向和横向。

body: Stack(
          children: <Widget>[
            Container(
              alignment: Alignment.bottomCenter,
              padding: EdgeInsets.only(bottom: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.undo),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.cancel),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.favorite),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.check_circle),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.share),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ],
              ),
            ),
          ],
        ),

Answer 2

请注意:

1) A FloatingActionButton 总是对齐到屏幕的底部，因为你不需要给它一个上边距。

2) 不要硬编码 right 和 left paddings你可以使用row属性来安排一个row内的所有widget:like。

mainAxisAlignment: MainAxisAlignment.center
mainAxisAlignment: MainAxisAlignment.spaceAround
mainAxisAlignment: MainAxisAlignment.spaceBetween
mainAxisAlignment: MainAxisAlignment.spaceEvenly

用你的代码替换下面的代码。它工作得很完美。

body: Stack(
          children: <Widget>[
              Row( 
               // makes it go to the bottom of the screen
               crossAxisAlignment: CrossAxisAlignment.end,
               // makes space all the floating actions buttons evenly
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.undo),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.cancel),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.favorite),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.check_circle),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.share),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ],
           ],
        ),

我希望这能帮助你。