本文演示如何使用 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 { @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 方法来监听当前用户的选择。