文章目录
我们在上一章回中介绍了"如何创建垂直方向的Switch"相关的内容,本章回中将介绍SlideSwitch组件.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在上一章回中提到过SlideSwitch组件,当时只提到它可以通过属性来控制开关的方向,没有详细介绍它的使用方法。该组件是三方包提供的组件,它可以提供和
Switch组件相同的功能,不过在此基础上做了一些加强,本章回将详细介绍该组件的使用方法。
2. 使用方法
该组件是三方包提供的,使用前需要在yaml中导入包:slide_switcher: ^1.1.2
.版本号是当前最新版本,后续可能会更新。该组件的用法和Switch组件的用法
类似,它通过属性来控制自己,有些属性和Switch组件的相同,有些属性是自己特有的属性,下面是该组件中常用的属性
- children:主要用来存放开关值组件;
- containerHeight:主要用来控制组件的高度;
- containerWight:主要用来控制组件的宽度;
- onSelect:它是方法类型,切换开关时调用该方法;
- containerBorder:用来控制组件周围的边框;
- containerColor:用来控制组件周围的边框的颜色;
- slidersBorder:用来控制滑块的边框;
- slidersColors:用来控制滑块的颜色;
- direction:用来控制组件的滑动方向;
上面介绍的这些属性中前四个是必选属性,剩余的属性都是可选属性。这里注意一下children属性,它可以包含多个组件,因此SlideSwitch可以在多个状态之间进行滑动,而且不只是像Switch一样只能在开和关两种状态之间滑动。
3. 代码与效果
3.1 示例代码
介绍完该组件相关的属性后,我们通过具体的示例代码来演示如何使用SideSwitch组件。
SlideSwitcher(
containerHeight: 50,
containerWight: 200,
onSelect: (value){
},
children:const [
Text("Open"),
Text("Close"),
],
),
上面的示例代码中演示了SlideSwitch组件的使用方法,不过只有必选属性的用法,其它属性的用法没有演示,留给大家去自行探索吧。
3.2 运行效果
把上面的示例代码赋值给Scaffold组件的body属性,然后编译并且运行该程序就可以得到下面的运行效果图,这个效果图是SideSwitch组件默认的效果,大家可以通
过可选属性来修改它的外观风格和颜色,进而实现不同的效果图。此外,图中有两个小的Switch与本章回内容无关,大家可以忽略它们。
4. 内容总结
最后,我们对本章回的内容做一些全面的总结:
- SlideSwitch组件是三方包提供的组件,它可以提供和Switch相同的功能;
- SlideSwitch组件可以包含多个状态,并且在这些状态之间进行切换;
- SlideSwitch组件提供了相关的属性来设置不同的外观风格,大小和颜色;
- SliderSwitch组件提供水平和垂直两种滑动方向;
看官们,与SlideSwitch组件相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
标签:SlideSwitch,示例,创建,开关,Switch,组件,用来,滑动式,属性 From: https://blog.csdn.net/talk_8/article/details/141613989