如何在 Flutter 中将 FAB 放置在两个小部件之间？

Question

我想实现以下效果：

如何让 FAB 灵活地定位在这两个小部件之间？（在顶部个人资料图片和底部个人资料信息之间）

我已经成功制作了 2 个容器，但我不知道如何将 FAB 定位在它们的确切水平边界上。

我的代码（这是整个小部件树，包裹在脚手架中）：

Row(
    children: <Widget>[
        Expanded(
        child: Column(
            children: <Widget>[
            Expanded(
                flex: 4,
                child: Container(
                    decoration: BoxDecoration(color: Colors.grey.shade300),
                ),
            ),
            Expanded(
                flex: 6,
                child: Container(),
            ),
            ],
        ),
        ),
    ],
),

Answer 1

您可以结合使用 Stack 和 Positioned 小部件来根据您的要求定位 FAB。

Stack(
  children:[
   // Add your existing row & it's child here,
   Positioned(
     child: FloatingActionButton(
       onPressed:(){ },
       child: Icon(Icons.camera_alt)
     ),
     right: 5,
     top: MediaQuery.of(context).size.height * .3,
   )
  ],
),

并且输出：

注意：您可能需要调整定位小部件的顶部值，以便在您的情况下准确放置 FAB。如果您知道该图像小部件的确切高度，则可以将顶部设置为高度 - 28。

如何在 Flutter 中将 FAB 放置在两个小部件之间？

How do I position a FAB in between 2 widgets in Flutter?

position

widget

floating-action-button

flutter