居中浮动操作按钮答案

【问题标题】：Center a FloatingActionButton居中浮动操作按钮
【发布时间】：2020-08-31 04:40:35
【问题描述】：

我真的陷入了一个问题，我试图将 FloatingActionButton 居中，它位于身体外部。目前的代码如下所示：

@override   Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _initializeCameraControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_cameraController);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
        floatingActionButton: Container(
          height: buttonsize,
          width: buttonsize,
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () {

              },
              child: Icon(Icons.camera_alt),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              shape: CircleBorder(side: BorderSide(color: Colors.white.withOpacity(0.25),width: 2.0)),
            ),
          ),
        ),
      );
}

FutureBuilder 正在创建相机视图，而 floatingActionButton 应该是用于拍照的按钮。

每次我尝试在容器中使用alignment: Alignment.center, 将其居中时，该容器还包含按钮的高度和宽度，按钮未居中且没有高度和大小它应该有。

顶部的代码可以正常工作，但按钮位于右下角。

提前感谢您的所有回答！

【问题讨论】：

使用floatingActionButtonLocation并将其设置为center @Mo711
@T.TSage 只要我不创建类似 BottomNavigationBar 的东西，我就无法使用它
是的，你可以@Mo711，我刚刚在 DartPad 中尝试过，它有效
你可以@Mo711。
好的，虽然我以不同的方式来考虑它，但这有帮助，谢谢！

标签： flutter dart alignment floating-action-button

【解决方案1】：

您可以通过使用floatingActionButtonLocation 属性并将其设置为FloatingActionButtonLocation.centerFloat 来实现此目的。

检查下面的代码，它工作正常：

@override   Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _initializeCameraControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_cameraController);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      // use this property to center the floating action button
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: Container(
          height: buttonsize,
          width: buttonsize,
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () {

              },
              child: Icon(Icons.camera_alt),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              shape: CircleBorder(side: BorderSide(color: Colors.white.withOpacity(0.25),width: 2.0)),
            ),
          ),
        ),
      );
}

下面的输出：

【讨论】：

【解决方案2】：

只需添加到 Sage 的评论中，试试这个：

Scaffold(
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body:...
),

【讨论】：

【解决方案3】：

您可以创建一个自定义的类似圆形按钮的 FAB 按钮并将其对齐到您想要的任何位置

 body: Container(
        child: MaterialButton(
          onPressed: () {},
          color: Colors.pink,
          textColor: Colors.white,
          child: Icon(
            Icons.camera_alt,
            size: 24,
          ),
          padding: EdgeInsets.all(16),
          shape: CircleBorder(),
        ),
      ),

【讨论】：