Flutter六：Material Design風(fēng)格Widget

提綱

1.MaterialApp
2.scaffold
3.AppBar
4.TabBar
4.BottomNavigationBar
5.Drawer
6.FloatingActionButton
7.FlatButton
8.PopupMenuButton
9.SimpleDialog
10.AlertDialog
11.SnackBar
12.TextField
13.Card

一团赁、 MaterialApp（應(yīng)用組件）

MaterialApp代表使用質(zhì)感設(shè)置風(fēng)格的應(yīng)用踩衩，一個(gè)完整的Flutter項(xiàng)目就是從MaterialApp開始的捕发。

屬性名稱	說明	類型
home	主頁	Widget
routes	路由	Map<String, WidgetBuilder>
initialRoute	初始路由	String
onGenerateRoute	生成路由	RouteFactory
onUnknownRoute	未知路由	RouteFactory
navigatorObservers	導(dǎo)航觀察器	List
builder	建造者	TransitionBuilder
title	標(biāo)題	String
onGenerateTitle	生成標(biāo)題	GenerateAppTitle
color	顏色	Color
theme	主題	ThemeData
locale	地點(diǎn)	Locale
localizationsDelegates	本地化委托	Iterable<LocalizationsDelegate>
localeResolutionCallback	區(qū)域分辨回調(diào)	LocaleResolutionCallback
supportedLocales	支持區(qū)域	Iterable
debugShowMaterialGrid	調(diào)試顯示材質(zhì)網(wǎng)格	bool
showPerformanceOverlay	顯示性能疊加	bool
checkerboardRasterCacheImages	棋盤格光柵緩存圖像	bool
checkerboardOffscreenLayers	棋盤格層	bool
showSemanticsDebugger	顯示語義調(diào)試器	bool
debugShowCheckedModeBanner	調(diào)試顯示檢查模式橫幅	bool
navigatorKey	導(dǎo)航鍵	GlobalKey

二、 scaffold（腳手架組件） [?sk?f??ld]

屬性名稱	說明	類型
appBar	AppBar	顯示在界面頂部的一個(gè) AppBar
body	Widget	當(dāng)前界面所顯示的主要內(nèi)容
floatingActionButton	Widget	在 Material 中定義的一個(gè)功能按鈕
persistentFooterButtons	List<Widget>	固定在下方顯示的按鈕
drawer	Widget	側(cè)邊欄控件
bottomNavigationBar	Widget	顯示在底部的導(dǎo)航欄按鈕欄〔饽ⅲ可以查看文檔：Flutter學(xué)習(xí)之制作底部菜單導(dǎo)航
backgroundColor	Color	背景顏色
resizeToAvoidBottomPadding	bool	控制界面內(nèi)容 body是否重新布局來避免底部被覆蓋了，比如當(dāng)鍵盤顯示的時(shí)候既棺，重新布局避免被鍵盤蓋住內(nèi)容。默認(rèn)值為 true

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('首頁'),
      ),
      drawer: Drawer(
        child: DrawaerScreen(),
        elevation: 2.0,
      ),
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
      ...
      ),
    );
  }

三懒叛、AppBar（應(yīng)用按鈕組件）

AppBar是一個(gè)頂端欄丸冕，對應(yīng)著 Android 的 Toolbar。

image.png

屬性名稱	類型	說明
leading	Widget	在標(biāo)題前面顯示的一個(gè)控件薛窥，在首頁通常顯示應(yīng)用的 logo胖烛；在其他界面通常顯示為返回按鈕。
title	Widget	Toolbar 中主要內(nèi)容诅迷，通常顯示為當(dāng)前界面的標(biāo)題文字佩番。
actions	List	一個(gè) Widget 列表，代表 Toolbar 中所顯示的菜單罢杉，對于常用的菜單趟畏，通常使用 IconButton 來表示；對于不常用的菜單通常使用 PopupMenuButton 來顯示為三個(gè)點(diǎn)滩租，點(diǎn)擊后彈出二級菜單赋秀。
bottom	PreferredSizeWidget	一個(gè) AppBarBottomWidget 對象，通常是 TabBar律想。用來在 Toolbar 標(biāo)題下面顯示一個(gè) Tab 導(dǎo)航欄猎莲。
elevation	double	控件的 z 坐標(biāo)順序，默認(rèn)值為 4技即，對于可滾動(dòng)的 SliverAppBar著洼，當(dāng) SliverAppBar 和內(nèi)容同級的時(shí)候，該值為 0姥份，當(dāng)內(nèi)容滾動(dòng) SliverAppBar 變?yōu)?Toolbar 的時(shí)候郭脂，修改 elevation 的值。
flexibleSpace	Widget	一個(gè)顯示在 AppBar 下方的控件澈歉，高度和 AppBar 高度一樣展鸡，可以實(shí)現(xiàn)一些特殊的效果，該屬性通常在 SliverAppBar 中使用埃难。
backgroundColor	Color	Appbar 的顏色莹弊，默認(rèn)值為 ThemeData.primaryColor。改值通常和下面的三個(gè)屬性一起使用涡尘。
brightness	Brightness	Appbar 的亮度忍弛，有白色和黑色兩種主題，默認(rèn)值為 ThemeData.primaryColorBrightness考抄。
iconTheme	IconThemeData	Appbar 上圖標(biāo)的顏色细疚、透明度、和尺寸信息川梅。默認(rèn)值為 ThemeData.primaryIconTheme疯兼。
textTheme	TextTheme	Appbar 上的文字樣式然遏。
centerTitle	bool	標(biāo)題是否居中顯示，默認(rèn)值根據(jù)不同的操作系統(tǒng)吧彪，顯示方式不一樣待侵。
toolbarOpacity	double

