第四章：Flutter之wechatDemo（主框架搭建）

上节回顾到部件之间的布局方式，此节课正式开始用demo来实际应用。

1：创建应用图标和启动图

首先我们用android studio创建应用wechatDemo，并且为项目添加启动图和图标。

ios添加启动图和图标

打开ios文件夹中的xcode工程，往里面添加。

image.png

android添加启动图和图标

image.png
image.png
image.png image.png

2：导入本地资源图片文件

image.png

3：创建根视图页面

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        fixedColor: Colors.green,//选中的颜色
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,//选中的字体大小
        items: [
          BottomNavigationBarItem(icon: Image.asset('images/tabbar_chat.png',width: 20,height: 20,),activeIcon:Image.asset('images/tabbar_chat_hl.png',width: 20,height: 20,), label: '聊天'),
          BottomNavigationBarItem(icon: Image.asset('images/tabbar_friends.png',width: 20,height: 20,),activeIcon:Image.asset('images/tabbar_friends_hl.png',width: 20,height: 20,), label: '通讯录'),
          BottomNavigationBarItem(icon: Image.asset('images/tabbar_discover.png',width: 20,height: 20,),activeIcon:Image.asset('images/tabbar_discover_hl.png',width: 20,height: 20,), label: '发现'),
          BottomNavigationBarItem(icon: Image.asset('images/tabbar_mine.png',width: 20,height: 20,),activeIcon:Image.asset('images/tabbar_mine_hl.png',width: 20,height: 20,), label: '我'),
        ],
      ),

    );
  }
}

运行：

11.png

4.改造：新增选中效果

问题抛出：因为要重新渲染页面，所以我们需要把部件变为可变状态部件。！！！！！

首选我们把MyHomePage摘出来

image.png

import 'package:flutter/material.dart';


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        fixedColor: Colors.green,
        //选中的颜色
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        onTap: (int index){

          setState(() {
            _currentIndex = index;
          });

        },
        //选中的字体大小
        items: [
          BottomNavigationBarItem(icon: Image.asset(
            'images/tabbar_chat.png', width: 20, height: 20,),
              activeIcon: Image.asset(
                'images/tabbar_chat_hl.png', width: 20, height: 20,),
              label: '聊天'),
          BottomNavigationBarItem(icon: Image.asset(
            'images/tabbar_friends.png', width: 20, height: 20,),
              activeIcon: Image.asset(
                'images/tabbar_friends_hl.png', width: 20, height: 20,),
              label: '通讯录'),
          BottomNavigationBarItem(icon: Image.asset(
            'images/tabbar_discover.png', width: 20, height: 20,),
              activeIcon: Image.asset(
                'images/tabbar_discover_hl.png', width: 20, height: 20,),
              label: '发现'),
          BottomNavigationBarItem(icon: Image.asset(
            'images/tabbar_mine.png', width: 20, height: 20,),
              activeIcon: Image.asset(
                'images/tabbar_mine_hl.png', width: 20, height: 20,),
              label: '我'),
        ],
      ),

    );
  }
}

运行：此时出现底部菜单切换效果

5.改造：新增页面切换效果

这时候我们新增4个页面chatPage、friendsPage、discoverPage、minePage

image.png

同时改变HomePage中的代码

class _HomePageState extends State<HomePage> {

  int _currentIndex = 0;

  final List<Widget> widgets = [ChatPage(),FriendsPage(),DiscoverPage(),MinePage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: widgets[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        fixedColor: Colors.green,
        //选中的颜色
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        onTap: (int index){
          setState(() {
            _currentIndex = index;
          });

        },
        //选中的字体大小
        items: [
          BottomNavigationBarItem(icon: Image.asset(
            'images/tabbar_chat.png', width: 20, height: 20,),
              activeIcon: Image.asset(
                'images/tabbar_chat_hl.png', width: 20, height: 20,),
              label: '聊天'),
          BottomNavigationBarItem(icon: Image.asset(
            'images/tabbar_friends.png', width: 20, height: 20,),
              activeIcon: Image.asset(
                'images/tabbar_friends_hl.png', width: 20, height: 20,),
              label: '通讯录'),
          BottomNavigationBarItem(icon: Image.asset(
            'images/tabbar_discover.png', width: 20, height: 20,),
              activeIcon: Image.asset(
                'images/tabbar_discover_hl.png', width: 20, height: 20,),
              label: '发现'),
          BottomNavigationBarItem(icon: Image.asset(
            'images/tabbar_mine.png', width: 20, height: 20,),
              activeIcon: Image.asset(
                'images/tabbar_mine_hl.png', width: 20, height: 20,),
              label: '我'),
        ],
      ),

    );
  }
}

运行：此时出现页面切换效果