Flutter | 1.9 全新元件 ToggleButtons

Flutter筆記發表於2019-09-16

Flutter元件

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

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

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

想看 GDD 第二天視訊的小夥伴看這裡！

Bilibili - 2019Google上海開發者大會 9月11日分會場4！！！！！！

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);
複製程式碼

解釋一下每個引數：

children：不多介紹了，一個 Widget 的集合
isSelected： List<bool>，每個切換按鈕相應的狀態，true 為選中，該欄位的長度必須和 children 的長度一致
onPressed：切換按鈕的點選事件，如果為 null，則該控制元件的狀態為 disable
color：Text / Icon 狀態為已啟用並且未選中時的顏色
selectedColor：不用多說，選中時的顏色
disabledColor：未啟用時的顏色
fillColor：選中按鈕的背景顏色
focusColor：當按鈕中具有輸入焦點時填充的顏色
highlightColor：點選時的顏色
hoverColor：當按鈕上有指標懸停時用於填充按鈕的顏色
splashColor：點選後的顏色
focusNodes：每一個按鈕的焦點
renderBorder：是否在每個切換按鈕周圍呈現邊框
borderColor：邊框顏色
selectedBorderColor：選中的邊框顏色
disabledBorderColor：不可用時邊框顏色
borderRadius：邊框半徑
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,
),
複製程式碼

執行效果如下：

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

新增了「onPress」方法
在「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,
),
複製程式碼

效果如下：