appBar: AppBar(
        title: Text('首頁'),
//        leading: Icon(Icons.android),
        backgroundColor: Colors.red,
        centerTitle: true,
        // 非隱藏的菜單
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.share),
              tooltip: 'Add Alarm',
              onPressed: () {}
          ),
          // 隱藏的菜單
          new PopupMenuButton<String>(
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
              new PopupMenuItem(
                  value:"選項(xiàng)一的內(nèi)容",
                  child: new Text("選項(xiàng)一")
              ),
              new PopupMenuItem(
                  value: "選項(xiàng)二的內(nèi)容",
                  child: new Text("選項(xiàng)二")
              )
            ],
            onSelected: (String action) {
              // 點(diǎn)擊選項(xiàng)的時(shí)候
              switch (action) {
                case 'A': break;
                case 'B': break;
                case 'C': break;
              }
            },
          ),
        ],
      ),

TabBar

1. 屬性：

屬性名稱	說明
controller	控制器
isScrollable = false	是否可以滑動(dòng)
indicatorColor	指示器的顏色
indicatorWeight	指示器高度
indicatorPadding	EdgeInsets.zero,
indicator	自定義指示器
indicatorSize
labelColor	選中文字顏色
labelStyle
labelPadding	文字的內(nèi)邊距
unselectedLabelColor	未選中文字顏色
unselectedLabelStyle
dragStartBehavior	DragStartBehavior.start,
onTap	點(diǎn)擊事件

2. 案例：實(shí)現(xiàn)tab切換功能

定義一個(gè)tab的集合tabs，類型為Tab,可以定義文本或者圖標(biāo)

 List<Tab> tabs = [
    Tab(text: "常規(guī)", icon: Icon(Icons.favorite)),
    Tab(text: "質(zhì)感", icon: Icon(Icons.airline_seat_recline_normal)),
    Tab(text: "動(dòng)畫", icon: Icon(Icons.devices          )),
  ];

定義TabController姨裸，必須加with TickerProviderStateMixin秧倾，否則報(bào)錯(cuò)，具體原理未知

//TabController必須放置build里邊傀缩，否則會(huì)報(bào)錯(cuò)
TabController controller = TabController(length: tabs.length, vsync: this);

3.定義一個(gè)column：
①TabBar：controller那先、tabs、isScrollable: true赡艰，如果為true表示可以滑動(dòng)胃榕，沒有沾滿全部，如若為false只顯示屏幕內(nèi)瞄摊。必要屬性，其他屬性自己試試即可

TabBar(
            //未選中tab的顏色
            unselectedLabelColor: Colors.black54,
            //選中tab的顏色
            labelColor: Colors.blue,
            //indicator顏色
            indicatorColor: Colors.blue,
            //indicator高度
            indicatorWeight: 2,
            controller: controller,
            tabs: tabs,
            isScrollable: false,
          ),

②expand--TabBarview：controler苦掘、children换帜，孩子放置對應(yīng)的界面，類似fragment

 Expanded(
              child: TabBarView(
            controller: controller,
            children: <Widget>[
              NormalScreen(),
              MaterialWidgetScreen(),
              AnimationScreen()
            ],
          ))

image.png

完整案例：

class KnowledgePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _KnowledgePage();
  }
}

