微信交流群

# FloatingActionButton

FloatingActionButton通常和Scaffold一起使用,在底部导航栏嵌入按钮。

基本用法如下:

Scaffold(
  floatingActionButton: FloatingActionButton(),
)
1
2
3

没有底部导航栏的位置如下:

加入底部导航栏:

Scaffold(
  floatingActionButton: FloatingActionButton(),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.person),title: Text('老孟')),
      BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('程序员'))
    ],
  ),
)
1
2
3
4
5
6
7
8
9

效果如下:

设置按钮嵌入底部导航栏:

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(),
  bottomNavigationBar: BottomNavigationBar(
    backgroundColor: Colors.yellow,
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.person),title: Text('老孟')),
      BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('程序员'))
    ],
  )
)
1
2
3
4
5
6
7
8
9
10
11

用法如下: