Flutter之CupertinoSwitch和Switch开关组件的简单使用

摘要:
此博客文章没有技术内容。它简单介绍了Cupertino Switch组件的用法。所以它的用法非常简单:bool_switchValue=false;@overrideWidgetbuild{returnCupertinoSwitch;}12345678910111213如果您希望CupertinoSwitch不可更改,请将上面的onChanged设置为null,即@overrideWidgetbuild{returnCupertino Switch;}12345678此外,此组件在ListView项中使用也非常简单。强度代码如下:ListTile(///ListTile是FlutterListView项组件标题:Text('SupertinoSwitch嵌入ListViewitem'),跟踪:CupertinoSwitch(value:_switchValue,onChanged:(boolean){setState((){_switchValue=value;});},),OnTap:(){///单击项目并切换Cupertino switch setState((){_switchValue=!

本片博文没啥技术含量,就是简单的介绍一下CupertinoSwitch组件的使用方式。先来看看具体的运行效果:
单从运行效果来看我们可以知道:
1、CupertinoSwitch可以自主设置打开状态的颜色,比如上图中的绿色和蓝色
2、可以控制 开关是否能用

下面来看看具体的设置,CupertinoSwitch有三个属性:
value:布尔类型的值,true表示打开开关,false表示关闭开关
activeColor:Color类型,设置打开时的颜色,比如上图的绿色和蓝色。关于Flutter Color的详细说明,可以参考博主的这篇博客,其中activitColor默认是绿色的,可以根据自己的需要来设定所需颜色
onChanged:函数类型,用来控制开关的关闭和打开,当onChanged函数传null值的时候就是禁止改变CupertinoSwitch的开闭状态。

所以其使用还是很简单的:

bool _switchValue = false;
@override
Widget build(BuildContext context) {
return CupertinoSwitch(
value: _switchValue,

onChanged: (bool value) {///点击切换开关的状态
setState(() {
_switchValue = value;
});
}///end onChanged
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
如果想要CupertinoSwitch不可改变状态的话,则把上面的onChanged设置为null即可,即:

@override
Widget build(BuildContext context) {
return CupertinoSwitch(
value: true,///默认打开且禁止关闭
activeColor: Colors.blue,///自定义颜色为蓝色
onChanged: null
);
}
1
2
3
4
5
6
7
8
另外这个组件用到ListView的item中也很简单,实力代码如下:

ListTile(///ListTile是Flutter ListView的item组件
title: Text('ListView item 中嵌入CupertinoSwitch'),
trailing: CupertinoSwitch(
value: _switchValue,
onChanged: (bool value) {
setState(() { _switchValue = value; });
},
),
onTap: () {///点击item,同时切换CupertinoSwitch的开关状态
setState(() { _switchValue = !_switchValue; });
},
);
1
2
3
4
5
6
7
8
9
10
11
12
当然Flutter还提供了一个Switch组件,这个组件提供了除了提供了上述CupertinoSwitch一样的功能之外,还提供了更丰富的细微控制,比如还提供了activeTrackColor,inactiveThumbColor,inactiveTrackColor,activeThumbImage,inactiveThumbImage等属性。
比如如果你在ListView做一个item使用的话,可以如下使用如下代码:

ListTile(///ListTile是Flutter ListView的item组件
title: Text('可以打开和关闭'),
onTap: (){
setState(() {
switchValue = !switchValue;
});
},
///使用Switch.adaptive
trailing: Switch.adaptive(
value: switchValue,
onChanged: (bool value) {
setState(() {
switchValue = value;
});
}
),
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
当然Fullter考虑的更全面,给我们提供了一个SwitchListTile配合ListView使用,简单的运行效果可以通过来图来直观的了解:

顺便附上上图的源码:

import 'package:flutter/material.dart';

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

bool switchValue = false;

class _SwitchState extends State<SwitchDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Center(child: Text("Switch的简单使用系列")),
elevation: 0.0,
),
body: ListView(
children: <Widget>[
ListTile(
///ListTile是Flutter ListView的item组件
title: Text('默认打开,且禁止关闭'),
trailing: Switch.adaptive(
value: true, activeColor: Colors.red, onChanged: null),
),
ListTile(
///ListTile是Flutter ListView的item组件
title: Text('默认关闭,且禁止打开'),
trailing: Switch.adaptive(value: false, onChanged: null),
),
ListTile(
///ListTile是Flutter ListView的item组件
title: Text('可以打开和关闭(打开设置为红色)'),
onTap: () {
setState(() {
switchValue = !switchValue;
});
},

///使用Switch.adaptive
trailing: Switch.adaptive(
value: switchValue,
activeColor: Colors.red,
onChanged: (bool value) {
setState(() {
switchValue = value;
});
}),
),
SwitchListTile(
title: Text('SwitchListTile的简单使用(默认打开蓝色)'),
value: switchValue,
onChanged: (bool value) {
setState((http://www.my516.com) {
switchValue = value;
});
})
],
));


}
}

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
本篇博文到此结束,这两个组件使用起来也很简单,就不在多做说明。
---------------------

免责声明:文章转载自《Flutter之CupertinoSwitch和Switch开关组件的简单使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇canvas动画—圆形扩散、运动轨迹在ros中集成Fast-rtps库并运行hello world 程序下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

flutter ListView就像iOS的tableview,安卓就是Listview GridView Widget相当于iOS的collectionview 和点击事件

import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( title: 'Flutter gesture', home: LearnListView(), )); } class LearnListView extends Stateful...

flutter vscode 安卓打包apk文件

配置 VSCode默认是没有使用密钥签名的,往往我们在正式项目中是需要签名的。那就创建好了。。。所以需要自己创建并使用密钥签名 步骤一 创建密钥库 执行以下命令: keytool -genkey -v -keystore F:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 这句命令...

十二、数据绑定——listview

第一种 方法一 第一步:在XAML文件中 <ListView x:Name="lv1" HorizontalAlignment="Left" Margin="102,240,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.498,-1.5"><ListView.ItemTempl...

ListView技巧

1)复用convertViewListView在需要显示Item的时候,会首先检查回收站里是否有缓存的item,如果发现有缓存的item,ListView会直接复用它,把它作为参数传递给Adapter的getView方法,参数名为convertView。所以如果convertView不为空,表明回收站中存在可以复用的Item,就不需要在创建新的Item了。...

vb listview 的常用操作

常用操作:获取当前行数和列数: MsgBox "行数:" & ListView1.ListItems.Count & "列数:" &ListView1.ColumnHeaders.CountPrivate Sub ListView1_MouseMove(Button As Integer, Shift As Integer, x A...

客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析

原生开发应用开发 Microsoft阵营的 Winform WinForm是·Net开发平台中对Windows Form的一种称谓。 如果你想深入的美化UI,需要耗费很大的力气,对于目前主流的CSS样式表来讲,美化Winform的界面以及自定义控件是需要耗费更多的时间的。 WPF 基于XML+C#+CSS的呈现方式让它在UI上有了更加灵活的设计宽度 WPF...