Flutter -- 基础组件单选开关（Switch）& 单选框(Radio) & 复选框(Checkbox)

Posted 2022-07-28 Kevin-Dev

文章目录

• • 一、单选开关（Switch）
  • • 1. 属性
    • 2. 单选开关
    • 3. IOS 风格的单选开关
    • 4. SwitchListTile
    • 5. 完整代码
  • 二、单选框(Radio)
  • • 1. 效果图
    • 2. 完整代码
  • 三、复选框(Checkbox)
  • • 1. 效果图
    • 2. 完整代码

一、单选开关（Switch）

1. 属性

const Switch(
	Key key,
	@required this.value,        // 必选属性，即按钮当前的状态是选中还是不选中，值为true 或者false
	@required this.onChanged,    // 必选属性，当按钮改变状态时，代码的执行逻辑
	this.activeColor,            // 显示的是按钮的颜色
	this.activeTrackColor,       //显示的是按钮里面的颜色
	this.inactiveThumbColor,
	this.inactiveTrackColor,
	this.activeThumbImage,
	this.inactiveThumbImage,
	this.materialTapTargetSize,
	this.dragStartBehavior = DragStartBehavior.start,
)

2. 单选开关

        Switch(
          value: _switchSelected,//当前状态
          onChanged:(value)
            //重新构建页面
            setState(() 
              _switchSelected = value;
            );
          ,
        ),

3. ios 风格的单选开关

	CupertinoSwitch(
          value: _switchSelected,
          onChanged: (value) ,
        ),

4. SwitchListTile

SwitchListTile 是将 开关 Switch 、文本 Text 、还有图标水平线性排列的便捷组件

	SwitchListTile(
            secondary: const Icon(Icons.shutter_speed),
            title: const Text('硬件加速'),
            value: _switchSelected,
            onChanged: (bool value) 
              setState(() 
                _switchSelected = !_switchSelected;
              );
            ,
        ),

5. 完整代码

1. 效果图

2. 完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Welcome to Flutter',

      home: Scaffold(
        appBar: AppBar(
          title: Text('单选开关（Switch）'),
        ),
          body: Center(
            child: SwitchStatefulWidget(),
          )
      )

    );
  


class SwitchStatefulWidget extends StatefulWidget 
  const SwitchStatefulWidget(Key? key) : super(key: key);

  @override
  State<SwitchStatefulWidget> createState() => _SwitchStatefulWidget();


class _SwitchStatefulWidget extends State<SwitchStatefulWidget> 
  bool _switchSelected=true; //维护单选开关状态

  @override
  Widget build(BuildContext context) 
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(
          "1. 单选开关",
          textScaleFactor: 1.2,
        ),

        Switch(
          value: _switchSelected,//当前状态
          onChanged:(value)
            //重新构建页面
            setState(() 
              _switchSelected = value;
            );
          ,
        ),

        Text(
          "2. IOS 风格单选开关",
          textScaleFactor: 1.2,
        ),

        CupertinoSwitch(
          value: _switchSelected,
          onChanged: (value) ,
        ),

        Text(
          "3. SwitchListTile",
          textScaleFactor: 1.2,
        ),

        SwitchListTile(
            secondary: const Icon(Icons.shutter_speed),
            title: const Text('硬件加速'),
            value: _switchSelected,
            onChanged: (bool value) 
              setState(() 
                _switchSelected = !_switchSelected;
              );
            ,
        ),
      ],
    );
  

二、单选框(Radio)

1. 效果图

2. 完整代码

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Welcome to Flutter',

      home: Scaffold(
        appBar: AppBar(
          title: Text('单选框（Radio）'),
        ),
          body: Center(
            child: RadioStatefulWidget(),
          )
      )

    );
  


class RadioStatefulWidget extends StatefulWidget 
  const RadioStatefulWidget(Key? key) : super(key: key);

  @override
  State<RadioStatefulWidget> createState() => _RadioStatefulWidget();


class _RadioStatefulWidget extends State<RadioStatefulWidget> 
  ///默认选中的单选框的值
  String _groupValue = '学科';

  @override
  Widget build(BuildContext context) 
    return Container(
        child: Column(
          children: <Widget>[
            RadioListTile<String>(
              value: '语文',
              title: Text('语文'),
              groupValue: _groupValue,
              onChanged: (value)
                setState(() 
                  _groupValue = value!;
                );
              ,
            ),

            RadioListTile<String>(
              value: '数学',
              title: Text('数学'),
              groupValue: _groupValue,
              onChanged: (value)
                setState(() 
                  _groupValue = value!;
                );
              ,
            ),

            RadioListTile<String>(
              value: '英语',
              title: Text('英语'),
              groupValue: _groupValue,
              onChanged: (value)
                setState(() 
                  _groupValue = value!;
                );
              ,
            ),

            ElevatedButton(
              onPressed: ()
                final snackBar = SnackBar(content: Text('你选择的是$_groupValue'),);
                Scaffold.of(context).showSnackBar(snackBar);
              ,
              child: Text('确定'),
            ),
          ],
        )
    );

  

三、复选框(Checkbox)

1. 效果图

2. 完整代码

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Welcome to Flutter',

      home: Scaffold(
        appBar: AppBar(
          title: Text('复选框（Checkbox）'),
        ),
          body: Center(
            child: CheckboxStatefulWidget(),
          )
      )

    );
  


class CheckboxStatefulWidget extends StatefulWidget 
  const CheckboxStatefulWidget(Key? key) : super(key: key);

  @override
  State<CheckboxStatefulWidget> createState() => _CheckboxStatefulWidget();


class _CheckboxStatefulWidget extends State<CheckboxStatefulWidget> 
  bool _value=false;
  bool _value1=false;
  bool _value2=false;

  @override
  Widget build(BuildContext context) 
    return Container(
        child: Column(
          children: <Widget>[
            CheckboxListTile(
              value: _value,
              title: Text('篮球'),
              onChanged: (value)
                setState(() 
                  _value = value!;
                );
              ,
           ),

            CheckboxListTile(
              value: _value1,
              title: Text('足球'),
              onChanged: (value)
                setState(() 
                  _value1 = value!;
                );
              ,
            ),

            CheckboxListTile(
              value: _value2,
              title: Text('网球'),
              onChanged: (value)
                setState(() 
                  _value2 = value!;
                );
              ,
            ),

            ElevatedButton(
              onPressed: ()
                final snackBar = SnackBar(content: Text('你的兴趣爱好是篮球$_value,足球$_value1,网球$_value2'),);
                Scaffold.of(context).showSnackBar(snackBar);
              ,
              child: Text('确定'),
            ),
          ],
        )
    );