需求:
底部导航条以及页面切换功能的实现。
效果图:
在这个过程中,我创建了一个tab.dart, 首页是home.dart,消息页是message.dart,设置页是setting.dart。
tab.dart:
import 'package:flutter/material.dart';
import 'home.dart';
import 'message.dart';
import 'setting.dart';
class tab extends StatefulWidget {
@override
_tabState createState() => _tabState();
}
class _tabState extends State<tab> {
int currentIndex=0;
List _pageList=[
Home(),
Message(),
Setting(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello word")
),
body: this._pageList[this.currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this.currentIndex,
onTap: (int index){
setState(() {
this.currentIndex=index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页"),
),
BottomNavigationBarItem(
icon: Icon(Icons.add_comment),
title: Text("消息"),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("設置"),
),
],
fixedColor: Colors.blue,
),
);
}
}
home.dart
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text("首页"),
);
}
}
message.dart
import 'package:flutter/material.dart';
class Message extends StatefulWidget {
@override
_MessageState createState() => _MessageState();
}
class _MessageState extends State<Message> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text("消息页"),
);
}
}
setting.dart
import 'package:flutter/material.dart';
class Setting extends StatefulWidget {
@override
_SettingState createState() => _SettingState();
}
class _SettingState extends State<Setting> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text("设置页"),
);
}
}
然后就完成了,最后将tab.dart放到MateriaApp中的home中就行,如下图:
顶部导航栏参数配置
在TabBar中与tabs同级设置
isScrollable: false, //是否可滚动
indicatorColor: Colors.red, //bar的下划线指示器选中颜色
indicatorWeight: 3, //bar的下划线指示器的高度
indicatorPadding: EdgeInsets.all(8.0), //bar的下划线指示器的padding
labelColor: Colors.yellow, //标签文字颜色
indicatorSize: TabBarIndicatorSize.label, //下划线指示器与标签文字等宽,默认为tab与bar等宽
labelStyle: TextStyle(), //标签文字样式
labelPadding: EdgeInsets.only(left: 8.0), //标签文字padding
unselectedLabelColor: Colors.white, //未选中文字标签颜色
unselectedLabelStyle: TextStyle(), //未选中文字标签样式
基础篇
------------------------------------------------------------
Flutter之自定义底部导航条以及页面切换实例——Flutter基础系列
Flutter之抽屉组件drawer,设置drawer宽度——Flutter基础系列
Flutter之自定义按钮RaisedButton、OutlineButton、IconButton等——Flutter基础系列