底部导航栏的制作|非静态页面的使用
-
效果
-
源代码
- main.dart
import 'package:flutter/material.dart';
import 'package:flutter_app2/message_page.dart';
import 'package:flutter_app2/contact_page.dart';
import 'package:flutter_app2/social_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: MyBottom(),
);
}
}
class MyBottom extends StatefulWidget {
@override
_MyBottomState createState() => _MyBottomState();
}
class _MyBottomState extends State<MyBottom> {
int _curindex = 0; //当前页面索引
List<Widget> page = List(); //用List保存大量子页面
//重写State中的initState方法来初始化页面
@override
void initState() {
//将子页面添加到page列表中
page..add(MessagePage())..add(ContactPage())..add(SocialPage());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: page[_curindex],
//底部导航按钮栏
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(icon: Icon(Icons.mode_comment), title: Text("消息")),
BottomNavigationBarItem(icon: Icon(Icons.account_circle), title: Text("联系人"),),
BottomNavigationBarItem(icon: Icon(Icons.explore), title: Text("动态"))
],
//当前页面索引,按照items排序
currentIndex: _curindex,
//当点击底部按钮时,index会做出相应改变
onTap: (int index){
setState(() {
_curindex = index;
});
},
),
);
}
}
- message_page.dart
import 'package:flutter/material.dart';
//定义拨号的页面
class MessagePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//头像
leading: Container(
padding: EdgeInsets.all(10.0), //边距
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn.jsdelivr.net/gh/cnatom/images/images/QQ图片20200108211847.jpg"),
),
),
title: Text("消息"), //标题
centerTitle: true, //标题居中
//右侧图标
actions: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Icon(Icons.camera_alt), //拍照
),
Container(
padding: EdgeInsets.all(10.0),
child: Icon(Icons.add), //加号
),
],
),
body: Column(
children: <Widget>[
_tile("https://cdn.jsdelivr.net/gh/cnatom/images/images/head.jpg",
"张三", "好好学习,天天向上"),
_tile(
"https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4027(20200125-154058).JPG",
"李四",
"新年快乐~"),
_tile(
"https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4031(20200125-154126).JPG",
"王五",
"愿你遍历山河,依然觉得人生值得"),
_tile(
"https://cdn.jsdelivr.net/gh/cnatom/images/images/1F14065D991-4F4C-A2DB-D2996F183A92(20190930-003.JPG",
"张伟",
"去见你想见的人,趁阳光正好,趁微风不噪")
],
),
);
}
}
//单个聊天标签
Widget _tile(String url, String title, String subtitle) {
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(url),
),
title: Text(title),
subtitle: Text(subtitle),
);
}
- contact_page.dart
import 'package:flutter/material.dart';
//定义联系人的页面
class ContactPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//头像
leading: Container(
padding: EdgeInsets.all(10.0), //边距
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn.jsdelivr.net/gh/cnatom/images/images/QQ图片20200108211847.jpg"),
),
),
title: Text("联系人"), //标题
centerTitle: true, //标题居中
//右侧图标
actions: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Icon(Icons.person_add), //加号
),
],
),
body: Column(
children: <Widget>[
_tile("https://cdn.jsdelivr.net/gh/cnatom/images/images/head.jpg","张三"),
_tile("https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4027(20200125-154058).JPG", "李四",),
_tile("https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4031(20200125-154126).JPG", "王五",),
_tile("https://cdn.jsdelivr.net/gh/cnatom/images/images/1F14065D991-4F4C-A2DB-D2996F183A92(20190930-003.JPG", "张伟",)
],
),
);
}
}
//单个联系人标签
Widget _tile(String url, String title) {
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(url),
),
title: Text(title),
);
}
- social.dart
import 'package:flutter/material.dart';
//定义动态的页面
class SocialPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//头像
leading: Container(
padding: EdgeInsets.all(10.0), //边距
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn.jsdelivr.net/gh/cnatom/images/images/QQ图片20200108211847.jpg"),
),
),
title: Text("动态"), //标题
centerTitle: true, //标题居中
//右侧图标
actions: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Icon(Icons.settings), //设置
),
],
),
body: Column(
children: <Widget>[
_tile(Icon(Icons.star,color: Colors.orange,),"好友动态"),
_tile(Icon(Icons.edit_location,color: Colors.pink,),"附近"),
_tile(Icon(Icons.games,color: Colors.blue,),"游戏"),
_tile(Icon(Icons.music_note,color: Colors.green,),"音乐"),
],
),
);
}
}
//单个标签
Widget _tile(Widget head,String title) {
return ListTile(
leading: head,
title: Text(title),
);
}