flutter--单选开关Switch、SwitchListTile

一、Switch

先看一下Switchconstructor

1
2
3
4
5
6
7
8
9
10
11
12
13
const Switch({
Key key,
@required bool value,
@required ValueChanged<bool> onChanged,
Color activeColor,
Color activeTrackColor,
Color inactiveThumbColor,
Color inactiveTrackColor,
ImageProvider activeThumbImage,
ImageProvider inactiveThumbImage,
MaterialTapTargetSize materialTapTargetSize,
DragStartBehavior dragStartBehavior: DragStartBehavior.start
})

怎么用看demo

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
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: SwitchDemo()
)
);
}
}

class SwitchDemo extends StatefulWidget {
@override
_SwitchDemoState createState() => new _SwitchDemoState();
}

class _SwitchDemoState extends State<SwitchDemo> {
bool _switchSelected = false;

@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Switch(
value: _switchSelected,
onChanged: (value) {
setState(() {
_switchSelected = value;
});
}
)
);
}
}

可以看见模拟器中心有个蓝色的小开关,点击可以改变状态,这是最基础的用法。
这里需要注意的是value只能是bool类型,并且写死之后点击开关是没有效果的。

activeColor & activeTrackColor & inactiveThumbColor & inactiveTrackColor

先看一下这几个颜色,active对应开关打开,也就是valuetrue的状态,inactive对应开关关闭,valuefalse的状态。

1
2
3
4
5
6
7
8
9
10
11
12
Switch(
value: _switchSelected,
activeColor: Colors.red,
activeTrackColor: Colors.yellow,
inactiveThumbColor: Colors.green,
inactiveTrackColor: Colors.purple,
onChanged: (value) {
setState(() {
_switchSelected = value;
});
}
)

image.png
image.png

activeThumbImage & inactiveThumbImage

这两个放一起,开关圆点的图片,和颜色一样active、inactive对应开关的两种状态。

1
2
3
4
5
6
7
8
9
10
Switch(
value: _switchSelected,
activeThumbImage: AssetImage('./images/logo.png'),
inactiveThumbImage: AssetImage('./images/logo.png'),
onChanged: (value) {
setState(() {
_switchSelected = value;
});
}
)

同一张图片,为啥不放两个不同的图片,因为我懒。
image.png
image.png

materialTapTargetSize

有效点击区域的大小,在按钮 各种Button介绍过

dragStartBehavior

这个需要注意一下,直接写会报错undefind,需要import 'package:flutter/gestures.dart';
看一下完整demo

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
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: SwitchDemo()
)
);
}
}

class SwitchDemo extends StatefulWidget {
@override
_SwitchDemoState createState() => new _SwitchDemoState();
}

class _SwitchDemoState extends State<SwitchDemo> {
bool _switchSelected = false;

@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Switch(
value: _switchSelected,
dragStartBehavior: DragStartBehavior.down,
onChanged: (value) {
setState(() {
_switchSelected = value;
});
}
)
);
}
}

可以设置成start或者down
源码里边对这个的解释是设置为start的时候拖拽会在开始拖动时开始触发,设置为down则在手指按下时开始触发,区别是start动画更平滑,down反应更灵敏。
试了一下,startdown并没有看出有什么区别。。。

二、SwitchListTile

先看一下constructor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Switch({
Key key,
@required bool value,
@required ValueChanged<bool> onChanged,
Color activeColor,
Color activeTrackColor,
Color inactiveThumbColor,
Color inactiveTrackColor,
ImageProvider activeThumbImage,
ImageProvider inactiveThumbImage,
Widget title,
Widget subtitle,
bool isThreeLine: false,
bool dense,
Widget secondary,
bool selected: false,
})

SwitchListTile一部分和Switch是重合的,另一部分和CheckboxList是重合的(忘了的话看这里:复选框CheckBox、CheckboxListTile
)。。。这里就不重复了。

  • © 2020-02 MonkeyInWind
  • GitHub

请我喝杯咖啡吧~