工程中遇到的部分常用的或者必要組件記錄

• WillPopScope

class WillPopScope extends StatefulWidget {
  const WillPopScope({
    Key key,
    @required this.child,
    @required this.onWillPop,
  }) : assert(child != null),
       super(key: key);

參數(shù)onWillPop用來(lái)監(jiān)聽(tīng)當(dāng)用戶按下返回鍵時(shí)child是否關(guān)閉比被，類(lèi)型：typedef WillPopCallback = Future<bool> Function();限定返回值的方法腾供，可用來(lái)實(shí)現(xiàn)類(lèi)似雙擊返

• BottomNavigationBar

底部導(dǎo)航欄,類(lèi)似TabBar

• PageView

類(lèi)ViewPage
PageView+CustomScrollView時(shí)，翻頁(yè)rebuild的問(wèn)題可以通過(guò)給CustomScrollView設(shè)置不同的Key來(lái)解決
其他ScrollableView應(yīng)該也可以(待測(cè)試)

• Theme常用屬性

 theme: new ThemeData(
          primarySwatch: Colors.blue,//主色板：不需要指定顏色的空間大多使用該值劳翰，如ListView等的下拉弧線抽减。
          primaryColor: Colors.red,//原色：
          primaryIconTheme: IconThemeData(color: Colors.black),//Icon的顏色，僅限自帶Icons中圖標(biāo)
          primaryTextTheme: TextTheme(title: TextStyle(color: Colors.black, fontFamily: "Aveny")),
          textTheme: TextTheme(title: TextStyle(color: Colors.black))),
      home: new InstaHome(),

• Flexible

在行和列中使用該控件包裹朝群，可以設(shè)置行和列子組件的大小比例姜盈，類(lèi)似權(quán)重表示行或者列所占的比例哭当，利用flex屬性控制行或者列中內(nèi)容的收縮或者擴(kuò)展模式猪腕。

• MainAxisAlignment

如何在彈性布局中沿主軸放置子項(xiàng)，通常默認(rèn)為MainAxisAlignment.start則通常從主軸的開(kāi)始位置開(kāi)始放置子組件(若為行則水平方向钦勘，列則豎直方向)陋葡。該屬性不僅于Row和Column，部分其他組件亦可用彻采。

• CrossAxisAlignment

類(lèi)MainAxisAlignment腐缤，如何在彈性布局中沿橫軸放置子項(xiàng)。

• MainAxisSize

主軸尺寸如min肛响、max岭粤，常與MainAxisAlignment搭配使用

• MediaQuery

要了解當(dāng)前媒體的大小（例如特笋，包含您應(yīng)用程序的窗口）剃浇，可以從MediaQuery.of：MediaQuery.of（context）.size返回的MediaQueryData中讀取MediaQueryData.size屬性。文檔入口
MediaQuery.of(context).padding.top//頂部statusBar高度

SizedBox(child: XXX(),height: deviceSize.height * 0.15, )依據(jù)屏幕比例設(shè)置組件高度

• BoxDecoration

繪制邊框猎物。BoxDecoration類(lèi)提供了多種繪制框的方法虎囚。該框具有邊框，主體霸奕，并可以投射boxShadow溜宽。
BoxDecoration的形狀可以是圓形或矩形。如果是矩形质帅，則borderRadius屬性控制角的圓度适揉。
BoxDecoration的主體是分層繪制的。最底層是顏色煤惩，它填充了該框嫉嘀。在此之上的是漸變，漸變也填充了該框魄揉。最后是圖像剪侮，其精確對(duì)齊由DecorationImage類(lèi)控制。
shape或borderRadius不會(huì)修剪裝飾的Container的子級(jí)洛退。如果需要剪輯瓣俯，請(qǐng)插入剪輯小部件（例如ClipRect，ClipRRect兵怯，ClipPath）作為Container的子級(jí)彩匕。請(qǐng)注意，裁剪可能會(huì)導(dǎo)致性能損失媒区。也可以看看：
DecoratedBox和Container驼仪，可以使用BoxDecoration對(duì)象配置的小部件掸犬。
CustomPaint，一個(gè)小部件绪爸，可讓您繪制任意圖形湾碎。
Decoration，可讓您定義其他裝飾的基類(lèi)奠货。

• FractionallySizedBox

child按給的比例顯示大小介褥，若給定的寬高比不一致，則依據(jù)兩者中小者顯示

