有狀態(tài)和無狀態(tài)

• 因?yàn)镕lutter的渲染是增量渲染，界面渲染是直接將需要更改的Widget替換成新的Widget
• 自定義的Widget內(nèi)部屬性大部分是final修飾，而且很多構(gòu)造方法都加了const修飾成常量
• 渲染邏輯和數(shù)據(jù)邏輯是分開管理，保留數(shù)據(jù)邏輯，Widget每次都會(huì)創(chuàng)建一個(gè)新的，而數(shù)據(jù)會(huì)保留
• 如果當(dāng)前Widget中有數(shù)據(jù)邏輯，那么當(dāng)前Widget應(yīng)該是有狀態(tài)的

項(xiàng)目搭建

• MaterialApp
  • theme：設(shè)置主題色
  • home：入口
    • Scaffold：容器：例如
      • AppBar：頂部導(dǎo)航欄
      • drawer：側(cè)邊欄
      • body：因?yàn)镕lutter是樹渲染的，而tabbar點(diǎn)擊切換后需要保存上一個(gè)頁面的狀態(tài)，所有只有將頁面保存在樹中才能實(shí)現(xiàn)
        • PageView：分頁
      • bottomNavigationBar：底部導(dǎo)航欄
        • items：底部按鈕List
        • onTap：點(diǎn)擊item回調(diào)
        • type：樣式（三個(gè)以上必須設(shè)置，否則默認(rèn)白色）

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時(shí)必須設(shè)置
          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: '發(fā)現(xiàn)'
  ),
   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

啟動(dòng)圖配置

image.png

項(xiàng)目配置

在pubspec.yaml文件中進(jìn)行配置，注意配置時(shí)的空格要對(duì)齊

image.png

項(xiàng)目地址