Flutter常用組件

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

  • 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)閉，類型：typedef WillPopCallback = Future<bool> Function();限定返回值的方法，可用來(lái)實(shí)現(xiàn)類似雙擊返

  • BottomNavigationBar

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

  • PageView

類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è)置行和列子組件的大小比例，類似權(quán)重表示行或者列所占的比例，利用flex屬性控制行或者列中內(nèi)容的收縮或者擴(kuò)展模式。

  • MainAxisAlignment

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

  • CrossAxisAlignment

類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類提供了多種繪制框的方法。該框具有邊框，主體，并可以投射boxShadow。
BoxDecoration的形狀可以是圓形或矩形。如果是矩形，則borderRadius屬性控制角的圓度。
BoxDecoration的主體是分層繪制的。最底層是顏色，它填充了該框。在此之上的是漸變，漸變也填充了該框。最后是圖像，其精確對(duì)齊由DecorationImage類控制。
shape或borderRadius不會(huì)修剪裝飾的Container的子級(jí)。如果需要剪輯，請(qǐng)插入剪輯小部件（例如ClipRect，ClipRRect，ClipPath）作為Container的子級(jí)。請(qǐng)注意，裁剪可能會(huì)導(dǎo)致性能損失。也可以看看：
DecoratedBox和Container，可以使用BoxDecoration對(duì)象配置的小部件。
CustomPaint，一個(gè)小部件，可讓您繪制任意圖形。
Decoration，可讓您定義其他裝飾的基類。

  • 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

類似腳注或者其他注釋，消息提示紅點(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 [...];//類AppBar的Actions
  }

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

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

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

  • AnimatedIcons

已實(shí)現(xiàn)的動(dòng)畫轉(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)畫的圖片或者組件(兩個(gè)頁(yè)面都需要)，再在兩個(gè)Hero組件中添加tag標(biāo)簽，以便Flutter規(guī)劃動(dòng)畫的路徑。

  • Align

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

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

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

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ò)渡

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

Listenable

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

CurvedAnimation

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

Interval

直到開(kāi)始時(shí)為0.0的曲線，然后從開(kāi)始處的0.0彎曲到結(jié)束處的彎曲（根據(jù)曲線），然后在結(jié)束處保持1.0。
間隔可用于延遲動(dòng)畫。 例如，使用Interval（開(kāi)始時(shí)間設(shè)置為0.5，結(jié)束時(shí)間設(shè)置為1.0）的Interval的六秒鐘動(dòng)畫實(shí)際上將變成三秒鐘的動(dòng)畫，該動(dòng)畫在三秒鐘后開(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，只需將其子類化并實(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è)繼承的窗口小部件，它為該窗口小部件的子樹中的ListTiles定義顏色和樣式參數(shù)。
此處指定的值用于沒(méi)有指定顯式非null值的ListTile屬性。
Drawer小部件為其子級(jí)指定一個(gè)tile主題，該主題將樣式設(shè)置為L(zhǎng)istTileStyle.drawer。
*了狗了 一萬(wàn)個(gè)小部件

PositionedTransition

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 前言 demo地址 由于我電腦一直沒(méi)搞好as，（主要是Android sdk的問(wèn)題），所以用的vs開(kāi)發(fā)學(xué)習(xí)，而且v...
    錦鯉躍龍閱讀 4,806評(píng)論 0贊 12
  • MaterialApp 屬性 builder：用于將小部件插入導(dǎo)航器上方但位于由widgetsapp小部件創(chuàng)建的其...
    周尚千尋閱讀 1,437評(píng)論 0贊 0
  • 一個(gè)擁有繪制、定位、調(diào)整大小的 widget。 最常用的默認(rèn)布局！只能包含一個(gè)child:，支持配置 paddin...
    一晚TT用了八個(gè)閱讀 475評(píng)論 0贊 0
  • flutter中所有的東西都是組件（widget），組件又分為動(dòng)態(tài)組件（StatefulWidget）、靜態(tài)組件（...
    SFHinc閱讀 1,679評(píng)論 0贊 1
  • 網(wǎng)絡(luò)請(qǐng)求 http ^0.11.3+16 pub.dartlang.org/packages/ht… github...
    ibobo999閱讀 2,348評(píng)論 0贊 20