 FractionallySizedBox(
                  heightFactor: 0.5,
                  widthFactor: 0.5,
                  child: FlutterLogo(),
                )

• RandomContainer

背景色自由變更的Container

• DragTarget&Draggable

拖動(dòng)目標(biāo)控件&拖動(dòng)控件

Draggable(
          child: Container(//可拖動(dòng)控件原型
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              color: Colors.blue,
            ),
            height: 100,
            width: 100,
          ),
          childWhenDragging: Container(//拖動(dòng)時(shí)顯示的Widget
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(30),
              color: Colors.green,
            ),
            height: 100,
            width: 100,
//          color: Colors.red,
          ),
          feedback: Container(//原控件移動(dòng)之后原地丟下的Widget
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              color: Colors.red,
              borderRadius: BorderRadius.circular(30),
            ),
            height: 100,
            width: 100,
          ),
        )

DragTarget

DragTarget(
              builder: (BuildContext context, List<dynamic> accepted, List<dynamic> rejected) => Container(
                height: 200.0,
                width: 200.0,
                decoration: BoxDecoration(color: Colors.cyan),
                child: Center(//
                  child: Column(children: <Widget>[Text(accpeptedData.toString()),Text(rejectData.toString())],),
                ),
              ),
              onAccept: (int data) {//拖動(dòng)到指定位置仇味，且接收數(shù)據(jù)
                accpeptedData = data;
              },
              onLeave: (int data){//拖動(dòng)到指定位置之后取消
                rejectData=data;
              },
            )

• CircleAvatar

類(lèi)似腳注或者其他注釋呻顽，消息提示紅點(diǎn)雹顺，登陸頭像等丹墨。

• Placeholder

組件占位符

• Spacer

使用flex屬性控制大小
Spacer小部件將占用任何可用空間，因此將包含Spacer的Flex容器上的Flex.mainAxisAlignment設(shè)置為MainAxisAlignment.spaceAround嬉愧，MainAxisAlignment.spaceBetween或MainAxisAlignment.spaceEvenly不會(huì)產(chǎn)生任何可見(jiàn)效果：Spacer占用了所有空間 的額外空間贩挣，因此沒(méi)有剩余可重新分配。
可用來(lái)調(diào)節(jié)Row没酣、Colmun王财、Flex等組件

• Visibility

visible: false控制組件是否可見(jiàn)

• SearchDelegate

Scaffold中方法showSearch()，系統(tǒng)自帶的輔助搜索功能裕便，showSearch(context: context, delegate: DataSearch());需要自定義Delegate繼承父Delegate且實(shí)現(xiàn)其中的方法如下

  @override
  List<Widget> buildActions(BuildContext context) {
    return [...];//類(lèi)AppBar的Actions
  }

  @override
  Widget buildLeading(BuildContext context) {
    return ...;//頭部類(lèi)AppBar頭部
  }

  @override
  Widget buildResults(BuildContext context) {
    return ..;//搜索結(jié)果
  }

  @override
  Widget buildSuggestions(BuildContext context) {
      return ...;//搜索提示绒净，配合富文本之類(lèi)的已輸入的黑體未輸入的灰體
  }

• AnimatedIcons

已實(shí)現(xiàn)的動(dòng)畫(huà)轉(zhuǎn)場(chǎng)效果如視頻播放時(shí)暫停到播放的轉(zhuǎn)換，menu到arrow的轉(zhuǎn)換等

_controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      value: 1.0,
      vsync: this,
    );
....
AnimatedIcon(
              icon: AnimatedIcons.close_menu,
              semanticLabel: 'close',
              progress: _controller.view,
            )

progress用來(lái)控制進(jìn)度偿衰，

• RichText&TextSpan

富文本

RichText(
              text: TextSpan(
                  text: suggestionList[index].substring(0, query.length),
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),//已輸入的搜索部分
                  children: [
                    TextSpan(//未輸入的部分
                        text: suggestionList[index].substring(query.length),
                        style: TextStyle(color: Colors.grey))
                  ]),
            )

• Hero

直接使用該組件包裹希望制作動(dòng)畫(huà)的圖片或者組件(兩個(gè)頁(yè)面都需要)挂疆，再在兩個(gè)Hero組件中添加tag標(biāo)簽，以便Flutter規(guī)劃動(dòng)畫(huà)的路徑下翎。

• Align

設(shè)置相對(duì)位置

alignment: Alignment.lerp(Alignment.centerRight, Alignment.bottomRight, 0.5),)

除已經(jīng)預(yù)設(shè)好的位置還可以使用上面參數(shù)自定義位置缤言，前兩參數(shù)可理解為參數(shù)，最后一個(gè)為偏移量

• CachedNetworkImage&&Image.network

