SilenYang@前端笔记
0%

flutter导航栏

发表于 更新于 分类于

在 APP 中，导航栏是必不可少的。在 flutter 中，创建一个导航栏也很容易实现，这篇文章将会讲述在 flutter 中定制化导航栏。

在 flutter 中创建一个导航栏很简单，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class App extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter-demo',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Title'),
        ),
        body: Center(
          child: Text('data'),
        ),
      ),
    );
  }
}

这段代码会生成这样的导航栏：

但我们的 APP 中肯定会根据页面的功能需要不同的种类的导航栏，这就需要我们定制导航栏了。

Theme

在 MaterialApp 中，存在一个 theme 的主题属性用来配置主题，也包括导航栏，当然这是全局性的:

在 ThemeData 中，配置的属性会被页面内的元素所继承。 其中包含很多的属性，但与导航栏有关的属性为 primaryColor 原色属性，定义 APP 的主体颜色。

定义 primaryColor 后，导航栏会根据设置的颜色自动设置背景色与字体的颜色，如：

1
2
3
4
5
6
7
MaterialApp(
    ...
    theme: ThemeData(
        primaryColor: Colors.white,
    ),
    ...
);

如果想具体改变导航栏的其他控件样式，则需要用到其他属性：

  • primaryTextTheme 改变标题的样式，如字体的颜色、字体大小等属性。
  • primaryIconTheme 改变 icon 的样式，如颜色、大小、透明度等。
  • backgroundColor 改变的背景颜色。
  • elevation 改变导航栏下面的阴影，默认是 4.0。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
MaterialApp(
    ...
    theme: ThemeData(
        primaryColor: Colors.white,
        primaryTextTheme: TextTheme(
        title: TextStyle(color: Colors.purple),
        ),
        primaryIconTheme: IconThemeData(color: Colors.blue),
    ),
    home: Scaffold(
        appBar: AppBar(
          leading: Center(
            child: Icon(Icons.arrow_back_ios),
          ),
          centerTitle: true,
          actions: <Widget>[
            IconButton(icon: Icon(Icons.list), onPressed: () {})
          ],
          title: Text('Title'),
          elevation: 1.0,
        ),
    ),
    ...
);

在 theme 中定义的这些属性是全局性的。

AppBar

在 Scaffold 控件的 AppBar 属性中也具有和 ThemeData 中的属性。我们可以在 AppBar 中对全局的属性进行覆盖。