Flutter Widget 之 FloatingActionButton

在Flutter中添加FloatingActionButton非常容易，只需要将FloatingActionButton添加到Scaffold即可。

Scaffold(
    floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){},
    ),
)；

但是，如果你有一个ButtonNavigationBar，并且将FloatingActionButton嵌入其中，该怎么办？

Flutter帮助你做到

首先，将BottomNavigationBar添加到Scaffold中。

Scaffold(
    floatingActionButton: ...
    buttonNavigationBar: BottomAppBar(
        color: Colors.yellow,
        child: Container(height: 50.0),
    ),
)

然后，使用FloatingActionButtonLocation嵌入Scaffold

Scaffold(
    floatingActionButton: ...
    buttonNavigationBar: ...
    floatingActionButtonLocation:
        FloatingActionButtonLocation.endDocked,
)

想要它在中间吗？

将FloatingActionButtonLocation.endDocked改为FloatingActionButtonLocation.centerDocked

Scaffold(
    floatingActionButton: ...
    buttonNavigationBar: ...
    floatingActionButtonLocation:
        FloatingActionButtonLocation.centerDocked,
)

你的FloatingActionButton现在已整齐地嵌入BottomNavigationBar中了

如果想了解有关FloatingActionButton的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址