## 單選開關和復選框
Material widgets庫中提供了Material風格的單選開關Switch和復選框Checkbox,它們都是繼承自StatelessWidget,所以它們本身不會保存當前選擇狀態,所以一般都是在父widget中管理選中狀態。當用戶點擊Switch或Checkbox時,它們會觸發onChanged回調,我們可以在此回調中處理選中狀態改變邏輯。我們看一個簡單的示例:
```
class SwitchAndCheckBoxTestRoute extends StatefulWidget {
@override
_SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
}
class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
bool _switchSelected=true; //維護單選開關狀態
bool _checkboxSelected=true;//維護復選框狀態
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Switch(
value: _switchSelected,//當前狀態
onChanged:(value){
//重新構建頁面
setState(() {
_switchSelected=value;
});
},
),
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, //選中時的顏色
onChanged:(value){
setState(() {
_checkboxSelected=value;
});
} ,
)
],
);
}
}
```
上面代碼中,由于要維護Switch和Checkbox狀態,所以SwitchAndCheckBoxTestRoute繼承自StatefulWidget 。在其build方法中分別構建了一個Switch和Checkbox,初始狀態都為選中狀態,當用戶點擊時,會將狀態置反,然后回調用`setState()`通知framework重新構建UI。
### 屬性及外觀
Switch和Checkbox屬性比較簡單,讀者可以查看API文檔,它們都有一個activeColor屬性,用于設置激活態的顏色。至于大小,到目前為止,Checkbox的大小是固定的,無法自定義,而Switch只能定義寬度,高度也是固定的。值得一提的是Checkbox有一個屬性`tristate` ,表示是否為三態,其默認值為`false` ,這時Checkbox有兩種狀態即“選中”和“不選中”,對應的value值為`true`和`false` ;如果其值為`true`時,value的值會增加一個狀態`null`,讀者可以自行了解。
### 總結
通過Switch和Checkbox我們可以看到,雖然它們本身是與狀態(是否選中)關聯的,但它們卻不是自己來維護狀態,而是需要父widget來管理狀態,然后當用戶點擊時,再通過事件通知給父widget,這樣是合理的,因為Switch和Checkbox是否選中本就和用戶數據關聯,而這些用戶數據也不可能是它們的私有狀態。我們在自定義widget時也應該思考一下哪種狀態的管理方式最為合理。
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示