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