CachedNetworkImage(
       imageUrl: url,
       placeholder: (context,url) => CircularProgressIndicator(),//加載中View
       errorWidget: (context,url,error) => new Icon(Icons.error),//加載失敗的View
     ),

相較與Image.Network()视事，直接提供了加載結(jié)果的處理入口,ImageNetwork如下胆萧，跟自由度更高

Image.network(
                  '${Api.imgHeadHorizon}${model.backdropPath}',
                  height: imgHeight,
                  width: size.width,
                  fit: BoxFit.fill,
                  loadingBuilder: (context, widget, loadingProgress) {
                    if (loadingProgress != null) {//開(kāi)始時(shí)為空需判斷
                      //下面表達(dá)式中前者為當(dāng)前已經(jīng)下載的字節(jié)數(shù)，后者為字節(jié)總數(shù)俐东，可通過(guò)除法獲取百分比
                      if(loadingProgress.cumulativeBytesLoaded == loadingProgress.expectedTotalBytes){
                        print('(*^__^*) ');
                      }
                    }
                    return Container(color: Colors.cyan,);//如果沒(méi)特殊要求直接返回widget就好跌穗。
                  },

• Divider

分割線，對(duì)象

• AnimatedCrossFade

AnimatedCrossFade(
      firstChild: first,
      secondChild: second,
      firstCurve: const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
      secondCurve: const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
      sizeCurve: Curves.fastOutSlowIn,
      crossFadeState: isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
      duration: const Duration(milliseconds: 200),
    );

兩個(gè)界面的過(guò)渡虏辫，比如加載圖片時(shí)默認(rèn)和加載完成的過(guò)渡蚌吸，或者其他疊加布局時(shí)布局切換的過(guò)渡

• ExpansionPanelList

  例子

擴(kuò)展收縮的ListView或者Panel，若不是LIst可以考慮使用ExpansionTile

• ListView&GridView滑動(dòng)監(jiān)聽(tīng)

          if (controller.position.extentAfter == 0) {
                        
          }

方法二
...

• IgnorePointer

• IgnorePointer會(huì)攔截將要進(jìn)入自己內(nèi)部的觸摸事情乒裆，并向后傳遞

• Matrix4

屬性如下

//scale：縮放比例
Matrix4.diagonal3Values(2, 1, 1)
Matrix4.diagonal3(v.Vector3(2, 1, 1))
Matrix4.diagonal3(v.Vector3.array([2, 1, 1]))
//transform: 移動(dòng)
Matrix4.translationValues(30, 0, 0)
Matrix4.translation(v.Vector3(30, 0, 0))
Matrix4.translation(v.Vector3.array([0, -30, 0]))
//rotationZ：繞Z軸旋轉(zhuǎn)
//rotationX：繞X軸旋轉(zhuǎn)
//rotationY：繞Y軸旋轉(zhuǎn)
Matrix4.rotationZ(pi / 6)
Matrix4(cos(pi / 6), sin(pi / 6), 0, 0,-sin(pi / 6), cos(pi / 6), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
//columns：設(shè)置一個(gè)新的矩陣
//compose：復(fù)合平移套利、旋轉(zhuǎn)推励、縮放，形成新的狀態(tài)
Matrix4.columns( Vector3 translation, Quaternion rotation, Vector3 scale) 
//copy：復(fù)制一個(gè)4*4的張量(矩陣)
//identity：恢復(fù)初始狀態(tài)肉迫，也就是4*4的單位矩陣
//inverted：取相反的矩陣验辞，就是反著來(lái)
//outer(合并)、skew(扭曲)喊衫、skewX(x軸扭曲)跌造、skewY(y軸扭曲)、zero(置零矩陣)族购、fromList(將一個(gè)16位的一維數(shù)組轉(zhuǎn)換成4*4的矩陣)

• NotificationListener(widget) 監(jiān)聽(tīng)其子View滑動(dòng)狀態(tài)壳贪。子View的滾動(dòng)事件并發(fā)送通知

NotificationListener<ScrollNotification>(//只接受某個(gè)子類(lèi)型的通知
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  height: 900,
                  width: double.infinity,
                  color: Colors.red,
                )
              ],
            ),
          ),
          onNotification: (_){print('1111111');},//返回true則事件不在傳遞，false則繼續(xù)往父控件傳遞
        ),

child通常為scrollableView

• ScrollStartNotification寝杖，它指示小部件已開(kāi)始滾動(dòng)违施。通常為最先接收到的Notification

• 零個(gè)或多個(gè)ScrollUpdateNotifications（指示小部件已更改其滾動(dòng)位置）