class _KnowledgePage extends State<KnowledgePage>
    with TickerProviderStateMixin {
  TabController _tabController;
  List<Tab> tabs = [
    Tab(
      text: '汽車',
    ),
    Tab(
      text: '美女',
    ),
    Tab(
      text: '工作',
    ),
    Tab(
      text: '明星',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    _tabController = new TabController(length: tabs.length, vsync: this);
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: 50,
            color: Colors.red,
            child: TabBar(
              isScrollable: false,
              indicatorColor: Colors.white,
              tabs: tabs,
              controller: _tabController,
            ),
          ),
          Expanded(
              child: TabBarView(
            children: tabs.map((Tab tab) {
              return Center(
                  child: Text(
                tab.text,
                style: TextStyle(fontSize: 50, color: Colors.red),
              ));
            }).toList(),
            controller: _tabController,
          ))
        ],
      ),
    );
  }
}

四鹤啡、BottomNavigationBar

屬性

屬性名稱	類型	說明
currentIndex	int	當(dāng)前索引惯驼，用來切換按鈕控制
fixedColor	Color	選中按鈕顏色。如果沒有指定递瑰，則用系統(tǒng)主題色
iconSize	double	圖標(biāo)大小
items	List<BottomNavigationBarItem>	底部導(dǎo)航條按鈕
onTap	ValueChaged<int>	按下其中一個(gè)按鈕的回調(diào)祟牲。需要根據(jù)返回的索引設(shè)置當(dāng)前索引

案例：實(shí)現(xiàn)底部導(dǎo)航功能
前提：在腳手架scaffold架構(gòu)下邊的一個(gè)功能模塊
組件：BottomNavigationBar、Scaffold

定義當(dāng)前索引_curIndex抖部，用來確定切換的哪個(gè)頁面

//當(dāng)前選中的索引
  int _curIndex = 0;

定義當(dāng)前頁面_currentScreen

//當(dāng)前頁面
  var _currentScreen;

定義Appbar標(biāo)題集合说贝，統(tǒng)一管理

//AppBar標(biāo)題文字
  final appBarTitles = ["首頁", "組件", "容器", "其他"];

每個(gè)頁面的集合

//頁面集合
  final List PageList = [
    HomeScreen(),
    WidgetScreen(),
    ThirdScreen(),
    FourthScreen()
  ];

底部導(dǎo)航條目，包含標(biāo)題和圖標(biāo)

 //底部導(dǎo)航條目集合
  List<BottomNavigationBarItem> list = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首頁")),
    BottomNavigationBarItem(icon: Icon(Icons.widgets), title: Text("組件")),
    BottomNavigationBarItem(icon: Icon(Icons.contacts), title: Text("容器")),
    BottomNavigationBarItem(icon: Icon(Icons.devices_other), title: Text("其他")),
  ];

初始化一個(gè)頁面

 @override
  void initState() {
    super.initState();
    _currentScreen = PageList[_curIndex];
  }

布局中寫腳手架scaffold：
①Appbar：設(shè)置標(biāo)題
②body：2中的當(dāng)前頁面：_currentScreen
③drawer：側(cè)滑界面慎颗，自定義一個(gè)有狀態(tài)的界面
④BottomNavigationBarType底部導(dǎo)航：items乡恕、ontap，index俯萎，type

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '${appBarTitles[_curIndex]}',
          style: TextStyle(color: Colors.white),
        ),
        //圖標(biāo)主題設(shè)置
        iconTheme: IconThemeData(color: Colors.white),
        //設(shè)置標(biāo)題是否居中
        centerTitle: true,
        //toolbar顯示的菜單
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.add), onPressed: () {})
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: list,
        currentIndex: _curIndex,
        onTap: (index) {
          setState(() {
            _curIndex = index;
            _currentScreen = PageList[_curIndex];
          });
        },
        type: BottomNavigationBarType.fixed,
      ),
      body: _currentScreen,
      //側(cè)滑菜單
      drawer: Drawer(
        child: DrawerScreen(),
        elevation: 0,
      ),
    );
  }
}

完整代碼：

