Flutter Widget之Slider

Widget:https://flutter.io/docs/development/ui/widgets
Slider:https://docs.flutter.io/flutter/material/Slider-class.html

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
90
91
92
93
94
95
96
97
98
99
100
import 'package:flutter/material.dart';

class SliderDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _SliderDemoPageState();
}
}

class _SliderDemoPageState extends State<SliderDemoPage> {
double progressValue = 0.0;

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Slider Demo'),
),
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
child: new Slider(
value: progressValue,
//实际进度的位置
inactiveColor: Colors.black12,
//进度中不活动部分的颜色
label: '$progressValue',
min: 0.0,
max: 100.0,
divisions: 1000,
activeColor: Colors.blue,
//进度中活动部分的颜色
onChangeStart: (double) {
print('onChangeStart: $double');
},
onChangeEnd: (double) {
print('onChangeEnd: $double');
},
onChanged: (double) {
setState(() {
progressValue = double.roundToDouble();
});
},
),
width: 300.0,
),
new SliderTheme(
data: SliderTheme.of(context).copyWith(
// activeTickMarkColor:Colors.yellowAccent,
activeTrackColor: Colors.yellowAccent,
//实际进度的颜色
// inactiveTickMarkColor:Colors.black
thumbColor: Colors.black,
//滑块中心的颜色
inactiveTrackColor: Colors.red,
//默认进度条的颜色
valueIndicatorColor: Colors.blue,
//提示进度的气派的背景色
valueIndicatorTextStyle: new TextStyle(
//提示气泡里面文字的样式
color: Colors.white,
),
inactiveTickMarkColor: Colors.blue,
//divisions对进度线分割后 断续线中间间隔的颜色
overlayColor: Colors.pink, //滑块边缘颜色
),
child: new Container(
width: 360.0,
alignment: Alignment.center,
margin: EdgeInsets.fromLTRB(10.0, 50.0, 0.0, 0.0),
child: new Row(
children: <Widget>[
new Text('0.0'),
new Expanded(
flex: 1,
child: new Slider(
value: progressValue,
label: '$progressValue',
divisions: 10,
onChanged: (double) {
setState(() {
progressValue = double.floorToDouble(); //转化成double
});
},
min: 0.0,
max: 100.0,
),
),
new Text('100.0'),
],
),
),
),
],
),
);
}
}

Flutter Widget Slider

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :