【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, // 點擊狀態(tài) this.mouseCursor, this.textStyle, // 文本樣式 this.constraints, // 寬高最大最小限制 this.color, // 未選中顏色 this.selectedColor, // 選中顏色 this.disabledColor, // 不可選中顏色 this.fillColor, // 填充顏色 this.focusColor, // 有輸入焦點時顏色 this.highlightColor, // 選中時高亮顏色 this.hoverColor, // 初始水波紋顏色 this.splashColor, // 選中時水波紋顏色 this.focusNodes, // 接受對應(yīng)于每個切換按鈕焦點列表 this.renderBorder = true, // 是否繪制邊框 this.borderColor, // 未選中邊框顏色 this.selectedBorderColor, // 選中邊框顏色 this.disabledBorderColor, // 不可選中邊框顏色 this.borderRadius, // 邊框圓角弧度 this.borderWidth, // 邊框?qū)挾?})

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

案例嘗試

children 的按鈕狀態(tài)由 isSelected 對應(yīng)選中和未選中狀態(tài)；兩個數(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))); }

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 時為不可選中狀態(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))); }

fillColor 對應(yīng)子 Widget 默認(rèn)填充顏色；highlightColor 對應(yīng)子 Widget 在手勢操作下，選中時的高亮顏色；splashColor 對應(yīng)子 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))); }

borderColor 對應(yīng)子 Widget 未選中時邊框顏色；selectedBorderColor 對應(yīng)子 Widget 選中時邊框顏色；disabledBorderColor 對應(yīng)不可選擇時邊框顏色；

_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)));

borderRadius 對應(yīng)子 Widget 邊框圓角弧度；borderWidth 對應(yīng)子 Widget 邊框?qū)挾龋J(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)),

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))); }

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]))));

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

focusWid() { return Row(mainAxisAlignment: MainAxisAlignment.center, children: [ 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；如有錯誤，請多多指導(dǎo)！

來源： 阿策小和尚

flutter 容器 數(shù)據(jù)結(jié)構(gòu) 網(wǎng)站

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。