Flutter 之 CheckboxListTile、SwitchListTile、RadioListTile （101）

1. CheckboxListTile

  const CheckboxListTile({
    Key? key,
    required this.value,
    required this.onChanged,
    this.activeColor,
    this.checkColor,
    this.tileColor,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.secondary,
    this.selected = false,
    this.controlAffinity = ListTileControlAffinity.platform,
    this.autofocus = false,
    this.contentPadding,
    this.tristate = false,
    this.shape,
    this.selectedTileColor,
    this.side,
    this.visualDensity,
    this.focusNode,
    this.enableFeedback,
  })
CheckboxListTile 属性 介绍
value 是否选中此复选框
activeColor 选中时颜色
checkColor 选中时中间✔️颜色
tileColor Tile 未选中时 颜色
title Title 组件
subtitle Subtitle 组件
isThreeLine 是否准备显示3行，默认false
dense 是否使用缩小布局
secondary 辅助组件
selected Tile是否选中
autofocus 自动聚焦，默认为 false
controlAffinity checkBox组件 布局位置platform、leading、trailing
contentPadding 内边距
tristate 三态复选框，默认 false
shape 形状
selectedTileColor Tile选中颜色
visualDensity 紧凑程度，VisualDensity -4～4
focusNode 焦点控制 Flutter 之 FocusNode （七十三）
enableFeedback 是否给予按压反馈
side CheckBox 边框
onChanged 点击事件回调

示例


  _buildCheckBoxListTile(BuildContext context) {
    return CheckboxListTile(
      value: _checkBoxValue1, // 是否选中此复选框
      activeColor: Colors.red, // 选中时颜色
      checkColor: Colors.amber, // 选中时中间✔️颜色
      tileColor: Colors.cyan[50], // Tile 未选中时 颜色
      title: Text("CheckboxListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("CheckboxListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      isThreeLine: false, // 是否准备显示3行，默认false
      dense: true, // 是否使用缩小布局
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _checkBoxValue1 == true, //  Tile是否选中
      autofocus: false, // 自动聚焦，默认为 false
      controlAffinity: ListTileControlAffinity.platform, // checkBox组件 布局位置,platform 根据平台来决定布局位置，leading在左侧布局，trailing在右侧布局
      contentPadding: EdgeInsets.all(8), // 内边距
      tristate: false, // 三态复选框，默认 false
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      side: BorderSide(color: Colors.teal, width: 2.0), // CheckBox 边框
      // 点击事件回调
      onChanged: (value) {
        _checkBoxValue1 = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }

2. SwitchListTile

  const SwitchListTile({
    Key? key,
    required this.value,
    required this.onChanged,
    this.tileColor,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.inactiveThumbImage,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.contentPadding,
    this.secondary,
    this.selected = false,
    this.autofocus = false,
    this.controlAffinity = ListTileControlAffinity.platform,
    this.shape,
    this.selectedTileColor,
    this.visualDensity,
    this.focusNode,
    this.enableFeedback,
    this.hoverColor,
  })
SwitchListTile 属性 介绍
value value = true 时为打开状态，false 关闭
tileColor Tile未选中颜色
activeColor 打开状态下颜色
activeTrackColor 打开状态下轨道颜色
activeThumbImage 打开状态下滑块图片
inactiveThumbColor 关闭状态下滑块颜色
inactiveTrackColor 关闭状态下轨道颜色
inactiveThumbImage 关闭状态下滑块图片
title Title 组件
subtitle Subtitle 组件
isThreeLine 是否准备显示3行，默认false
dense 是否使用缩小布局
contentPadding 内边距
secondary 辅助组件
selected Tile是否选中
autofocus 自动聚焦，默认为 false
controlAffinity switch组件 布局位置
shape 形状
selectedTileColor Tile选中颜色
visualDensity 紧凑程度，VisualDensity -4～4
focusNode 焦点控制 Flutter 之 FocusNode （七十三）
enableFeedback 是否给予按压反馈
hoverColor 悬停颜色 暂未使用
onChanged 点击事件 回调

示例


  _buildSwitchListTile(BuildContext context) {
    return SwitchListTile(
      value: _switchValue1, // value = true 时为打开状态，false 关闭
      tileColor: Colors.cyan[50], // Tile未选中颜色
      activeColor: Colors.red, // 打开状态下颜色
      activeTrackColor: Colors.amber, // 打开状态下轨道颜色
      activeThumbImage: AssetImage("assets/images/tx1.jpeg"), // 打开状态下滑块图片
      inactiveThumbColor: Colors.grey, // 关闭状态下滑块颜色
      inactiveTrackColor: Colors.red[200], // 关闭状态下轨道颜色
      inactiveThumbImage: AssetImage("assets/images/tx2.jpeg"), // 关闭状态下滑块图片
      title: Text("SwitchListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("SwitchListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      isThreeLine: false, // 是否准备显示3行，默认false
      dense: true, // 是否使用缩小布局
      contentPadding: EdgeInsets.all(8), // 内边距
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _switchValue1, //  Tile是否选中
      autofocus: false, // 自动聚焦，默认为 false
      controlAffinity: ListTileControlAffinity.platform, // switch组件 布局位置
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      hoverColor: Colors.red, // 悬停颜色 暂未使用
      // 点击事件 回调
      onChanged: (value) {
        _switchValue1 = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }

3. RadioListTile

  const RadioListTile({
    Key? key,
    required this.value,
    required this.groupValue,
    required this.onChanged,
    this.toggleable = false,
    this.activeColor,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.secondary,
    this.selected = false,
    this.controlAffinity = ListTileControlAffinity.platform,
    this.autofocus = false,
    this.contentPadding,
    this.shape,
    this.tileColor,
    this.selectedTileColor,
    this.visualDensity,
    this.focusNode,
    this.enableFeedback,
  })
RadioListTile 属性 介绍
value 单选的值
groupValue 选择组的值
toggleable 是否可返回不确定状态，默认false，为true时，再次选中时onChanged返回null
activeColor 选中时填充颜色
title Title 组件
subtitle Subtitle 组件
dense 是否使用缩小布局
isThreeLine 是否准备显示3行，默认false
secondary 辅助组件
selected Tile 是否选中
controlAffinity radio组件布局位置
contentPadding 内边距
shape 形状
tileColor Tile未选中颜色
selectedTileColor Tile选中颜色
visualDensity 紧凑程度，VisualDensity -4～4
focusNode 焦点控制 Flutter 之 FocusNode （七十三）
enableFeedback 是否给予按压反馈
onChanged 点击事件回调

示例


  _buildRadioListTile(int initValue, BuildContext context) {
    return RadioListTile(
      value: initValue, // 单选的值
      groupValue: _radioGroupValue, // 选择组的值
      toggleable: true, // 是否可返回不确定状态，默认false，为true时，再次选中时onChanged返回null
      activeColor: Colors.red[500], // 选中时填充颜色
      title: Text("RadioListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("RadioListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      dense: true, // 是否使用缩小布局
      isThreeLine: false, // 是否准备显示3行，默认false
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _radioGroupValue == initValue, // Tile 是否选中
      controlAffinity: ListTileControlAffinity.platform, // radio组件布局位置
      contentPadding: EdgeInsets.all(8), // 内边距
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), //  形状
      tileColor: Colors.cyan[50], // Tile未选中颜色
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(
          horizontal: -4, vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      // 点击事件回调
      onChanged: (int? value) {
        _radioGroupValue = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }

4. Demo


class MSListTileRoute extends StatelessWidget {
  MSListTileRoute({Key? key}) : super(key: key);
  bool? _checkBoxValue1 = false;
  bool _switchValue1 = false;
  int? _radioGroupValue = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MSListTileRoute")),
      body: ListView(
        children: [
          Builder(builder: (context) {
            return _buildCheckBoxListTile(context);
          }),
          Builder(builder: (context) {
            return _buildSwitchListTile(context);
          }),
          Builder(builder: (context) {
            return Column(
              children: [
                _buildRadioListTile(1, context),
                _buildRadioListTile(2, context),
                _buildRadioListTile(3, context),
              ],
            );
          }),
        ],
      ),
    );
  }

  _buildRadioListTile(int initValue, BuildContext context) {
    return RadioListTile(
      value: initValue, // 单选的值
      groupValue: _radioGroupValue, // 选择组的值
      toggleable: true, // 是否可返回不确定状态，默认false，为true时，再次选中时onChanged返回null
      activeColor: Colors.red[500], // 选中时填充颜色
      title: Text("RadioListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("RadioListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      dense: true, // 是否使用缩小布局
      isThreeLine: false, // 是否准备显示3行，默认false
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _radioGroupValue == initValue, // Tile 是否选中
      controlAffinity: ListTileControlAffinity.platform, // radio组件布局位置
      contentPadding: EdgeInsets.all(8), // 内边距
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), //  形状
      tileColor: Colors.cyan[50], // Tile未选中颜色
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(
          horizontal: -4, vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      // 点击事件回调
      onChanged: (int? value) {
        _radioGroupValue = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }

  _buildSwitchListTile(BuildContext context) {
    return SwitchListTile(
      value: _switchValue1, // value = true 时为打开状态，false 关闭
      tileColor: Colors.cyan[50], // Tile未选中颜色
      activeColor: Colors.red, // 打开状态下颜色
      activeTrackColor: Colors.amber, // 打开状态下轨道颜色
      activeThumbImage: AssetImage("assets/images/tx1.jpeg"), // 打开状态下滑块图片
      inactiveThumbColor: Colors.grey, // 关闭状态下滑块颜色
      inactiveTrackColor: Colors.red[200], // 关闭状态下轨道颜色
      inactiveThumbImage: AssetImage("assets/images/tx2.jpeg"), // 关闭状态下滑块图片
      title: Text("SwitchListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("SwitchListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      isThreeLine: false, // 是否准备显示3行，默认false
      dense: true, // 是否使用缩小布局
      contentPadding: EdgeInsets.all(8), // 内边距
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _switchValue1, //  Tile是否选中
      autofocus: false, // 自动聚焦，默认为 false
      controlAffinity: ListTileControlAffinity.platform, // switch组件 布局位置
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      hoverColor: Colors.red, // 悬停颜色 暂未使用
      // 点击事件 回调
      onChanged: (value) {
        _switchValue1 = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }

  _buildCheckBoxListTile(BuildContext context) {
    return CheckboxListTile(
      value: _checkBoxValue1, // 是否选中此复选框
      activeColor: Colors.red, // 选中时颜色
      checkColor: Colors.amber, // 选中时中间✔️颜色
      tileColor: Colors.cyan[50], // Tile 未选中时 颜色
      title: Text("CheckboxListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("CheckboxListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      isThreeLine: false, // 是否准备显示3行，默认false
      dense: true, // 是否使用缩小布局
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _checkBoxValue1 == true, //  Tile是否选中
      autofocus: false, // 自动聚焦，默认为 false
      controlAffinity: ListTileControlAffinity.platform, // checkBox组件 布局位置
      contentPadding: EdgeInsets.all(8), // 内边距
      tristate: false, // 三态复选框，默认 false
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      side: BorderSide(color: Colors.teal, width: 2.0), // CheckBox 边框
      // 点击事件回调
      onChanged: (value) {
        _checkBoxValue1 = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }
}
133.gif

Flutter 之 单选开关和复选框 （五十七）
Flutter 之 Radio （六十）
Flutter 之 ListTite (九十)
Flutter 之 FocusNode （七十三）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容