创建网站要钱吗,企业qq购买平台,苏州网推广网站建设,wordpress下载效果文章目录 1 概念介绍2 使用方法3 示例代码 我们在上一章回中介绍了PageView这个Widget,本章回中将介绍Switch Widget.闲话休提#xff0c;让我们一起Talk Flutter吧。 1 概念介绍
我们在这里介绍的Switch是指左右滑动的开关#xff0c;常用来表示某项设置是打开还是关闭。Fl… 文章目录 1 概念介绍2 使用方法3 示例代码 我们在上一章回中介绍了PageView这个Widget,本章回中将介绍Switch Widget.闲话休提让我们一起Talk Flutter吧。 1 概念介绍
我们在这里介绍的Switch是指左右滑动的开关常用来表示某项设置是打开还是关闭。Flutter中使用Switch类表示该Widget。本章回中将详细介绍它的用法。
2 使用方法
和其它和Widget一样Switch提供了一些属性来控制自己接下来我们将介绍这些常用的属性
value属性该属性表示开关的状态它有两个值true和false分别表示Switch打开和关闭onChanged属性该属性是一个方法当开关的状态发生变化时回调它从方法的参数中可以得到开关的状态activeColor属性该属性表示开关打开时的颜色如果不设置默认为绿色inactiveThumbColor属性该属性表示开关关闭时图片的颜色如果不指定默认为灰色inactiveTrackColor属性该属性表示开关关闭时轨道的颜色如果不指定默认为灰色 注意开关打开时的颜色通过一个属性可以控制关闭时的颜色通过两个属性来控制。我们在这里说的图片是指开关上的小圆形该图片可以通过相关的属性来修改。轨道 是指开关滑动时的轨迹。上面介绍的属性中前两个是必选属性其它属性是可选属性
3 示例代码
Widget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.purpleAccent,title: const Text(Example of Switch Widget),),body: Container(color: Colors.lightBlue,alignment: Alignment.center,width: 92,height: 92,child: Switch(//开关打开时的颜色activeColor: Colors.purpleAccent,//开关没有打开时的颜色inactiveThumbColor: Colors.yellow,inactiveTrackColor: Colors.yellow,value: setValue,onChanged: (v) {print(value is ${v});setState(() {setValue v;});},),),);
}上面的代码中我们把Switch放到了容器中并且使用不同的颜色来突出开关的效果。此外我们在onChanged属性对应的方法中通过setState()方法修改了value 属性的值这样可以让开关与滑动保持联动如果不这样做滑动开关时它的状态会变化松开开关后它会自动恢复成初始状态.在上面的代码中我本来想通过Switch外 面的容器来修改它的大小但是发现没有效果目前还没有找到合适的方法来修改它的大小以后找到后再和大家分享。 看官们关于Switch Widget相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
