flutter - 如何在 flutter 中添加粘在另一个小部件上的 float 操作按钮

标签 flutter button maps floating-action-button

我正在尝试添加粘贴到另一个小部件中的 float 操作按钮.. 这是我的部分代码..

Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height / 2,
      child: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: init,
        markers: ...
        circles: ...,
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
        },
      ),
    );

我将我的 map 屏幕放在容器中...但我想添加 float 操作按钮以粘贴到我的 map 屏幕中...是否可以这样做?

最佳答案

您可以使用 Stack 小部件来实现您想要的。

检查下面的代码。它工作得很好:

 // use a stack widget
        body: Stack(
          children: <Widget>[
            GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: init,
              markers: ...
              circles: ...,
              onMapCreated: (GoogleMapController controller) {
                _controller = controller;
              },
            ),
            // align it to the bottom center, you can try different options too (e.g topLeft,centerLeft)
            Align(
              alignment: Alignment.bottomRight,
              // add your floating action button
              child: FloatingActionButton(
                onPressed: () {},
                child: Icon(Icons.map),
              ),
            ),
          ],
        ),

输出

enter image description here

我希望这能回答您的问题。

关于flutter - 如何在 flutter 中添加粘在另一个小部件上的 float 操作按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61722879/

相关文章:

java - 在 Java 中使用新列表初始化 Map

Flutter:键盘自动显示

java - 将指示器添加到按钮背景

javascript - 当文本达到最小/最大大小时,使用 JavaScript 禁用 HTML 按钮

Android ImageButton - 如何在单击按钮时更改图像?

c# - osmsharp : prevent u-turn

javascript - 如何在铯地形上添加标记

flutter - 为什么在flutter中使用provider时不执行class的构造函数?

带有后退按钮的 Flutter 测试 WillPopScope

design-patterns - 选择正确的 Flutter 设计模式