flutter Radio 單選框

Radio 單選框

目前在西瓜視訊上免費刊登 Flutter 系列教程，每日更新，歡迎關注接收提醒

【x1】點選檢視提示

【x2】各種系列的教程

【x3】Flutter文章積累目錄

1 flutter單選框Radio的基本使用

///單選框的基本使用
  ///預設選中的單選框的值
  int groupValue = 0;
  Radio buildRadioUseWidget() {
    return Radio(
      ///此單選框綁定的值 必選參數
      value: 0,
      ///目前組中這標明的值  必選參數
      groupValue: groupValue,
      ///點選狀态改變時的回調 必選參數
      onChanged: (v) {
        setState(() {
          this.groupValue = v;
        });
      },
    );
  }
           

運作效果如下圖所示

在實際項目開發中，一般單選框都會成組使用，不會單獨使用，如下圖所示效果：

代碼如下：

///預設選中的單選框的值
  int groupValue = 0;
  ///單選框的成組使用
  Row buildRadioGroupWidget() {
    return Row(children: [
      Radio(
        ///此單選框綁定的值 必選參數
        value: 0,
        ///目前組中這標明的值  必選參數
        groupValue: groupValue,
        ///點選狀态改變時的回調 必選參數
        onChanged: (v) {
          setState(() {
            this.groupValue = v;
          });
        },
      ),
      Radio(
        ///此單選框綁定的值 必選參數
        value: 1,
        ///目前組中這標明的值  必選參數
        groupValue: groupValue,
        ///點選狀态改變時的回調 必選參數
        onChanged: (v) {
          setState(() {
            this.groupValue = v;
          });
        },
      ),
      Radio(
        ///此單選框綁定的值 必選參數
        value: 2,
        ///目前組中這標明的值  必選參數
        groupValue: groupValue,
        ///點選狀态改變時的回調 必選參數
        onChanged: (v) {
          setState(() {
            this.groupValue = v;
          });
        },
      )
    ],);
  }
           

如下圖所示效果，是在實際項目中也比較常用的一種設計效果，單選框與文字結合使用，在水準方向通過結合Row來實作

///預設選中的單選框的值
int groupValue = 0;
///單選框的成組使用
Row buildRadioGroupRowWidget() {
  return Row(
    children: [
      Row(
        ///包裹子布局
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            ///此單選框綁定的值 必選參數
            value: 0,
            ///目前組中這標明的值  必選參數
            groupValue: groupValue,
            ///點選狀态改變時的回調 必選參數
            onChanged: (v) {
              setState(() {
                this.groupValue = v;
              });
            },
          ),
          Text("國文")
        ],
      ),
      Row(
        ///包裹子布局
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            ///此單選框綁定的值 必選參數
            value: 1,
            ///目前組中這標明的值  必選參數
            groupValue: groupValue,
            ///點選狀态改變時的回調 必選參數
            onChanged: (v) {
              setState(() {
                this.groupValue = v;
              });
            },
          ),
          Text("數學")
        ],
      ),
      Row(
        ///包裹子布局
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            ///此單選框綁定的值 必選參數
            value: 2,
            ///目前組中這標明的值  必選參數
            groupValue: groupValue,
            ///點選狀态改變時的回調 必選參數
            onChanged: (v) {
              setState(() {
                this.groupValue = v;
              });
            },
          ),
          Text("英語")
        ],
      ),
    ],
  );
}

           

在這裡需要注意的是水準線性布局Row預設的填充父布局的，用在這裡的話，需要将其設定為包裹子布局的方式，通過配置mainAxisSize的值為MainAxisSize.min來實作。

在上圖的效果基礎上進行一些改造，将單選框Radio與文字的排列方式使用線性布局Column來元件，實作的效果如下圖所示，對應的關鍵代碼如下：

代碼如下：

///單選框的成組使用
///預設選中的單選框的值
int groupValue = 0;
  Row buildRadioGroupColumnWidget() {
    return Row(
      children: [
        Column(
          ///包裹子布局
          mainAxisSize: MainAxisSize.min,
          children: [
            Radio(
              ///此單選框綁定的值 必選參數
              value: 0,
              ///目前組中這標明的值  必選參數
              groupValue: groupValue,
              ///點選狀态改變時的回調 必選參數
              onChanged: (v) {
                setState(() {
                  this.groupValue = v;
                });
              },
            ),
            Text("國文")
          ],
        ),
        Column(
          ///包裹子布局
          mainAxisSize: MainAxisSize.min,
          children: [... ... 省略 ],
        ),
        Column(
          ///包裹子布局
          mainAxisSize: MainAxisSize.min,
          children: [... ... 省略 ],
        ),
      ],
    );
  }

           

目前在西瓜視訊上免費刊登 Flutter 系列教程，每日更新，歡迎關注接收提醒