Flutter第六讲，项目框架搭建

我们上篇把底部的导航栏搭建出来了，今天我们来把每个Item对应的页面先搭出来，我们首先来新建四个Dart File，每个页面都是一个Scaffold里加一个Text来显示下，我们把四个页面分别命名为,chat_page, contact_page, discovery_page, mine_page,四个代码都一样我就贴一个出来了

import 'package:flutter/material.dart';

class ChatPage extends StatefulWidget {
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title: Text("微信"),),
        body: Center(
          child: Text("聊天页面"),
        ),
      ),
    );
  }
}

其他几个文件就把AppBar的title和Text的内容改成对应的页面名称就行，我们这里用StatefulWidget是为我们后面做准备，每个页面肯定都是会有状态变更的

然后改下我们root_page 里的代码，我们新建一个List来存放我们刚写好的四个页面，然后把之前的Scaffold里的body用我们数组里的一项来填充，具体代码如下：

mport 'package:flutter/material.dart';
import 'package:wechatdemo/chat_page.dart';
import 'package:wechatdemo/contact_page.dart';
import 'package:wechatdemo/discovery_page.dart';
import 'package:wechatdemo/mine_page.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;
  List pages = [ChatPage(), ContactPage(), DiscoveryPage(), MinePage()];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          onTap: (index){
            _currentIndex = index;
            setState(() {
            });
          },
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('微信')),
            BottomNavigationBarItem(icon: Icon(Icons.bookmark), title: Text('通讯录')),
            BottomNavigationBarItem(icon: Icon(Icons.history), title: Text('发现')),
            BottomNavigationBarItem(icon: Icon(Icons.person_outline), title: Text('我的')),
          ],
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.green,
          currentIndex: _currentIndex,

        ),
        body: pages[_currentIndex],
      ),
    );
  }
}

好了，我们保存下看看效果

今天我们就先简单的搭建了下项目的基本框架，是不是觉得Flutter也很好学很有意思呢，后面我们会先从发现和我的这两个模块先做起

 

喜欢的朋友可以扫描关注我的公众号(多多点赞，多多打赏，您的支持是我写作的最大动力）

iOS_DevTips