1. Tab的簡(jiǎn)單使用了解

要實(shí)現(xiàn)tab(選項(xiàng)卡或者標(biāo)簽視圖)需要用到三個(gè)組件：

• TabBar
• TabBarView
• TabController

這一塊，我也不知道怎么整理了，直接提供代碼吧：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 設(shè)置導(dǎo)航欄顏色為藍(lán)色)),);}
}class Home extends StatelessWidget {const Home({super.key});@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3, child: Scaffold(appBar: AppBar(leading: IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.menu),tooltip: "Navigation",),actions: [IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.search),tooltip: "search",)],title: Text("App Demo"),elevation: 0.0,bottom: TabBar(unselectedLabelColor: Colors.black38,indicatorColor: Colors.black54,indicatorSize: TabBarIndicatorSize.label,indicatorWeight: 1.0,tabs: [Tab(icon: Icon(Icons.local_florist)),Tab(icon: Icon(Icons.change_history)),Tab(icon: Icon(Icons.directions_bike)),]),),body: TabBarView(children: [Icon(Icons.local_florist, size: 128.0, color: Colors.black12),Icon(Icons.change_history, size: 128.0, color: Colors.black12),Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),]),));}
}

效果圖如下:

2. Drawer 側(cè)邊欄簡(jiǎn)單使用

在手勢(shì)在屏幕進(jìn)行左滑手勢(shì)時(shí)，可以通過設(shè)置drawer屬性，來實(shí)現(xiàn)側(cè)邊欄顯示的效果。

側(cè)邊欄代碼的實(shí)現(xiàn)如下（為了避免代碼太長(zhǎng)，新建一個(gè)實(shí)現(xiàn)Drawer視圖的文件）：

import 'package:flutter/material.dart';class DrawerDemo extends StatelessWidget {const DrawerDemo({super.key});@overrideWidget build(BuildContext context) {return Drawer(child: ListView(padding: EdgeInsets.zero,children: [// DrawerHeader(//   decoration: BoxDecoration(//     color: Colors.greenAccent//   ),//   child: Text("Header".toUpperCase()),// ),UserAccountsDrawerHeader(accountName: Text("zhuzhu", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black)), accountEmail: Text("zhuzhu@com.net", style: TextStyle(color: Colors.black),),currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage("https://img1.baidu.com/it/u=1368815763,3761060632&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=434"),),decoration: BoxDecoration(image: DecorationImage(image: NetworkImage("https://i-blog.csdnimg.cn/blog_migrate/41635df939e6dd13c6d5e2af785d358b.jpeg"),fit: BoxFit.cover,colorFilter: ColorFilter.mode(Colors.yellow.withAlpha(150), BlendMode.srcOver))),),ListTile(title: Text("Message", textAlign: TextAlign.right),trailing: Icon(Icons.message, color: Colors.black12, size: 22.0),onTap: () => Navigator.pop(context), // 關(guān)閉抽屜),ListTile(title: Text("Favorite", textAlign: TextAlign.right),trailing: Icon(Icons.favorite, color: Colors.black12, size: 22.0),onTap: () => Navigator.pop(context), // 關(guān)閉抽屜),ListTile(title: Text("Settings", textAlign: TextAlign.right),trailing: Icon(Icons.settings, color: Colors.black12, size: 22.0),onTap: () => Navigator.pop(context), // 關(guān)閉抽屜),],),);}
}

然后將DrawerDemo 添加到drawer屬性里，代碼如下：

import 'package:flutter/material.dart';
import 'Demo/Drawer_demo.dart'; // 導(dǎo)入DrawerDemo所在的文件void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 設(shè)置導(dǎo)航欄顏色為藍(lán)色)),);}
}class Home extends StatelessWidget {const Home({super.key});@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3, child: Scaffold(appBar: AppBar(leading: IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.menu),tooltip: "Navigation",),actions: [IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.search),tooltip: "search",)],title: Text("App Demo"),elevation: 0.0,bottom: TabBar(unselectedLabelColor: Colors.black38,indicatorColor: Colors.black54,indicatorSize: TabBarIndicatorSize.label,indicatorWeight: 1.0,tabs: [Tab(icon: Icon(Icons.local_florist)),Tab(icon: Icon(Icons.change_history)),Tab(icon: Icon(Icons.directions_bike)),]),),body: TabBarView(children: [Icon(Icons.local_florist, size: 128.0, color: Colors.black12),Icon(Icons.change_history, size: 128.0, color: Colors.black12),Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),]),// 添加側(cè)邊欄， 用掃動(dòng)的手勢(shì)來顯示這個(gè)側(cè)邊欄drawer: DrawerDemo()));}
}