import 'package:flutter/material.dart';
import 'package:flutter_fly/ui/home_screen.dart';
import 'package:flutter_fly/ui/widget_screen.dart';
import 'package:flutter_fly/ui/third_screen.dart';
import 'package:flutter_fly/ui/fourth_screen.dart';
import 'package:flutter_fly/ui/drawer_screen.dart';

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  //當(dāng)前選中的索引
  int _curIndex = 0;

  //AppBar標(biāo)題文字
  final appBarTitles = ["首頁", "組件", "容器", "其他"];

  //當(dāng)前頁面
  var _currentScreen;

  //底部導(dǎo)航條目集合
  List<BottomNavigationBarItem> list = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首頁")),
    BottomNavigationBarItem(icon: Icon(Icons.widgets), title: Text("組件")),
    BottomNavigationBarItem(icon: Icon(Icons.contacts), title: Text("容器")),
    BottomNavigationBarItem(icon: Icon(Icons.devices_other), title: Text("其他")),
  ];

  //頁面集合
  final List PageList = [
    HomeScreen(),
    WidgetScreen(),
    ThirdScreen(),
    FourthScreen()
  ];

  @override
  void initState() {
    super.initState();
    _currentScreen = PageList[_curIndex];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '${appBarTitles[_curIndex]}',
          style: TextStyle(color: Colors.white),
        ),
        //圖標(biāo)主題設(shè)置
        iconTheme: IconThemeData(color: Colors.white),
        //設(shè)置標(biāo)題是否居中
        centerTitle: true,
        //toolbar顯示的菜單
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.add), onPressed: () {})
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: list,
        currentIndex: _curIndex,
        onTap: (index) {
          setState(() {
            _curIndex = index;
            _currentScreen = PageList[_curIndex];
          });
        },
        type: BottomNavigationBarType.fixed,
      ),
      body: _currentScreen,
      //側(cè)滑菜單
      drawer: Drawer(
        child: DrawerScreen(),
        elevation: 0,
      ),
    );
  }
}

五傲宜、 Drawer（抽屜組件）

Drawer類似Android中的DrawerLayoutView的功能，即抽屜菜單夫啊，可以從側(cè)邊拉出來函卒。一般結(jié)合Listview組件實(shí)現(xiàn)效果鼻疮，常見屬性：

drawer: Drawer(
        child: DrawaerScreen(),//可以放置任意Widget
        elevation: 2.0,//materialDesign組件的z坐標(biāo)順序
      ),

設(shè)置頭部效果以及列表

class DrawaerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        //設(shè)置用戶信息侠草、頭像、用戶名、Email等
        UserAccountsDrawerHeader(
          accountName: Text("大飛"),
          accountEmail: Text("dafei@163.com"),
          currentAccountPicture: CircleAvatar(
            backgroundImage: AssetImage('assets/images/avatar.jpg'),
          ),
          onDetailsPressed: () {
            print("點(diǎn)擊");
          },
          otherAccountsPictures: <Widget>[
            Container(
              child: Text('其他信息'),
            )
          ],
        ),
        ListTile(
          leading: Icon(
            Icons.settings,
            color: Colors.red,
          ),
          title: Text('設(shè)置'),
        ),
        ListTile(
          leading: Icon(
            Icons.person_add,
            color: Colors.red,
          ),
          title: Text('登錄'),
          onTap: () {

          },
        )
      ],
    );
  }
}

Flutter六：Material Design風(fēng)格Widget

Flutter六：Material Design風(fēng)格Widget

提綱

一团赁、 MaterialApp（應(yīng)用組件）

二、 scaffold（腳手架組件） [?sk?f??ld]

三懒叛、AppBar（應(yīng)用按鈕組件）

TabBar

1. 屬性：

2. 案例：實(shí)現(xiàn)tab切換功能

四鹤啡、BottomNavigationBar

五傲宜、 Drawer（抽屜組件）

填充（Padding）

六砸彬、尺寸限制類容器（ConstrainedBox、SizedBox肋僧、UnconstrainedBox羞秤、多重限制、其7. 它尺寸限制類容器）

七跷叉、裝飾容器（DecorationBox）

八逸雹、變換（Transform）

九、剪裁（Clip）

Flutter六：Material Design風(fēng)格Widget

提綱

一团赁、 MaterialApp（應(yīng)用組件）

二、 scaffold（腳手架組件） [?sk?f??ld]

三懒叛、AppBar（應(yīng)用按鈕組件）

TabBar

1. 屬性：

2. 案例：實(shí)現(xiàn)tab切換功能

四鹤啡、BottomNavigationBar

五傲宜、 Drawer（抽屜組件）

填充（Padding）

六砸彬、 尺寸限制類容器（ConstrainedBox、SizedBox肋僧、UnconstrainedBox羞秤、多重限制、其7. 它尺寸限制類容器）

七跷叉、 裝飾容器（DecorationBox）

八逸雹、 變換（Transform）

九、剪裁（Clip）

六砸彬、尺寸限制類容器（ConstrainedBox、SizedBox肋僧、UnconstrainedBox羞秤、多重限制、其7. 它尺寸限制類容器）

七跷叉、裝飾容器（DecorationBox）

八逸雹、變換（Transform）