Flutter 的基本控制元件

文本控制元件

Text 支持兩種型別的文本展示，一個是默認的展示單一樣式文本 Text，另一個是支持多種混合樣式的富文本 Text.rich，

單一樣式文本 Text

單一樣式文本 Text 的初始化，是要傳入需要展示的字串，而這個字串的具體展示效果，受建構式中的其他引數控制，這些引數大致可以分為兩類：

• 控制整體文本布局的引數，如文本對齊方式 textAlign、文本排版方向 textDirection，文本顯示最大行數 maxLines、文本截斷規則 overflow 等等，這些都是建構式中的引數；
• 控制文本展示樣式的引數，如字體名稱 fontFamily、字體大小 fontSize、文本顏色 color、文本陰影 shadows 等等，這些引數被統一封裝到建構式中的引數 style 中，

示例代碼 - 定義了一段劇中布局、20號紅色粗體展示樣式的字串：

Text(    '文本是視圖系統中的常見空間，用來顯示一段特定樣式的字串，就比如 Android 里的 TextView，或是 iOS 中的 UILabel，',    textAlign: TextAlign.center, // 居中顯示    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.red),// 20 號，紅色粗體展示);

支持多種混合樣式的富文本 Text.rich

混合展示樣式與單一樣式的關鍵區別在于分片，即如何把一段字串分為幾個片段來管理，給每個片段單獨設定樣式，在 Flutter 中可以使用 TextSpan，

TextSpan 定義來一個字串片段該如何控制其展示樣式，而將這些有著獨立展示樣式的字串組裝在一起，則可以支持混合樣式的富文本展示，

示例代碼 - 分別定義黑色與紅色兩種展示樣式

TextStyle blackStyle = TextStyle(fontWeight: FontWeight.normal, fontSize: 20, color: Colors.black); // 黑色樣式    TextStyle redStyle = TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.red); // 紅色樣式    Text.rich(      TextSpan(        children: <TextSpan>[          TextSpan(text: '文本是視圖系統中的常見空間，用來顯示一段特定樣式的字串，就比如', style: redStyle), // 第 1 個片段，紅色樣式          TextSpan(text: 'Android', style: blackStyle), // 第 1 個片段，黑色樣式          TextSpan(text: '中的', style: redStyle), // 第 1 個片段，紅色樣式          TextSpan(text: 'TextView', style: blackStyle), // 第 1 個片段，黑色樣式        ]      ),    textAlign: TextAlign.center,);

圖片

在 Flutter 中有多張方式，用來加載不同形式、支持不同格式的圖片：

• 加載本地資源圖片，如 Image.asset('images/log.png');
• 加載本地（File 檔案）圖片，如 Image.file(new File('/storage/xxx/xxx/test.jpg'));
• 加載網路圖片，如 Image.network('http://xxx/xxx/test.gif')，

除了可以根據圖片的顯示方式設定不同的圖片源之外，圖片的構造方法還提供了填充模式 fit、拉伸模式 centerSlice、重復模式 repeat 等屬性，可以針對圖片與目標區域的寬高比差異制定排版模式，

FadeInImage 控制元件

在加載網路圖片的時候，為了提升用戶的等待體驗，往往會加入占位圖、加載影片等元素，但是默認的 Image.network 構造方法并不支持這些高級功能，這時候 FadeInImage 控制元件就派上用場了，

FadeInImage 控制元件提供了圖片占位的功能，并且支持在圖片加載完成時淡入淡出的視覺效果，此外，由于 Image 支持 gif 格式，甚至還可以將一些炫酷的加載影片作為占位圖，

示例代碼 - loading 的 gif 作為占位圖展示：

FadeInImage.assetNetwork(    placeholder: 'asssets/loading.gif', // gif 占位    image: 'https://xxx/xxx/xxx.jpg',    fit: BoxFit.cover, // 圖片拉伸模式    width: 200,    height: 200,);

Image 控制元件需要根據圖片資源異步加載的情況，決定自身的顯示效果，因此是一個 StatefulWidget，圖片加載程序由 ImageProvider 觸發，而 ImageProvider 表示異步獲取圖片資料的操作，可以從資源、檔案和網路等不同的渠道獲取圖片，

首先，ImageProvider 根據 _imageSate 中傳遞的圖片配置生成對應的圖片快取 key；然后，去 ImageCache 中查找是否有對應的圖片快取，如果有，則通知 _ImageState 重繪 UI；如果沒有，則啟動 ImageStream 開始異步加載，加載完畢后，更新快取；最后通知 _imageSate 重繪 UI，

值得注意的是，ImageCache 使用 LRU（Least Recently Used，最近最少使用）演算法進行快取更新策略，并且默認最多存盤 1000 張圖片，最大快取限制為 100 MB，當限定的空間已經存滿資料時，把最久沒有被訪問到的圖片清除，圖片 快取只會在運行期間生效，也就是只快取在記憶體中，如果想要支持快取到檔案系統，可以使用第三方的 CachedNetworkImage 控制元件，

按鈕

通過按鈕，可以相應用戶的互動事件，Flutter 提供了三個基本的按鈕空間，即 FloatingActionButton、FlatButton 和 RaisedButton，

• FloatingActionButton：一個圓形的按鈕，一般出現在螢屏內容的前面，用來處理界面中最常用、最基礎的用戶動作，
• RaisedButton：凸起的按鈕，默認帶有灰色背景，被點擊后灰色背景會加深，
• FlatButton：扁平化的按鈕，默認透明背景，被點擊后呈現灰色背景，

既然是按鈕，因此除了控制基本樣式之外，還需要回應用戶點擊行為，這就對應著按鈕空間中的兩個最重要的引數：

• onPressed 引數用于設定點擊回呼，告訴 Flutter 在按鈕被點擊時通知我們，如果 onPressed 引數為空，則按鈕會處于禁用狀態，不回應用戶點擊，
• child 引數用于設定按鈕的內容，告訴 Flutter 控制元件應該長成什么樣，也就是控制著按鈕控制元件的基本樣式，child 可以接收任意的 Widget，

除此之外，還可以進行樣式定制（以 FlatButton 為例）：

FlatButton(    color: Colors.yellow, // 設定背景色為黃色    shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0)), // 設定斜角矩形邊框    colorBrightness: Brightness.light, // 確保文字按鈕為深色    onPressed: () => print('FlatButton pressed'),    child: Row(children: <Widget>[Icon(Icons.add), Text("Add")],),);

ListView

若相關基本元素的排列布局超過螢屏顯示尺寸（即超過一屏）時，就需要引入串列控制元件來展示視圖的完整內容，并根據元素的多少進行自適應滾動展示，

這樣的需求，在 Android 中是由 ListView 或 RecyclerView 實作的，在 iOS 中是用 UITableView 實作的；而在 Flutter 中，實作這種需求的則是串列空間 ListView，

在 Flutter 中，ListView 可以沿著一個方向（垂直或水平方向）來排列其所有子 Widget，因此常用于需要展示一組連續視圖元素的場景，比如通訊錄、優惠劵、商家串列等，

ListView 提供了一個默認建構式 ListView，可以通過設定它的 children 引數，很方便地將所有的子 Widget 包含到 ListView 中，

但是，這種創建方式要求提前將所有的子 Widget 一次性創建好，而不是等到它們真正在螢屏上需要顯示時才創建，所以有一個很明顯的缺點，就是性能不好，因此，這種方式僅適用于串列中含有少量元素的場景，

ListView(    scrollDirection: Axis.horizontal, // 設定滾動方向    children: <Widget>[        // 設定 ListTile 組件的標題與圖示        ListTile(leading: Icon(Icons.map), title: Text('Map'),),        ListTile(leading: Icon(Icons.mail), title: Text('Mail'),),        ListTile(leading: Icon(Icons.message), title: Text('Message'),),    ],);

**ListView 的另外一個建構式 ListView.builder，則適用于子 Widget 比較多的場景，這個建構式有兩個關鍵引數：

• itemBuilder，是串列項的創建方法，當串列滾動到相應位置時，ListView 會呼叫該方法創建對應的子 Widget，
• itemCount，表示串列項的數量，如果為空，則表示 ListView 為無限串列，

具體用法如下，定義一個擁有 100 個串列元素的 ListView：

ListView.builder(    itemCount: 100, // 元素個數    itemExtent: 50.0, // 串列項高度    itemBuilder: (BuildContext context, int index) => ListTile(title: Text("title $index"), subtitle: Text("body $index"),),);

需要注意的是，itemExtent并不是一個必填引數，但，對于定高的串列項元素，強烈建議提前設定好這個引數的值，

因為如果這個引數為 null，ListView 會動態地根據子 Widget 創建完成的結果，決定自身的視圖高度，以及子 Widget 在 ListView 中的相對位置，在滾動發生變化而串列項又很多時，這樣的計算就會非常頻繁，

在 ListView 中，有兩種方式支持分割線：

• 一種是，在 itemBuilder 中，根據 index 的值動態創建分割線，也就是將分割線視為串列項的一部分；
• 另一種是，使用 ListView 的另一個構造方法 ListView.separated，單獨設定分割線的樣式，

總結 ListView 常見的構造方法及適用場景如下：

CustomScrollView

ListView 實作了單一視圖下可滾動 Widget 的互動模式，同時也包含了 UI 顯示相關的控制邏輯和布局模型，但是，對于某些特殊互動場景，比如多個效果聯動、嵌套滾動、精細滑動、視圖跟隨手勢操作等，還需要嵌套多個 ListView 來實作，這時，各自視圖的滾動和布局模型就是相互獨立、分離的，就很難保證整個頁面統一一致的滑動效果，

在 Flutter 中有一個專門的控制元件 CustomScrollView，用來處理多個需要自定義滾動效果的 Widget，在 CustomScrollView 中，這些彼此獨立的、可滾動的 Widget 被統稱為 Sliver，

比如，ListView 的 Sliver 實作為 SliverList，AppBar 的 Sliver 實作為 SliverAppBar，這些 Sliver 不再維護各自的滾動狀態，而是交由 CustomScrollView 統一管理，最終實作滑動效果的一致性，

可以通過一個滾動視差的例子，演示 CustomScrollView 的使用方法，

視差滾動是指讓多層背景以不同的速度移動，在形成立體滾動效果的同時，還能保證良好的視覺體驗，作為移動應用互動設計的熱點趨勢，越來越多的移動應用使用來這項技術，

以一個有著封面頭圖的串列為例，封面頭圖和串列這兩層視圖的滾動聯動起來，當用戶滾動串列時，頭圖會根據用戶的滾動手勢，進行縮小和展開，

經過分析得出，要實作這樣的需求，需要兩個 Sliver：作為頭圖的 SliverAppBar，作為串列的 SliverList，思路如下：

• 在創建 SliverAppBar 時，把 flexibleSpace 引數設定為懸浮頭圖背景，flexibleSpace 可以讓背景圖顯示在 AppBar 下方，高度和 SliverAppBar 一樣；
• 而在創建 SliverList 時，通過 SliverChildBuilderDelegate 引數實作串列項元素的創建；
• 最后，將它們一并交由 CustomScrollView 的 slivers 引數統一管理，

具體的示例代碼如下：

    CustomScrollView (      slivers: <Widget>[        SliverAppBar( // SliverAppBar 作為頭圖控制元件          title: Text('CustomScrollView Demo'), // 標題          floating: true, // 設定懸浮樣式          flexibleSpace: Image.network("https://xx.jpg", fit: BoxFit.cover,), // 設定懸浮頭圖背景          expandedHeight: 300, // 頭圖控制元件高度        ),        SliverList( // SliverList 作為串列控制元件          delegate: SliverChildBuilderDelegate(              (context, index) => ListTile(title: Text('Item #$index'),), //串列項創建方法              childCount: 100, // 串列元素個數          ),        )      ],    );

ScrollController 與 ScrollNotification

使用 ScrollController 進行滾動資訊的監聽，以及相應的滾動控制；ScrollNotifiCation 通知進行滾動事件的獲取，

在 Flutter 中，因為 Widget 并不是渲染到螢屏的最終視覺元素（RenderObject 才是），所以無法像原生的 Android 或 iOS 系統那樣，向持有的 Widget 物件獲取或者設定最終渲染相關的視覺資訊，而必須通過對應的組件控制器才能實作，

ListView 的組件控制器則是 ScrollController，我們可以通過它來獲取視圖的滾動資訊，更新視圖的滾動位置，

一般而言，獲取視圖的滾動資訊往往是為了進行界面的狀態控制，因此 ScrollController 的初始化、監聽及銷毀需要與 StatefulWidget 的狀態保持同步，

代碼示例所示，宣告一個有著 100 個元素的串列項，當滾動視圖到特定位置后，用戶可以點擊按鈕回傳串列頂部：

• 首先，在 State 的初始化方法里，創建了 ScrollController，并通過 _controller.addListener 注冊了滾動監聽方法回呼，根據當前視圖的滾動位置，判斷當前是否需要展示“Top”按鈕，
• 隨后，在視圖構建方法 build 中，將 ScrollController 物件與 ListView 進行了關聯，并且在 RaisedButton 中注冊了對應的回呼方法，可以在點擊按鈕時通過 _controller.animateTo 方法回傳串列頂部，
• 最后，在 State 的銷毀方法中，對 ScrollController 進行了資源釋放，

class _MyAppState extends State<MyApp> {  ScrollController _controller; // ListView 控制器  bool isToTop = false; // 標示目前是否需要啟用 "Top" 按鈕  @override  void initState() {    _controller = ScrollController();    _controller.addListener(() { // 為控制器注冊滾動監聽方法      if (_controller.offset > 1000) { // 如果 ListView 已經向下滾動了 1000，則啟用 Top 按鈕        setState(() {          isToTop = true;        });      }      else if (_controller.offset < 300) { // 如果 ListView 向下滾動距離不足 300，則禁用 Top 按鈕        setState(() {          isToTop = false;        });        super.initState();      }    });  }  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text("Scroll Controller Widget"),),      body: Column(        children: <Widget>[          Container(            height: 40.0,            child: RaisedButton(onPressed: (isToTop ? () {              if (isToTop) {                _controller.animateTo(.0, duration: Duration(milliseconds: 200), curve: Curves.ease);              }            } : null), child: Text("Top"),),          ),          Expanded(            child: ListView.builder(                controller: _controller, // 初始化傳入控制器                itemCount: 100, // 串列元素總和                itemBuilder: (context, index) => ListTile(title: Text("Index : $index"),) // 串列項構造方法            ),          )        ],      ),    );  }    @override  void dispose() {    _controller.dispose(); // 銷毀控制器    super.dispose();  }}

在 Flutter 中， ScroNotification 通知的獲取是通過 NotificationListener 來實作的，與 ScrollController 不同的是，NotificationListener 是一個 Widget，為了監聽滾動型別的事件，我們需要將 NotificationListener 添加為 ListView 的父容器，從而捕獲 ListView 中的通知，而這些通知，需要通過 onNotification 回呼函式實作監聽邏輯：

  Widget build(BuildContext context) {    return MaterialApp(      title: 'ScrollController Demo',      home: Scaffold(        appBar: AppBar(title: Text('ScrollController Demo')),        body: NotificationListener<ScrollNotification>(          onNotification: (scrollNotification) {            if (scrollNotification is ScrollStartNotification) { // 開始滾動                          }            else if ( scrollNotification is ScrollUpdateNotification) { // 滾動位置更新            }            else if (ScrollStartNotification is ScrollEndNotification) { // 滾動結束                          }          },             child: ListView.builder(itemBuilder: (context, index) => ListTile(title: Text("Index : $index"),));        ),                 ),            );      }

相比于 ScrollController 只能和具體的 ListView 關聯后才可以監聽到滾動資訊；通過 NotificationListener 則可以監聽其子 Widget 中的任意 ListView，不僅可以得到這些 ListView 的當前滾動位置資訊，還可以獲取當前的滾動事件資訊，

標籤：iOS

上一篇：iOS 13 presentViewController

下一篇：52個有效方法(1) - 了解Objective-C語言的起源