Flutter | 1.9 全新組件 ToggleButtons - ⎝⎛CodingNote.cc ⎞⎠

Flutter | 1.9 全新組件 ToggleButtons

2019 年 10 月 4 日
筆記

前幾天的 GDD 相信大家還記憶猶新，Flutter 官宣發布了 1.9 正式版。

隨之而來的有一些全新的組件和對於 web 的支援等等。

那我們今天就來看一下這其中的一個組件 –「ToggleButtons」。

ToggleButtons

首先按照慣例，看看官方對於這個組件是怎麼說的：

Creates a horizontal set of toggle buttons. It displays its widgets provided in a [List] of [children] horizontally. 創建一組水平的切換按鈕。它水平的顯示 children 列表中提供的小部件。

其實這段文本是在源碼中翻出來的，現在在網上搜「ToggleButtons」還是搜不出來官方文檔的。

構造函數

還是按照慣例看一下構造函數：

const ToggleButtons({    Key key,    @required this.children,    @required this.isSelected,    this.onPressed,    this.color,    this.selectedColor,    this.disabledColor,    this.fillColor,    this.focusColor,    this.highlightColor,    this.hoverColor,    this.splashColor,    this.focusNodes,    this.renderBorder = true,    this.borderColor,    this.selectedBorderColor,    this.disabledBorderColor,    this.borderRadius,    this.borderWidth,  }) :  assert(children != null),  assert(isSelected != null),  assert(children.length == isSelected.length),  super(key: key);

解釋一下每個參數：

1.children：不多介紹了，一個 Widget 的集合2.isSelected：List<bool>，每個切換按鈕相應的狀態，true 為選中，該欄位的長度必須和 children 的長度一致3.onPressed：切換按鈕的點擊事件，如果為 null，則該控制項的狀態為 disable4.color：Text / Icon 狀態為已啟用並且未選中時的顏色5.selectedColor：不用多說，選中時的顏色6.disabledColor：未啟用時的顏色7.fillColor：選中按鈕的背景顏色8.focusColor：當按鈕中具有輸入焦點時填充的顏色9.highlightColor：點擊時的顏色10.hoverColor：當按鈕上有指針懸停時用於填充按鈕的顏色11.splashColor：點擊後的顏色12.focusNodes：每一個按鈕的焦點13.renderBorder：是否在每個切換按鈕周圍呈現邊框14.borderColor：邊框顏色15.selectedBorderColor：選中的邊框顏色16.disabledBorderColor：不可用時邊框顏色17.borderRadius：邊框半徑18.borderWidth：邊框寬度

這參數太多了，但是其實也沒什麼難度。

第一個示例

在組件介紹的下面有很多的程式碼，我們一一來看。

先看第一個：

Here is an implementation that allows for multiple buttons to be simultaneously selected, while requiring none of the buttons to be selected. 這裡有一個實現，它允許同時選擇多個按鈕，而不需要選擇任何一個按鈕。

看一下程式碼：

List<bool> isSelected = [true, false, false];    ToggleButtons(    children: <Widget>[      Icon(Icons.ac_unit),      Icon(Icons.call),      Icon(Icons.cake),    ],    onPressed: (int index) {      setState(() {        isSelected[index] = !isSelected[index];      });    },    isSelected: isSelected,  ),

運行效果如下：

其中最重要的程式碼就是：

1.添加了「onPress」方法2.在「onPress」回調中刷新每一個切換按鈕的值

第二個示例

再來看第二個示例：

Here is an implementation that requires mutually exclusive selection, but allows for none of the buttons to be selected. 這是一個互斥選擇的實現，但允許一個都不選擇。

程式碼如下：

ToggleButtons(    children: <Widget>[      Icon(Icons.ac_unit),      Icon(Icons.call),      Icon(Icons.cake),    ],    onPressed: (int index) {      setState(() {        for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {          if (buttonIndex == index) {            isSelected[buttonIndex] = !isSelected[buttonIndex];          } else {            isSelected[buttonIndex] = false;          }        }      });    },    isSelected: isSelected,  ),

效果如下：

該示例展示了只能選擇一個、並且可以不選 demo，主要邏輯如下：

循環所有的切換按鈕的值，如果是當前 index，則置反，如果不是，則置為 false。

第三個示例

最後一個示例，

程式碼如下：

ToggleButtons(    children: <Widget>[      Icon(Icons.ac_unit),      Icon(Icons.call),      Icon(Icons.cake),    ],    onPressed: (int index) {      int count = 0;      isSelected.forEach((bool val) {        if (val) count++;      });        if (isSelected[index] && count < 2)        return;        setState(() {        isSelected[index] = !isSelected[index];      });    },    isSelected: isSelected,  ),

效果如下：

邏輯其實都在「onPressed」中，導致的結果不一樣。

最後

這裡我沒有改變外觀之類的，只是借用了官方的 demo，其實想改變外觀之類的，回頭看看構造函數，我想了一下，基本能用到的都提供了。