效果如下：

3. 底部導(dǎo)航欄的添加

底部導(dǎo)航欄的添加，可以通過屬性bottomNavigationBar來設(shè)置，實(shí)現(xiàn)它需要用到這兩個(gè)組件：

• BottomNavigationBar
• BottomNavigationBarItem

之前頁(yè)面都是靜態(tài)頁(yè)面，創(chuàng)建的類也都是繼承于StatelessWidget，但是點(diǎn)擊tabbar需要根據(jù)點(diǎn)擊改變狀態(tài)，所以，就需要用新的組件StatefulWidget。這一次就先只記錄怎么使用，后面有時(shí)間把這個(gè)控件的說明再補(bǔ)充上。

根據(jù)前面的代碼，抽取出一些代碼，并創(chuàng)建以下三個(gè)類：

• ExploreDemo

import 'package:flutter/material.dart';
import 'ListView_demo.dart';
import 'Drawer_demo.dart';class  ExploreDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3, child: Scaffold(appBar: AppBar(leading: IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.menu),tooltip: "Navigation",),actions: [IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.search),tooltip: "search",)],title: Text("App Demo"),elevation: 0.0,bottom: TabBar(unselectedLabelColor: Colors.black38,indicatorColor: Colors.black54,indicatorSize: TabBarIndicatorSize.label,indicatorWeight: 1.0,tabs: [Tab(icon: Icon(Icons.local_florist)),Tab(icon: Icon(Icons.change_history)),Tab(icon: Icon(Icons.directions_bike)),]),),body: TabBarView(children: [ListViewDemo(),Icon(Icons.change_history, size: 128.0, color: Colors.black12),Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),]),// 添加側(cè)邊欄， 用掃動(dòng)的手勢(shì)來顯示這個(gè)側(cè)邊欄drawer: DrawerDemo()));}
}

• HistoryDemo

import 'package:flutter/material.dart';class  HistoryDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("歷史記錄")),body: Container(child: Center(child: Text("歷史記錄"),),));}
}

• MyviewDemo

import 'package:flutter/material.dart';class  MyviewDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("個(gè)人主頁(yè)")),body: Container(child: Center(child: Text("個(gè)人主頁(yè)"),),));}
}

基礎(chǔ)工作做好后，在main.dart 文件中，實(shí)現(xiàn)如下代碼：

import 'package:flutter/material.dart';
import 'Demo/Explore_demo.dart';
import 'Demo/History_demo.dart';
import 'Demo/MyView_demo.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 設(shè)置導(dǎo)航欄顏色為藍(lán)色)),);}
}class Home extends StatefulWidget {const Home({super.key});@overrideState<StatefulWidget> createState() {return _HomeState();}
}class _HomeState extends State<Home> {int _currentPageIndex = 0;// 提前創(chuàng)建3個(gè)視圖，當(dāng)點(diǎn)擊tabbar的時(shí)候，調(diào)用setState的index來去對(duì)應(yīng)的頁(yè)面final List<Widget> pageLists = [ExploreDemo(),HistoryDemo(),MyviewDemo()];void _onTapHandler (int index) {// 更新狀態(tài)setState(() {_currentPageIndex = index;});}@overrideWidget build(BuildContext context) {return Scaffold(// 根據(jù)_currentPageIndex展示視圖body: pageLists[_currentPageIndex],// 設(shè)置底部tabbarbottomNavigationBar: BottomNavigationBar(currentIndex: _currentPageIndex,onTap: _onTapHandler,type: BottomNavigationBarType.fixed,fixedColor: Colors.black,items: [BottomNavigationBarItem(icon: Icon(Icons.explore),label: "explore"),BottomNavigationBarItem(icon: Icon(Icons.history),label: "history"),BottomNavigationBarItem(icon: Icon(Icons.person),label: "My"),]));}
}

效果圖如下：