Flutter仿微信（一）项目搭建和资源配置

有状态和无状态

因为Flutter的渲染是增量渲染，界面渲染是直接将需要更改的Widget替换成新的Widget
自定义的Widget内部属性大部分是final修饰，而且很多构造方法都加了const修饰成常量
渲染逻辑和数据逻辑是分开管理，保留数据逻辑，Widget每次都会创建一个新的，而数据会保留
如果当前Widget中有数据逻辑，那么当前Widget应该是有状态的

项目搭建

MaterialApp
- theme：设置主题色
- home：入口
  - Scaffold：容器：例如
    - AppBar：顶部导航栏
    - drawer：侧边栏
    - body：因为Flutter是树渲染的，而tabbar点击切换后需要保存上一个页面的状态，所有只有将页面保存在树中才能实现
      - PageView：分页
    - bottomNavigationBar：底部导航栏
      - items：底部按钮List
      - onTap：点击item回调
      - type：样式（三个以上必须设置，否则默认白色）

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

class _RootPageState extends State <RootPage>{
  int _currentIndex = 0;
  final PageController _pageController = PageController();
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: _vcList,
      ),
      bottomNavigationBar: BottomNavigationBar(
          onTap:(index){
            setState(() {
              _currentIndex = index;
              _pageController.jumpToPage(_currentIndex);//切换
            });
          },
          selectedFontSize: 12.0,//选中字体
          type:BottomNavigationBarType.fixed ,//items>3时必须设置
          currentIndex: _currentIndex,
          items:_itemList,
      )
    );
  }
}

final List<Widget> _vcList = [ChatPage(),FriendsPage(),DiscoveryPage(),MinePage()];

final List<BottomNavigationBarItem> _itemList = [
   BottomNavigationBarItem(
       icon: Image.asset(
          'images/tabbar_chat.png',
          height: 20,
          width: 20,
      ),
      activeIcon: Image.asset(
        'images/tabbar_chat_hl.png',
        height: 20,
        width: 20,
    ),
      label: '微信'
  ),
   BottomNavigationBarItem(
       icon: Image.asset(
         'images/tabbar_friends.png',
         height: 20,
         width: 20,
       ),
       activeIcon: Image.asset(
         'images/tabbar_friends_hl.png',
         height: 20,
         width: 20,
       ),
       label: '通讯录'
  ),
   BottomNavigationBarItem(
      icon: Image.asset(
        'images/tabbar_discover.png',
        height: 20,
        width: 20,
      ),
      activeIcon: Image.asset(
        'images/tabbar_discover_hl.png',
        height: 20,
        width: 20,
      ),
      label: '发现'
  ),
   BottomNavigationBarItem(
      icon: Image.asset(
        'images/tabbar_mine.png',
        height: 20,
        width: 20,
      ),
      activeIcon: Image.asset(
        'images/tabbar_mine_hl.png',
        height: 20,
        width: 20,
      ),
      label: '我'
  ),
];

安卓配置

找到AndroidManifest.xml，配置包名等，类似iOS中的info.plist
![image.png](https://upload-images.jianshu.io/upload_images/16490557-28fad314d384a662.png?imageMogr2/auto-[图片上传中...(image.png-9d5077-1636354529650-0)]
orient/strip%7CimageView2/2/w/1240)