Flutter - FloatingActionButton在中心位置

Question

如何将FloatingActionButton置于中心而非右侧？

import 'package:flutter/material.dart';
import 'number.dart';
import 'keyboard.dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      children: <Widget>[
        new Number(),
        new Keyboard(),
      ],
    ),
    floatingActionButton: new FloatingActionButton(
      elevation: 0.0,
      child: new Icon(Icons.check),
      backgroundColor: new Color(0xFFE57373),
      onPressed: (){}
    )
  );
}

- rafaelcb21

Answer 1

我不知道自从这个问题首次被回答以来是否添加了此功能，但现在Scaffold类上有floatingActionButtonLocation属性。

在您的原始问题中，它将像这样工作：

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    // ...

    floatingActionButton: new FloatingActionButton(
      // ...FloatingActionButton properties...
    ),

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

请参阅文档：

• Scaffold 类（搜索 floatingActionButtonLocation）：https://docs.flutter.dev/flutter/material/Scaffold-class.html
• ...以及 FloatingActionButtonLocation 类：https://docs.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html

- Brian Kung

---

所提供的链接指向一个具有无效证书的网站。 - Gregory Seront

Answer 2

使用新的Flutter API，您可以轻松完成此操作，只需在Scaffold中更改floatingActionButtonLocation属性即可。

FloatingActionButtonLocation.centerFloat

return new Scaffold(
  floatingActionButton: new FloatingActionButton(
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation:    
      FloatingActionButtonLocation.centerFloat,
  bottomNavigationBar: new BottomAppBar(
    color: Colors.white,
    child: new Row(...),
  ),
);

- Raouf Rahiche

Answer 3

使用 scaffold 类的属性 floatingActionButtonLocation。

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

完整示例：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(child: Center(child: Text('Hello World')),),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.camera, color: Colors.white, size: 29,),
        backgroundColor: Colors.black,
        tooltip: 'Capture Picture',
        elevation: 5,
        splashColor: Colors.grey,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

- Ashraful Haque

Answer 4

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

将此属性与 Scaffold 中的 floatingActionButtonLocation 属性一起使用。

Flutter FloatingActionButton - 更多细节

- Athira Reddy

Answer 5

尝试在Column里使用Center小部件进行包装，或者在Column上使用CrossAxisAlignment.center交叉轴对齐方式。

您应该选择Column的一部分进行包装，使用Flexible来避免溢出，或者用ListView替换它的一些或全部内容，这样用户就可以滚动查看被隐藏的部分。

- Collin Jackson

---

但在 floatingActionButton 还是 body 中？ - rafaelcb21

我尝试在floatingActionButton属性中使用新的Center包装新的FloatingActionButton，这样按钮就大约位于屏幕中央，而不是屏幕底部的中心。 - rafaelcb21

将其作为Column的最后一个元素。您还可以在Column上使用CrossAxisAlignment.center属性。 - Collin Jackson

这个答案是错误的！ Scaffold（）小部件的floatingActionButton属性根本不受Column（）小部件的mainAxisAlignment属性的影响，后者位于body属性中！幸运的是...如果Scaffold（）的这两个部分不能单独管理，那将非常令人烦恼。 - Karolina Hagegård

Answer 6

您可以使用以下的Container和Align小部件：

@override
Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(

      ),
      floatingActionButton: Container(
        padding: EdgeInsets.only(bottom: 100.0),
        child: Align(
          alignment: Alignment.bottomCenter,
          child: FloatingActionButton.extended(
            onPressed: _getPhoneAuthResult,
            icon: Icon(Icons.phone_android),
            label: Text("Authenticate using Phone"),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

- sam

Answer 7

Align(
                      alignment: Alignment.center,
                      child: Container(
                        child: FloatingActionButton(
                          hoverColor: Colors.black,
                          elevation: 10,
                          onPressed: () {},
                          backgroundColor: Colors.pink,
                          child: Icon(Icons.add,),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.all(Radius.circular(20.0))),
                        ),
                      ),
                    ),

在这里，我使用了“Align”小部件来使FloatingActionButton居中。 您可以在此处查看。

- Dulya Perera

Answer 8

在浮动操作按钮部件结束后，您可以使用 floatingActionButtonLocation:FloatingActionButtonLocation.centerFloat 。

例如：

   import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  File _image;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      title: "Camera App",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Camera App"),
        ),
        body: Center(
          child: Center(
            child: _image == null
                ? Text('No image selected.')
                : Image.file(_image,
                alignment: Alignment.topLeft,
                ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          elevation: 50,
          hoverColor: Colors.red,
          autofocus: true,
          onPressed: () {
            imagepicker();
          },
          child: Icon(Icons.camera_alt),
          tooltip: 'Pick Image',
        ),
         floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }

  Future imagepicker() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }
}

- Tushar Nikam

Answer 9

上面的例子很好，但如果你想完全控制浮动操作按钮的确切位置，你应该使用对齐小部件包装你的FloatingActionButton小部件，并使用Alignment（x轴，y轴）来设置确切的位置。

Align(
  alignment: Alignment(0.0, 0.8), 
//control the location by changing the numbers here to anything between 1 and -1
  child: FloatingActionButton()
)

- Mohammad K. Albattikhi

Answer 10

由于Scaffold.floatingActionButton只需要一个Widget，如果Scaffold.floatingActionButtonLocation属性不够用（它已经为您提供了许多标准的放置位置，也可以很好地与您的appBar或bottomNavigationBar配合使用），您可以将FloatingActionButton与标准类一起包装以获得更多控制。

Container是一个经典组件，但它结合了各种小部件，有点过度设计。

正如其他人所提到的，当您想要相对于 Align 小部件本身定位时（如果未受限制，则填充其父级），Align 很方便。它可以采用各种预设的 Alignment 常量，或使用 Alignment 构造函数指定自己的相对位置，例如 Alignment(0.0, 0.0) 表示矩形的中心，(1,1) 表示右下角，(-1,-1) 表示左上角。然而，您的 FAB 的父级受 Scaffold 的 floatingActionButtonLocation: 影响，因此帮助考虑它的一种方法是将其设置为 FloatingActionButtonLocation.centerDocked，这样与 Align 一起使用，让您考虑相对于屏幕中心的定位。

但是也许您喜欢floatingActionButtonLocation提供的基本定位，只是想将FAB移动已知数量的逻辑像素，例如为了弥补屏幕上的其他小部件。在这种情况下，使用适当的EdgeInsets包装Padding应该可以正常工作。

- qix