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

????小菜前兩天剛學(xué)習(xí)了 ButtonBar 按鈕容器，今天順便學(xué)習(xí)一下 ToggleButtons 按鈕切換容器組，其切換效果可以應(yīng)用在日常 TabBar 切換位置；

ToggleButtons

源碼分析

const ToggleButtons({
    Key key,
    @required this.children,
    @required this.isSelected,
    this.onPressed,             // 點(diǎn)擊狀態(tài)
    this.mouseCursor,
    this.textStyle,             // 文本樣式
    this.constraints,           // 寬高最大最小限制
    this.color,                 // 未選中顏色
    this.selectedColor,         // 選中顏色
    this.disabledColor,         // 不可選中顏色
    this.fillColor,             // 填充顏色
    this.focusColor,            // 有輸入焦點(diǎn)時(shí)顏色
    this.highlightColor,        // 選中時(shí)高亮顏色
    this.hoverColor,            // 初始水波紋顏色
    this.splashColor,           // 選中時(shí)水波紋顏色
    this.focusNodes,            // 接受對應(yīng)于每個(gè)切換按鈕焦點(diǎn)列表
    this.renderBorder = true,   // 是否繪制邊框
    this.borderColor,           // 未選中邊框顏色
    this.selectedBorderColor,   // 選中邊框顏色
    this.disabledBorderColor,   // 不可選中邊框顏色
    this.borderRadius,          // 邊框圓角弧度
    this.borderWidth,           // 邊框?qū)挾?})

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

案例嘗試

1. children & isSelected

????children 的按鈕狀態(tài)由 isSelected 對應(yīng)選中和未選中狀態(tài)；兩個(gè)數(shù)組長度一致且不可為空；

_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 對應(yīng)子 Widget 默認(rèn)未選中狀態(tài)顏色；selectedColor 對應(yīng)子 Widget 默認(rèn)選中狀態(tài)顏色；disabledColor 對應(yīng)子 Widget 默認(rèn)不可選中狀態(tài)顏色；其中當(dāng)不設(shè)置 onPressed 或 onPressed == null 時(shí)為不可選中狀態(tài)；

_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 對應(yīng)子 Widget 默認(rèn)填充顏色；highlightColor 對應(yīng)子 Widget 在手勢操作下，選中時(shí)的高亮顏色；splashColor 對應(yīng)子 Widget 在點(diǎn)擊過程中的水波紋顏色；

_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 對應(yīng)子 Widget 未選中時(shí)邊框顏色；selectedBorderColor 對應(yīng)子 Widget 選中時(shí)邊框顏色；disabledBorderColor 對應(yīng)不可選擇時(shí)邊框顏色；

_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 對應(yīng)子 Widget 邊框圓角弧度；borderWidth 對應(yīng)子 Widget 邊框?qū)挾?，默認(rèn)是 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 用于是否繪制邊框，默認(rèn)是 true；若為 false 則不進(jìn)行邊框繪制；

_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 的最大最小尺寸，默認(rèn)最小為 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 用于接受對應(yīng)于每個(gè)切換按鈕的 FocusNode 列表，焦點(diǎn)用于確定鍵盤事件應(yīng)該影響哪個(gè)子 Widget，若設(shè)置 focusNodes，其數(shù)組長度應(yīng)與子 Widgets 長度一致；常用于外部設(shè)備操作；

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 的使用非常便捷，小菜主要是想學(xué)習(xí) ToggleButtons 整體的思路，包括設(shè)置圓角或邊框等，內(nèi)部 Widget 也對應(yīng)裁切等，有助于自定義 Widget；如有錯(cuò)誤，請多多指導(dǎo)！

來源： 阿策小和尚

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容