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

一、单选开关（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,
})
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 单选开关

        Switch(
          value: _switchSelected,//当前状态
          onChanged:(value){
            //重新构建页面
            setState(() {
              _switchSelected = value;
            });
          },
        ),
1
2
3
4
5
6
7
8
9

3. IOS 风格的单选开关

	CupertinoSwitch(
          value: _switchSelected,
          onChanged: (value) {},
        ),
1
2
3
4

4. SwitchListTile

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

	SwitchListTile(
            secondary: const Icon(Icons.shutter_speed),
            title: const Text('硬件加速'),
            value: _switchSelected,
            onChanged: (bool value) {
              setState(() {
                _switchSelected = !_switchSelected;
              });
            },
        ),
1
2
3
4
5
6
7
8
9
10

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;
              });
            },
        ),
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

二、单选框(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('确定'),
            ),
          ],
        )
    );

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

三、复选框(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('确定'),
            ),
          ],
        )
    );

  }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89