bottomNavigationBar导航栏-Flutter

底部导航栏的制作|非静态页面的使用

• 效果
  

• 源代码

1. 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;
          });
        },
      ),
    );
  }
}

2. 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),
  );
}

3. 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),
  );
}

4. 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),
  );
}