Flutter 129: 圖解 ToggleButtons 按鈕切換容器組

    小菜前兩天剛學習了 ButtonBar 按鈕容器，今天順便學習一下 ToggleButtons 按鈕切換容器組，其切換效果可以應用在日常 TabBar 切換位置；

ToggleButtons

源碼分析

const ToggleButtons({
    Key key,
    @required this.children,
    @required this.isSelected,
    this.onPressed,             // 點擊狀態
    this.mouseCursor,
    this.textStyle,             // 文本樣式
    this.constraints,           // 寬高最大最小限制
    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,           // 邊框寬度
})

    簡單分析源碼可得，ToggleButtons 是一組水平方向切換按鈕容器組，其子 Widgets 是通過 Row 進行排列的；children 和 isSelected 是必備屬性，兩者數組長度要一致；

案例嘗試

1. children & isSelected

    children 的按鈕狀態由 isSelected 對應選中和未選中狀態；兩個數組長度一致且不可爲空；

_toggleWid01(index) {
  var childList;
  if (index == 0) {
    childList = iconList;
  } else if (index == 1) {
    childList = textList;
  } else {
    childList = minxList;
  }
  return Container( height: 80.0,
      child: Center(child: ToggleButtons(children: childList, isSelected: stateList)));
}

2. color & selectedColor & disabledColor

    color 對應子 Widget 默認未選中狀態顏色；selectedColor 對應子 Widget 默認選中狀態顏色；disabledColor 對應子 Widget 默認不可選中狀態顏色；其中當不設置 onPressed 或 onPressed == null 時爲不可選中狀態；

_toggleWid02(index, isPressed) {
  return Container( height: 80.0,
      child: Center(
          child: ToggleButtons(
              children: _getChildList(index),
              isSelected: stateList,
              color: Colors.grey.withOpacity(0.4),
              selectedColor: Colors.deepOrange.withOpacity(0.4),
              disabledColor: Colors.deepPurple.withOpacity(0.4),
              onPressed: isPressed
                  ? (selectedIndex) => setState(() => stateList[selectedIndex] = !stateList[selectedIndex])
                  : null)));
}

3. fillColor & highlightColor & splashColor

    fillColor 對應子 Widget 默認填充顏色；highlightColor 對應子 Widget 在手勢操作下，選中時的高亮顏色；splashColor 對應子 Widget 在點擊過程中的水波紋顏色；

_toggleWid03(index, isPressed) {
  return Container( height: 80.0,
      child: Center(
          child: ToggleButtons(
              children: _getChildList(index),
              isSelected: stateList,
              fillColor: Colors.grey.withOpacity(0.4),
              highlightColor: Colors.deepOrange.withOpacity(0.4),
              splashColor: Colors.deepPurple.withOpacity(0.4),
              onPressed: isPressed
                  ? (selectedIndex) => setState(() => stateList[selectedIndex] = !stateList[selectedIndex])
                  : null)));
}

4. borderColor & selectedBorderColor & disabledBorderColor

    borderColor 對應子 Widget 未選中時邊框顏色；selectedBorderColor 對應子 Widget 選中時邊框顏色；disabledBorderColor 對應不可選擇時邊框顏色；

_toggleWid04(index, isPressed) {
  return Container( height: 80.0,
      child: Center(
          child: ToggleButtons(
              children: _getChildList(index),
              isSelected: stateList,
              borderColor: Colors.blue.withOpacity(0.4),
              selectedBorderColor: Colors.deepOrange.withOpacity(0.4),
              disabledBorderColor: Colors.deepPurple.withOpacity(0.4),
              onPressed: isPressed
                  ? (selectedIndex) => setState(() => stateList[selectedIndex] = !stateList[selectedIndex])
                  : null)));

5. borderRadius & borderWidth

    borderRadius 對應子 Widget 邊框圓角弧度；borderWidth 對應子 Widget 邊框寬度，默認是 1.0；

borderWidth: 1.0,
borderRadius: BorderRadius.all(Radius.circular(40.0)),

borderWidth: 2.0,
borderRadius: BorderRadius.only(topLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),

6. renderBorder

    renderBorder 用於是否繪製邊框，默認是 true；若爲 false 則不進行邊框繪製；

_toggleWid06(index, isPressed, isBorder) {
  return Container( height: 80.0,
      child: Center(
          child: ToggleButtons(
              children: _getChildList(index),
              isSelected: stateList,
              renderBorder: isBorder,
              borderWidth: 2.0,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
              borderColor: Colors.blue.withOpacity(0.4),
              selectedBorderColor: Colors.deepOrange.withOpacity(0.4),
              disabledBorderColor: Colors.deepPurple.withOpacity(0.4),
              onPressed: isPressed
                  ? (selectedIndex) => setState(() => stateList[selectedIndex] = !stateList[selectedIndex])
                  : null)));
}

7. constraints

    constraints 用於限制子 Widget 尺寸，採用 BoxConstraints 限制子 Widget 的最大最小尺寸，默認最小爲 48.0；

_toggleWid07(size) {
  return Container(child: Center(
      child: ToggleButtons(
          children: [
            Image(image: AssetImage('images/icon_hzw01.jpg'), fit: BoxFit.cover, width: size, height: size),
            Image(image: AssetImage('images/icon_hzw02.jpg'), fit: BoxFit.cover, width: size, height: size),
            Image(image: AssetImage('images/icon_hzw03.jpg'), fit: BoxFit.cover, width: size, height: size)
          ],
          isSelected: stateList,
          borderRadius: BorderRadius.only(topLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
          constraints: BoxConstraints(minWidth: 70.0, minHeight: 70.0),
          borderWidth: 2.0,
          onPressed: (selectedIndex) => setState(() => stateList[selectedIndex] = !stateList[selectedIndex]))));

8. focusNodes

    focusNodes 用於接受對應於每個切換按鈕的 FocusNode 列表，焦點用於確定鍵盤事件應該影響哪個子 Widget，若設置 focusNodes，其數組長度應與子 Widgets 長度一致；常用於外部設備操作；

focusWid() {
  return Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
    RaisedButton(
        child: Text('Previous'),
        onPressed: () {
          if (_index > iconList.length || _index <= 0) {
            _index = 0;
          } else {
            _index -= 1;
          }
          _requestFocus();
        }),
    SizedBox(width: 20),
    RaisedButton(
        child: Text('Next'),
        onPressed: () {
          if (_index >= iconList.length || _index < 0) {
            _index = iconList.length - 1;
          } else {
            _index += 1;
          }
          _requestFocus();
        })
  ]);
}

---

    ToggleButtons 案例源碼

---

    ToggleButtons 的使用非常便捷，小菜主要是想學習 ToggleButtons 整體的思路，包括設置圓角或邊框等，內部 Widget 也對應裁切等，有助於自定義 Widget；如有錯誤，請多多指導！

來源： 阿策小和尚