Flutter:底部导航栏组件-BottomNavigationBar
简介底部导航条BottomNavigationBar,可以非常方便的实现tap之间的切换。
底部导航条BottomNavigationBar,可以非常方便的实现tap之间的切换。
BottomNavigationBar主要属性:
- currentIndex:int类型,当前索引
- fixedColor:Color类型,选中按钮的颜色
- iconSize:double类型,按钮图标的大小
- items:List
类型,底部导航按钮集 - onTap:ValueChanged
,按下某个按钮的回调事件
底部导航栏Demo
import 'package:flutter/material.dart';
class BottomNavigationBarWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
int _selectIndex = 1;
return Scaffold(
appBar: AppBar(
title: Text('风格组件:BottomNavigationBar'),
centerTitle: true,
elevation: 0.0,
),
body: null,
bottomNavigationBar: BottomNavigationBar(
onTap: (index) {
print(index);
},
currentIndex: _selectIndex, //设置当前索引
type: BottomNavigationBarType.fixed, //超过3个item时就需要设置该选项,否则不会显示
items: [
BottomNavigationBarItem(
//设置文字
label: '信息',
//设置图标
icon: Icon(Icons.message),
),
BottomNavigationBarItem(
label: '朋友',
icon: Icon(Icons.contact_phone),
),
BottomNavigationBarItem(
label: '消息',
icon: Icon(Icons.message),
),
BottomNavigationBarItem(
label: '我的',
icon: Icon(Icons.account_circle),
),
],
),
);
}
}
如果需要进行切换,就需要将组件设置成StatefulWidget,然后将如下代码
onTap: (index) {
print(index);
},
改成:
setState(() {
_selectIndex = index;
});