• 零個(gè)或多個(gè)ScrollUpdateNotifications與零個(gè)或多個(gè)OverscrollNotifications混合，指示小部件未更改其滾動(dòng)位置瑟幕，因?yàn)楦臅?huì)導(dǎo)致其滾動(dòng)位置超出其滾動(dòng)范圍磕蒲。如滾動(dòng)到最頂部或者最底部

• 與ScrollUpdateNotifications和OverscrollNotifications穿插的是零個(gè)或多個(gè)UserScrollNotifications，它們表示用戶已更改其滾動(dòng)方向只盹。如水平滑動(dòng)之后直接豎直滑動(dòng)會(huì)調(diào)用UserScrollNotifications

• ScrollEndNotification辣往，它指示小部件已停止?jié)L動(dòng)。標(biāo)志滾動(dòng)事件結(jié)束
  一個(gè)UserScrollNotification殖卑，其ScrollDirection.idle的UserScrollNotification.direction站削。
  滑動(dòng)事件從開(kāi)始到結(jié)束 ScrollStartNotification--->UserScrollNotification(從無(wú)到有和從有到無(wú)都算變化)--->OverscrollNotification/ScrollUpdateNotifications--->ScrollEndNotification--->UserScrollNotification

• notification.depth=0/1/...表示監(jiān)聽(tīng)的深度，通常處理深度為0的及多層可滾動(dòng)只處理當(dāng)前子控件的滾動(dòng)

• CustomScrollView

結(jié)合了ScrollView和SliverAppBar(基于SliverPersistentHeader實(shí)現(xiàn))的控件

 Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(//折疊頭部
            title: Text('SliverDemoPage'),
            centerTitle: true,
            expandedHeight: 300,
            forceElevated: true,
             pinned: true,//折疊后不消失
            floating: true,// 當(dāng)有下滑手勢(shì)的時(shí)候孵稽，就會(huì)顯示 AppBar
            snap: true,// 當(dāng)下滑到一定比例许起，會(huì)自動(dòng)把 AppBar 展開(kāi)
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.parallax,
              background: Image.asset(
                'images/joker.jpg',
                fit: BoxFit.fill,
              ),
            ),
          ),
          SliverFillRemaining(child: Center(child: Text('填充剩余空間'),),)//填充剩余空間
        ],
      ),
    );

Slivers相關(guān)

• SliverFillViewport
• SliverFillRemaining
• SliverFixedExtentList
• SliverToBoxAdapter
• SliverPadding
• SliverPersistentHeader&SliverPersistentHeaderDelegate(SliverAppBar的內(nèi)部實(shí)現(xiàn))

若CustomScrollView底部橫向和縱向滾動(dòng)的沖突目前沒(méi)有解決辦法

• NestedScrollView

• SliverOverlapAbsorber
• SliverOverlapInjector

Scrollbar

AnimationController

動(dòng)畫(huà)的控制器。
此類(lèi)可讓您執(zhí)行以下任務(wù)：
向前或向后播放動(dòng)畫(huà)肛冶，或停止動(dòng)畫(huà)街氢。
將動(dòng)畫(huà)設(shè)置為特定值。
定義動(dòng)畫(huà)的upperBound和LowerBound值睦袖。
使用物理模擬創(chuàng)建猛沖動(dòng)畫(huà)效果珊肃。
默認(rèn)情況下，AnimationController在給定的持續(xù)時(shí)間內(nèi)線性生成的值介于0.0到1.0之間馅笙。 每當(dāng)運(yùn)行您的應(yīng)用的設(shè)備準(zhǔn)備顯示新幀時(shí)伦乔，動(dòng)畫(huà)控制器都會(huì)生成一個(gè)新值（通常，此速率約為每秒60個(gè)值）董习。

Listenable

維護(hù)偵聽(tīng)器列表的對(duì)象烈和。
偵聽(tīng)器通常用于通知客戶端對(duì)象已更新。
此接口有兩種變體：
ValueListenable皿淋，一個(gè)使用當(dāng)前值的概念擴(kuò)展Listenable接口的接口招刹。
動(dòng)畫(huà)恬试，一個(gè)擴(kuò)展ValueListenable接口以添加方向（正向或反向）概念的接口。
Flutter API中的許多類(lèi)都使用或?qū)崿F(xiàn)這些接口疯暑。 以下子類(lèi)特別相關(guān)：
ChangeNotifier训柴，可以將其子類(lèi)化或混入以創(chuàng)建實(shí)現(xiàn)Listenable接口的對(duì)象。
ValueNotifier妇拯，它使用可變值實(shí)現(xiàn)ValueListenable接口幻馁，該可變值在修改后會(huì)觸發(fā)通知。

