Created
January 15, 2020 16:25
-
-
Save ryanlid/1f40f47078a451e8b46386bcd6be9a30 to your computer and use it in GitHub Desktop.
BottomNavigationBar 示例
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp((MyApp())); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
home: MyHomePage(), | |
title: "MaterialApp示例", | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
@override | |
_MyHomePageState createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
// 当前选中的索引 | |
int _selectedIndex = 1; | |
// 导航栏中按钮选中对应数据 | |
final _widgetOptions = [ | |
Text('Index 0: 信息'), | |
Text('Index 1: 通讯录'), | |
Text('Index 2: 发现'), | |
]; | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
title: Text("BottomNavigationBar 示例"), | |
), | |
body: Center( | |
child: _widgetOptions[_selectedIndex], | |
), | |
// 底部按钮集合 | |
bottomNavigationBar: BottomNavigationBar( | |
items: <BottomNavigationBarItem>[ | |
BottomNavigationBarItem( | |
icon: Icon(Icons.message), | |
title: Text('信息'), | |
), | |
BottomNavigationBarItem( | |
icon: Icon(Icons.contacts), | |
title: Text('通讯录'), | |
), | |
BottomNavigationBarItem( | |
icon: Icon(Icons.account_circle), | |
title: Text('发现'), | |
), | |
], | |
// 当前选中项的索引 | |
currentIndex: _selectedIndex, | |
// 选项选中后的颜色 | |
fixedColor: Colors.deepPurple, | |
// 选项按下处理 | |
onTap: _onItemTap, | |
), | |
); | |
} | |
// 选项按下处理,设置当前索引值为index值 | |
void _onItemTap(int index) { | |
setState(() { | |
_selectedIndex = index; | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment