【Flutter 组件】005-基础组件：单选、开关和复选框

水深无声 2023-10-13 11:39 38阅读 0赞

# 【Flutter 组件】005-基础组件：单选、开关和复选框 #

### 文章目录 ###

*  【Flutter 组件】005-基础组件：单选、开关和复选框
 *  一、概述
 *  二、基本使用
 *   *  1、开关
     *   *  代码示例
         *  运行结果
     *  2、复选框
     *   *  代码示例
         *  运行结果
     *  3、多个选项单选
     *   *  代码示例
         *  运行结果
     *  4、多个选项多选
     *   *  代码示例
         *  运行结果

# 一、概述 #

Material 组件库中提供了 Material 风格的单选开关 `Switch` 和复选框 `Checkbox`，虽然它们都是继承自 `StatefulWidget`，但它们本身不会保存当前选中状态，选中状态都是由父组件来管理的。当`Switch`或`Checkbox`被点击时，会触发它们的`onChanged`回调，我们可以在此回调中处理选中状态改变逻辑。

当需要实现多个选项的单选功能时，可以使用 `Radio` 和`RadioListTile`组件。这些组件允许用户在一组选项中选择一个。

# 二、基本使用 #

## 1、开关 ##

### 代码示例 ###

### 运行结果 ###

![screenshots\_danxuankuang][screenshots_danxuankuang]

## 2、复选框 ##

### 代码示例 ###

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class HomePage extends StatefulWidget {
        
      const HomePage({
        super.key});
    
      @override
      State<HomePage> createState() => HomePageState();
    }
    
    class HomePageState extends State<HomePage> {
        
      bool _value1 = false;
      bool _value2 = false;
      bool _value3 = false;
      bool _value4 = false;
    
      @override
      Widget build(BuildContext context) {
        
        return Container(
          color: Colors.white,
          child: Column(
            children: [
              Checkbox(
                value: _value1,
                onChanged: (bool? newValue) {
        
                  setState(() {
        
                    _value1 = newValue!;
                  });
                },
              ),
              CheckboxListTile(
                title: const Text('Checkbox 2'),
                value: _value2,
                onChanged: (bool? newValue) {
        
                  setState(() {
        
                    _value2 = newValue!;
                  });
                },
              ),
              CheckboxMenuButton(
                  value: _value3,
                  onChanged: (bool? newValue) {
        
                    setState(() {
        
                      _value3 = newValue!;
                    });
                  },
                  child: const Text('Checkbox 3')),
              CupertinoCheckbox(
                value: _value4,
                onChanged: (bool? newValue) {
        
                  setState(() {
        
                    _value4 = newValue!;
                  });
                },
              ),
            ],
          ),
        );
      }
    }

### 运行结果 ###

![screenshots\_duoxuan][screenshots_duoxuan]

## 3、多个选项单选 ##

### 代码示例 ###

import 'package:flutter/material.dart';
    
    class HomePage extends StatefulWidget {
        
      const HomePage({
        super.key});
    
      @override
      State<HomePage> createState() => HomePageState();
    }
    
    class HomePageState extends State<HomePage> {
        
      String? _selectedOption;
    
      @override
      Widget build(BuildContext context) {
        
        return Container(
          color: Colors.white,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              RadioListTile<String>(
                title: const Text('Option 1'),
                value: 'Option 1',
                groupValue: _selectedOption,
                onChanged: (String? newValue) {
        
                  setState(() {
        
                    _selectedOption = newValue;
                  });
                },
              ),
              RadioListTile<String>(
                title: const Text('Option 2'),
                value: 'Option 2',
                groupValue: _selectedOption,
                onChanged: (String? newValue) {
        
                  setState(() {
        
                    _selectedOption = newValue;
                  });
                },
              ),
              RadioListTile<String>(
                title: const Text('Option 3'),
                value: 'Option 3',
                groupValue: _selectedOption,
                onChanged: (String? newValue) {
        
                  setState(() {
        
                    _selectedOption = newValue;
                  });
                },
              ),
            ],
          ),
        );
      }
    }

### 运行结果 ###

![danxuan][]

## 4、多个选项多选 ##

### 代码示例 ###

import 'package:flutter/material.dart';
    
    class HomePage extends StatefulWidget {
        
      const HomePage({
        super.key});
    
      @override
      State<HomePage> createState() => HomePageState();
    }
    
    class HomePageState extends State<HomePage> {
        
      final List<String> _selectedOptions = [];
    
      @override
      Widget build(BuildContext context) {
        
        return Container(
          color: Colors.white,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CheckboxListTile(
                title: const Text('Option 1'),
                value: _selectedOptions.contains('Option 1'),
                onChanged: (bool? value) {
        
                  setState(() {
        
                    if (value != null && value) {
        
                      _selectedOptions.add('Option 1');
                    } else {
        
                      _selectedOptions.remove('Option 1');
                    }
                  });
                },
              ),
              CheckboxListTile(
                title: const Text('Option 2'),
                value: _selectedOptions.contains('Option 2'),
                onChanged: (bool? value) {
        
                  setState(() {
        
                    if (value != null && value) {
        
                      _selectedOptions.add('Option 2');
                    } else {
        
                      _selectedOptions.remove('Option 2');
                    }
                  });
                },
              ),
              CheckboxListTile(
                title: const Text('Option 3'),
                value: _selectedOptions.contains('Option 3'),
                onChanged: (bool? value) {
        
                  setState(() {
        
                    if (value != null && value) {
        
                      _selectedOptions.add('Option 3');
                    } else {
        
                      _selectedOptions.remove('Option 3');
                    }
                  });
                },
              ),
            ],
          ),
        );
      }
    }

### 运行结果 ###

![screenshots2745634564363463][]

[screenshots_danxuankuang]: https://img-blog.csdnimg.cn/img_convert/57955344b191c5435277c07e60d5e4ae.gif
[screenshots_duoxuan]: https://img-blog.csdnimg.cn/img_convert/a950ebd7748e5a0491413092492d0840.gif
[danxuan]: https://img-blog.csdnimg.cn/img_convert/0167075a17bbb9df4d6db8b8b7e443bd.gif
[screenshots2745634564363463]: https://img-blog.csdnimg.cn/img_convert/09bf02e2078c52f256df8861030e58e1.gif