Flutter 專題目錄匯總: 這個(gè)目錄方便大家快速查詢你要學(xué)習(xí)的內(nèi)容!!!

前面幾篇都是關(guān)于環(huán)境配置和基礎(chǔ)語(yǔ)法學(xué)習(xí). 在我個(gè)人認(rèn)為學(xué)習(xí)一門新的語(yǔ)言(快速高效學(xué)習(xí)) 一定是通過(guò)實(shí)踐,最好的就是帶著項(xiàng)目實(shí)操,如果你能夠仿寫下一個(gè)項(xiàng)目那么基本就差不多了! 這里我就用微信項(xiàng)目作為本次案例仿寫,希望大家喜歡!

Github 項(xiàng)目地址 歡迎大家點(diǎn)贊心心 謝謝

一: 微信項(xiàng)目搭建

① 主APP

這里主要是把主界面抽取出去 方便查閱和修改

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WeChat',
      theme: ThemeData(
        highlightColor: Color.fromARGB(1, 0, 0, 0),
        splashColor: Color.fromARGB(1, 0, 0, 0),
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: KCRootPage(),
    );
  }
}

• highlightColor : 高亮色設(shè)置
• splashColor : 長(zhǎng)按顏色設(shè)置
• KCRootPage : 根控制器

② 根控制器

根控制器的配置和基本iOS開發(fā)是一致的!
其中 class KCRootPage extends StatefulWidget 這樣就能夠動(dòng)態(tài)調(diào)整也就所謂的狀態(tài)管理

class KCRootPage extends StatefulWidget {
  @override
  _KCRootPageState createState() => _KCRootPageState();
}

class _KCRootPageState extends State<KCRootPage> {
  int _currentIndex = 0;
  List<Widget> _pages = [KCChatPage(),KCFriendsPage(),KCDiscoverPage(), KCMinePage()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index){
          setState(() {
            _currentIndex = index;
          });
        },
        selectedFontSize: 12.0,
        currentIndex: _currentIndex,
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.chat),label: '微信'),
          BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: '通訊錄'),
          BottomNavigationBarItem(icon: Icon(Icons.history),label: '發(fā)現(xiàn)'),
          BottomNavigationBarItem(icon: Icon(Icons.person),label: '我'),
        ],
      ),
    );
  }
}

• 通過(guò)BottomNavigationBarItem 設(shè)置了底部按鈕: 微信、通訊錄、發(fā)現(xiàn)、我
• List<Widget> _pages = [KCChatPage(),KCFriendsPage(),KCDiscoverPage(), KCMinePage()]; 設(shè)置一個(gè)數(shù)組來(lái)收集相應(yīng)頁(yè)面
• currentIndex : 跟蹤當(dāng)前點(diǎn)擊的按鈕,從而跳到相應(yīng)的頁(yè)面
• onTap : 作為用戶的響應(yīng) -> 修改狀態(tài)!

到這里我們看看頁(yè)面樣式,是不是非常簡(jiǎn)單? ?? flutter 誰(shuí)用誰(shuí)知道

③ 啟動(dòng)頁(yè)&圖標(biāo)設(shè)置

A: iOS 設(shè)置

• 打開iOS工程 -> Runner -> 刪掉原來(lái) Flutter 的圖標(biāo)

• Bundle name 修改成微信

B: Android 設(shè)置

• AndroidManifest.xml -> android:label="微信" 修改項(xiàng)目顯示名稱

• drawable -> launch_background

   <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item>

• pubspec.yaml 放開注釋 方便后面工程里面的圖標(biāo)設(shè)置

  assets:
    - images/

下一篇: 微信項(xiàng)目發(fā)現(xiàn)頁(yè)面