CurvedAnimation

將曲線應(yīng)用于另一個(gè)動(dòng)畫(huà)的動(dòng)畫(huà)越锈。
當(dāng)您想對(duì)動(dòng)畫(huà)對(duì)象應(yīng)用非線性曲線時(shí)仗嗦，特別是在動(dòng)畫(huà)前進(jìn)和后退時(shí)想要不同的曲線時(shí)，CurvedAnimation很有用甘凭。
根據(jù)給定的曲線稀拐，CurvedAnimation的輸出范圍可能比其輸入范圍大。 例如对蒲，諸如Curves.elasticIn之類(lèi)的彈性曲線將大大超出或低于默認(rèn)范圍0.0到1.0钩蚊。

Interval

直到開(kāi)始時(shí)為0.0的曲線，然后從開(kāi)始處的0.0彎曲到結(jié)束處的彎曲（根據(jù)曲線）蹈矮，然后在結(jié)束處保持1.0。
間隔可用于延遲動(dòng)畫(huà)鸣驱。 例如泛鸟，使用Interval（開(kāi)始時(shí)間設(shè)置為0.5，結(jié)束時(shí)間設(shè)置為1.0）的Interval的六秒鐘動(dòng)畫(huà)實(shí)際上將變成三秒鐘的動(dòng)畫(huà)踊东，該動(dòng)畫(huà)在三秒鐘后開(kāi)始北滥。

          Opacity(
            opacity: CurvedAnimation(
              parent: ReverseAnimation(animation),
              curve: const Interval(0.5, 1.0),// Curves.***(easeInOut)
            ).value,
            child: const Text('Select a Category'),
          ),

AnimatedWidget

當(dāng)給定的Listenable更改值時(shí)重建的小部件。
AnimatedWidget最常與可收聽(tīng)的Animation對(duì)象一起使用闸翅，但可與任何Listenable（包括ChangeNotifier和ValueNotifier）一起使用再芋。
AnimatedWidget對(duì)于否則為無(wú)狀態(tài)的小部件最有用。 要使用AnimatedWidget坚冀，只需將其子類(lèi)化并實(shí)現(xiàn)build函數(shù)济赎。

  BackDropTitle({Key key, Listenable listenable}) : super(key: key, listenable: listenable);

  @override
  Widget build(BuildContext context) {
    //animation extends Listenable
    final Animation<double> animation = listenable;
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.title,
      softWrap: false,
      overflow: TextOverflow.ellipsis,
      child: Stack(
        children: <Widget>[
          Opacity(opacity: CurvedAnimation(parent: ReverseAnimation(animation), curve: Curves.easeInOut).value)
        ],
      ),
    );
  }

RotatedBox

 RotatedBox(
                  quarterTurns: 1, //1順時(shí)針90度，2順時(shí)針180度记某，3 順時(shí)針270度 司训，4順時(shí)針360度
                  child: Text("Hello world")
              ),

LayoutBuilder

大小不確定的布局，繪制時(shí)返回大小液南，可以根據(jù)大小返回不同布局

Material

 const Material({
    Key key,
    this.type = MaterialType.canvas,
    this.elevation = 0.0,
    this.color,
    this.shadowColor = const Color(0xFF000000),
    this.textStyle,
    this.borderRadius,
    this.shape,
    this.borderOnForeground = true,
    this.clipBehavior = Clip.none,
    this.animationDuration = kThemeChangeDuration,
    this.child,
  })

一個(gè)屬性比較全的小控件壳猜，形狀，圓角滑凉，裁剪等

ListTileTheme

一個(gè)繼承的窗口小部件统扳，它為該窗口小部件的子樹(shù)中的ListTiles定義顏色和樣式參數(shù)喘帚。
此處指定的值用于沒(méi)有指定顯式非null值的ListTile屬性。
Drawer小部件為其子級(jí)指定一個(gè)tile主題咒钟，該主題將樣式設(shè)置為L(zhǎng)istTileStyle.drawer啥辨。
*了狗了 一萬(wàn)個(gè)小部件

PositionedTransition

Positioned的動(dòng)畫(huà)版本，采用特定的Animation <RelativeRect>在動(dòng)畫(huà)的整個(gè)生命周期中將孩子的位置從開(kāi)始位置轉(zhuǎn)換到結(jié)束位置盯腌。
僅當(dāng)它是Stack的子代時(shí)才有效溉知。
這是PositionedTransition小部件的圖示，其由設(shè)置為Curves.elasticInOut的CurvedAnimation進(jìn)行矩形動(dòng)畫(huà)處理：