我們在上一章回中介紹了"如何創建垂直方向的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組件相關的內容就介紹到這里，歡迎大家在評論區交流與討論!