BottomNavigationBar 组件
BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数。
BottomNavigationBar 常见的属性
items List<BottomNavigationBarItem> 底部导航条按钮集合
iconSize icon
currentIndex 默认选中第几个
onTap 选中变化回调函数
fixedColor 选中的颜色
type BottomNavigationBarType.fixed BottomNavigationBarType.shifting
案例
案例代码
main.dart里面
return MaterialApp(
home: Home()
);
home组件里面
import 'package:flutter/material.dart';
import 'home/index.dart';
import 'home/class.dart';
import 'home/my.dart';
class Home extends StatefulWidget{
Home({Key key});
_HomeState createState() => _HomeState();
}
class _HomeState extends State {
var _currentIndex = 0;
var tabs = [Index(), ClassIf(), My()];
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('欢迎')
),
body: tabs[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (val) {
setState(() {
_currentIndex = val;
});
},
items: [
BottomNavigationBarItem(
title: Text('首页'),
icon: Icon(Icons.home)
),
BottomNavigationBarItem(
title: Text('分类'),
icon: Icon(Icons.category)
),
BottomNavigationBarItem(
title: Text('我的'),
icon: Icon(Icons.my_location)
),
],
),
);
}
}