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

  • 效果

  • 源代码

  1. main.dart

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    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()，告诉框架重绘widget
              setState(() {
                _curindex = index;
              });
            },
          ),
        );
      }
    }

  2. message_page.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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),
  );
}
  1. contact_page.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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),
  );
}
  1. social.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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),
  );
}

 上一页

flutter

 评论

载入天数...载入时分秒...