【Flutter 專題】129 圖解 ToggleButtons 按鈕切換容器組

阿策小和尚發表於2021-07-01

    小菜前兩天剛學習了 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 進行排列的;childrenisSelected 是必備屬性,兩者陣列長度要一致;

案例嘗試

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 預設不可選中狀態顏色;其中當不設定 onPressedonPressed == 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;如有錯誤,請多多指導!

來源: 阿策小和尚

相關文章