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 {
  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 _vcList = [ChatPage(),FriendsPage(),DiscoveryPage(),MinePage()];

final List _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
]
orient/strip%7CimageView2/2/w/1240)

iocn配置

图片名字不能驼峰命名

image.png

启动图配置

image.png

项目配置

在pubspec.yaml文件中进行配置，注意配置时的空格要对齐

image.png

项目地址