微信交流群

老孟公众号

# BottomAppBar

BottomAppBar通常用于Scaffold.bottomNavigationBar,并且可以在其顶部留出一个缺口给floatingActionButton使用。

用法如下:

Scaffold(
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
              ),
              IconButton(
                icon: Icon(Icons.people),
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如下:

FloatingActionButton是悬浮在BottomAppBar上面,并没有嵌入里面,嵌入里面用法如下:

BottomAppBar(
  shape: CircularNotchedRectangle(),
  ...
)
1
2
3
4

增加BottomAppBar的形状,效果如下:

elevation参数为阴影值:

BottomAppBar(
  elevation: 8.0,
  ...
)
1
2
3
4

notchMargin参数表示缺口外边距:

BottomAppBar(
  notchMargin: 10,
  ...
)
1
2
3
4

效果如下:

改变FloatingActionButton的形状为足球场形状,切嵌入的形状随之变化,代码如下:

Scaffold(
        bottomNavigationBar: BottomAppBar(
          shape: AutomaticNotchedShape(
              RoundedRectangleBorder(), StadiumBorder(side: BorderSide())),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
              ),
              IconButton(
                icon: Icon(Icons.people),
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {},
          icon: new Icon(Icons.add),
          label: const Text("label"),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下:

改为多边形:

Scaffold(
        bottomNavigationBar: BottomAppBar(
          shape: AutomaticNotchedShape(
              RoundedRectangleBorder(), BeveledRectangleBorder(borderRadius: BorderRadius.circular(10))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
              ),
              IconButton(
                icon: Icon(Icons.people),
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {},
          shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(10)),
          icon: new Icon(Icons.add),
          label: const Text("label"),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果如下:

当然也可以改为棱形:

Scaffold(
        bottomNavigationBar: BottomAppBar(
          shape: AutomaticNotchedShape(
              RoundedRectangleBorder(), BeveledRectangleBorder(borderRadius: BorderRadius.circular(100))),
          ...
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {},
          shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(100)),
          icon: new Icon(Icons.add),
          label: const Text("label"),
        ),
        ...
      )
1
2
3
4
5
6
7
8
9
10
11
12
13

效果如下:

我们可以通过此控件定义任何我们想要的效果。