小菜前兩天剛學習了 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 整體的思路,包括設定圓角或邊框等,內部 Widget 也對應裁切等,有助於自定義 Widget;如有錯誤,請多多指導!
來源: 阿策小和尚