FSwitch 一個(gè)有趣的、實(shí)用的開關(guān)組件。
? 特性
支持打開、關(guān)閉的提示
支持為 Slider 設(shè)置裝飾
支持靈活的配置可用狀態(tài)
更具空間感的 陰影
良好的開關(guān)交互體驗(yàn)
?? 使用指南
?? 參數(shù)
| 參數(shù) | 類型 | 必要 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
| open | bool | 否 | false | 是否處于打開狀態(tài)。默認(rèn) false。 |
| onChanged | ValueChanged<bool> | 是 | null | 當(dāng)開關(guān)狀態(tài)發(fā)生改變時(shí)，會(huì)回調(diào)該函數(shù)。 |
| width | double | 否 | 59.23 | 寬度。默認(rèn) 59.23，符合美學(xué) ?? |
| height | double | 否 | null | 高度。默認(rèn)會(huì)根據(jù) [width] 進(jìn)行計(jì)算，符合美學(xué) ?? |
| offset | double | 否 | null | 滑塊與邊緣的間距 |
| openChild | Widget | 否 | null | 打開狀態(tài)的提示樣式 |
| closeChild | Widget | 否 | null | 關(guān)閉狀態(tài)的提示樣式 |
| childOffset | double | 否 | null | 提示與邊緣的間距 |
| color | Color | 否 | null | 關(guān)閉狀態(tài)下的背景色 |
| openColor | Color | 否 | null | 打開狀態(tài)下的背景色 |
| sliderColor | Color | 否 | null | 滑塊顏色 |
| enable | bool | 否 | true | 是否可用 |
| sliderChild | Widget | 否 | null | 滑塊中的組件。超過范圍會(huì)被剪裁。 |
| shadowColor | Color | 否 | null | 設(shè)置組件陰影顏色 |
| shadowOffset | Offset | 否 | null | 設(shè)置組件陰影偏移 |
| shadowBlur | double | 否 | 0.0 | 設(shè)置組件高斯與陰影形狀卷積的標(biāo)準(zhǔn)偏差 |
?? 使用示例
?? 基本使用
基本使用
FSwitch(
onChanged: (v) {},
)
FSwitch 需要始終設(shè)置 onChanged，以便根據(jù)開關(guān)狀態(tài)作出響應(yīng)。
可用狀態(tài) & 陰影
FSwitch(
onChanged: (bool value) {
value_1 = value;
},
open: value_1,
enable: enable_1,
shadowColor: Colors.black.withOpacity(0.5),
shadowBlur: 3.0,
),
通過 enable 可以改變 FSwitch 的可用狀態(tài)。一旦 FSwitch 變?yōu)榭捎脿顟B(tài)，將無法再改變開關(guān)狀態(tài)。
此外，FSwitch 提供了靈活便捷的陰影配置支持。
?? 提示
tip
/// #1
FSwitch(
width: 65.0,
height: 35.538,
onChanged: (v) {},
closeChild: Text(
"Off",
style: TextStyle(
color: Colors.white, fontSize: 11),
),
openChild: Text(
"On",
style: TextStyle(
color: Colors.white, fontSize: 11),
),
),
/// #2
FSwitch(
open: true,
onChanged: (v) {},
closeChild: Icon(
Icons.close,
size: 16,
color: Colors.white,
),
openChild: Icon(
Icons.check,
size: 16,
color: Colors.white,
),
),
/// #3
FSwitch(
width: 65.0,
height: 35.538,
onChanged: (v) {},
closeChild: Text(
"??",
style: TextStyle(fontSize: 20),
),
openChild: Text(
"??",
style: TextStyle(fontSize: 20),
),
childOffset: 3.0,
),
通過 openChild 和 closeChild 可以分別為 FSwitch 設(shè)置打開、關(guān)閉的狀態(tài)指示。
?? Slider 裝飾
裝飾
FSwitch(
width: 300,
height: 38,
onChanged: (bool value) {},
sliderChild: Text(
"??",
style: TextStyle(fontSize: 20),
),
)
sliderChild 將允許開發(fā)者為 Slider 設(shè)置 child 裝飾。
這很有趣！
?? 如何使用？
在項(xiàng)目 pubspec.yaml 文件中添加依賴：
?? pub 依賴方式
dependencies:
fswitch: ^<版本號(hào)>
?? 注意，請(qǐng)到 pub 獲取 FSwitch 最新版本號(hào)
?? git 依賴方式
dependencies:
fswitch:
git:
url: 'git@github.com:Fliggy-Mobile/fswitch.git'
ref: '<分支號(hào) 或 tag>'
?? 注意，分支號(hào) 或 tag 請(qǐng)以 FSwitch 官方項(xiàng)目為準(zhǔn)。
