Flutter 基礎控制元件篇-->單選框(Switch)、核取方塊(Checkbox)

夜夕i發表於2019-10-04

本章說一下 單選框(Switch)核取方塊(Checkbox)

單選框(Switch)

因為按鈕都是有狀態的,所以在建立模板的時候,一定要建立有狀態的模板(使用快捷鍵stf建立),核取按鈕也一樣

但是這些按鈕本身不會儲存當前選擇狀態,因此它們的選中狀態都是由父元件來管理的。
但是當你點選的時候會觸發他們的onChange函式,我們可以在此函式中處理程式碼邏輯。

原始碼示例

建構函式如下:

const Switch({
	Key key,
	@required this.value,
	@required this.onChanged,
	this.activeColor,
	this.activeTrackColor,
	this.inactiveThumbColor,
	this.inactiveTrackColor,
	this.activeThumbImage,
	this.inactiveThumbImage,
	this.materialTapTargetSize,
	this.dragStartBehavior = DragStartBehavior.start,
})
複製程式碼

其中valueonChange是必選屬性

屬性解釋

value

即按鈕當前的狀態是選中還是不選中,值為true或者false

onChanged

當按鈕改變狀態時,程式碼的執行邏輯

activeColor、 activeTrackColor

這兩個屬性都是在按鈕選中狀態下顯示按鈕的顏色

activeColor顯示的是按鈕的顏色
activeTrackColor顯示的是按鈕裡面的顏色

程式碼示例:

class _CategoryPageState extends State<CategoryPage> {
  bool _switchSelected = true; //維護單選開關狀態
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Switch(
            value: _switchSelected, //當前狀態,必填
            onChanged: (value) {  //必填,改變狀態後執行的程式碼邏輯
              //重新構建頁面
              setState(() {
                _switchSelected = value;
              });
            },
            activeColor:Colors.red, //選中後按鈕的顏色,預設是藍色
            activeTrackColor:Colors.yellow, //選中後按鈕裡面的顏色
          ),
        ],
      ),
    );
  }
}
複製程式碼

執行效果:

圖片載入失敗!

inactiveThumbColor、inactiveTrackColor

表示按鈕未選中狀態下按鈕的顏色

程式碼示例:

class _CategoryPageState extends State<CategoryPage> {
  bool _switchSelected = true; //維護單選開關狀態
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Switch(
            value: _switchSelected, //當前狀態,必填
            onChanged: (value) {  //必填
              //重新構建頁面
              setState(() {
                _switchSelected = value;
              });
            },
            activeColor:Colors.red, //選中後按鈕的顏色,預設是藍色
            activeTrackColor:Colors.yellow, //選中後按鈕裡面的顏色
            inactiveThumbColor:Colors.pink, //未選中按鈕的顏色
            inactiveTrackColor:Colors.green,  ////未選中按鈕裡面的顏色
          ),
        ],
      ),
    );
  }
}
複製程式碼

執行效果:

圖片載入失敗!

activeThumbImage、inactiveThumbImage

當該開關開啟或者關閉時在該開關的大拇指上使用的影象。
如果這個開關是用switch建立的,則忽略它。

一般不使用,不做過多介紹

materialTapTargetSize

配置點選目標的最小大小,引數有paddedshrinkWrapvalue

程式碼示例:

class _CategoryPageState extends State<CategoryPage> {
  bool _switchSelected = true; //維護單選開關狀態
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Switch(
            value: _switchSelected, //當前狀態,必填
            onChanged: (value) {  //必填
              //重新構建頁面
              setState(() {
                _switchSelected = value;
              });
            },
            activeColor:Colors.red, //選中後按鈕的顏色,預設是藍色
            activeTrackColor:Colors.yellow, //選中後按鈕裡面的顏色
            inactiveThumbColor:Colors.pink, //未選中按鈕的顏色
            inactiveTrackColor:Colors.green,  ////未選中按鈕裡面的顏色
            materialTapTargetSize:MaterialTapTargetSize.shrinkWrap, //配置點選目標的最小大小,引數有padded和shrinkWrap
            // activeThumbImage 當該開關開啟時在該開關的大拇指上使用的影象。如果這個開關是用[switch .adaptive]建立的,則忽略它。
          ),
        ],
      ),
    );
  }
}
複製程式碼

執行效果:

圖片載入失敗!

核取方塊(Checkbox)

和單選框一樣,也需要建立有狀態的模板(用stf快捷鍵建立)

原始碼示例

建構函式如下:

const Checkbox({
	Key key,
	@required this.value,
	this.tristate = false,
	@required this.onChanged,
	this.activeColor,
	this.checkColor,
	this.materialTapTargetSize,
})
複製程式碼

和單選框一樣valueonChange都是必選的屬性

屬性解釋

有些屬性和單選框一樣,所以就不贅述了,給個例子:

class _CategoryPageState extends State<CategoryPage> {
  bool _checkboxSelected = true; //維護核取方塊狀態
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Checkbox(
            value: _checkboxSelected,
            activeColor: Colors.red, //選中時的顏色
            checkColor:Colors.green,  //選中時裡面對號的顏色
            onChanged: (value) {
              setState(() {
                _checkboxSelected = value;
              });
            },
          )
        ],
      ),
    );
  }
}
複製程式碼

執行效果:

圖片載入失敗!

tristate

這個屬性表示是否為三態,其預設值為false ,這時Checkbox有兩種狀態即“選中”和“不選中”,對應的value值為true和false 。如果tristate值為true時,value的值會增加一個狀態null

總述:
通過SwitchCheckbox可以看到,雖然它們本身是與狀態(是否選中)關聯的,但它們卻不是自己來維護狀態,而是需要父元件來管理狀態。可以在父元件中定義方法,來處理選中與未選中執行的程式碼邏輯


G_G

相關文章