
微信交流群
# 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
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
2
3
4
增加BottomAppBar的形状,效果如下:
elevation
参数为阴影值:
BottomAppBar(
elevation: 8.0,
...
)
1
2
3
4
2
3
4
notchMargin
参数表示缺口外边距:
BottomAppBar(
notchMargin: 10,
...
)
1
2
3
4
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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
效果如下:
我们可以通过此控件定义任何我们想要的效果。
版权所有,禁止私自转发、克隆网站。