本文演示如何使用 BottomNavigationBar 控件构建一个带底部 Tab 功能的界面框架。

在 flutter 中,可以通过 BottomNavigationBar 和 BottomNavigationBarItem 来构建底部的 Tab 功能。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Bottom Navigatior"),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile'))
],
onTap: (selected) => print("you choice is #123;selected}")
)
),
);
}
}

从代码上可以看到,BottomNavigationBar 通过 currentIndex 来记录当前的选项,并通过 onTap 方法来监听当前用户的选择。