flutter - 如何在 Flutter 的 2 个小部件之间定位 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(),
            ),
            ],
        ),
        ),
    ],
),

标签： flutterwidgetpositionfloating-action-button

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 准确放置在您的案例中。如果您知道该图像小部件的确切高度，则可以将 top 设置为 height - 28。