第一百七十九回自定义SlideImageSwitch

文章目录

1. 概念介绍
2. 思路与方法
- 2.1 实现思路
3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
4. 内容总结

我们在上一章回中介绍了"SlideSwitch组件"相关的内容，本章回中将介绍自定义SlideImageSwitch.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面章回中介绍了Switch组件相关的内容，不过该组件只能在水平方向上使用,通俗点讲就是只能沿着水平方向滑动Switch。如果想沿着垂直文峰滑动Switch怎
么办呢？看官莫急，本章回中将介绍如何在垂直方向上使用该组件。

2. 思路与方法

2.1 实现思路

我们想要在垂直方向上使用该组件首先想到是组件的属性，不过查看文档和源代码后没有发现可以控制滑动方向的属性。既然此路走不通那么就看看pub.dev上有没有三方
提供的组件，功夫不负有心人，我们还真找到了一个三方包提供的组件SlideSwitcher，该组件提供了direction属性来控制组件的方向.属性值有水平和垂直两个数
值，默认是水平方向。大家可以自己动手去使用该组件，详细的用法参考组件给的示例代码就可以，下面的图形是我们使用该组件创建水平和垂直方向的switch.
不过该组件有一个缺点：只能修改滑动条的颜色，无法修改滑动条默认的图片。025switch
这两种思路都走不通，于是我们想到了另外一种思路：把现在的switch旋转90度，这样就可以在垂直方向滑动switch了。我们动手实践后发现按照此思路可以实现垂直
方向的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与本章回内容无关，大家可以忽略它们。
在这里插入图片描述