Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動(dòng)畫效果
前言
此動(dòng)畫效果是我在瀏覽文章時(shí)發(fā)現(xiàn)的一個(gè)非?？犰诺男Ч谑蔷褪褂?Flutter 實(shí)現(xiàn)了。
更多動(dòng)畫效果及Flutter資源： https://github.com/781238222/flutter-do
添加依賴
在項(xiàng)目的 pubspec.yaml 文件中添加依賴：
dependencies: wheel_switch: ^0.0.1
執(zhí)行命令：
flutter pub get
使用
WheelSwitch( value: false, )
組件默認(rèn)的寬高分別是80、30，也可以指定寬高：
WheelSwitch( value: false, width: 150, height: 50, )
開關(guān)發(fā)生變化回調(diào)：
WheelSwitch(
value: false,
onChanged: (value){
print('WheelSwitch : $value');
},
)
設(shè)置其軌道顏色，分為激活（開）和未激活（關(guān)）狀態(tài)的顏色：
WheelSwitch( value: false, width: 150, height: 50, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green, )
設(shè)置滑塊的顏色：
WheelSwitch( value: false, width: 150, height: 50, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green, activeThumbColor: Colors.blue, inactiveThumbColor: Colors.green, )
未激活狀態(tài)（關(guān)）：
激活狀態(tài)（開）：
設(shè)置文字和文字樣式：
WheelSwitch( value: false, width: 150, height: 50, activeText: '開', inactiveText: '關(guān)', activeTextStyle: TextStyle(color: Colors.white,fontSize: 20), inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10), )
交流
老孟Flutter博客（330個(gè)控件用法+實(shí)戰(zhàn)入門系列文章）： http://laomengit.com
到此這篇關(guān)于Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動(dòng)畫效果的文章就介紹到這了,更多相關(guān)Flutter開關(guān)動(dòng)畫效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- flutter實(shí)現(xiàn)帶刪除動(dòng)畫的listview功能
- 利用Flutter實(shí)現(xiàn)“孔雀開屏”的動(dòng)畫效果
- 如何使用Flutter實(shí)現(xiàn)58同城中的加載動(dòng)畫詳解
- flutter RotationTransition實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫
- flutter PositionedTransition實(shí)現(xiàn)縮放動(dòng)畫
- flutter FadeTransition實(shí)現(xiàn)透明度漸變動(dòng)畫
- Flutter路由的跳轉(zhuǎn)、動(dòng)畫和傳參詳解（最簡單）
- Flutter 用自定義轉(zhuǎn)場動(dòng)畫實(shí)現(xiàn)頁面切換
相關(guān)文章
Android中關(guān)于相對(duì)布局RelativeLayout的技巧匯總
RelativeLayout是相對(duì)布局控件，以控件之間相對(duì)位置或相對(duì)父容器位置進(jìn)行排列。下面這篇文章主要給大家介紹了關(guān)于Android中相對(duì)布局RelativeLayout的一些技巧，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
這篇文章主要為大家詳細(xì)介紹了Android仿微信圖片點(diǎn)擊瀏覽的效果，Android 2D平滑放大顯示ImageView,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
利用Jetpack Compose繪制可愛的天氣動(dòng)畫
Jetpack Compose是用于構(gòu)建原生Android UI的現(xiàn)代工具包。Jetpack Compose使用更少的代碼，強(qiáng)大的工具和直觀的Kotlin API，簡化并加速了Android上的UI開發(fā)。本文將利用Jetpack Compose繪制可愛的天氣動(dòng)畫，感興趣的可以了解一下2022-01-01
Android Coil對(duì)比Glide深入分析探究
這篇文章主要介紹了Android Coil對(duì)比Glide，Coil是Android上的一個(gè)全新的圖片加載框架，它的全名叫做coroutine image loader,即協(xié)程圖片加載庫2023-02-02
android實(shí)現(xiàn)可以滑動(dòng)的平滑曲線圖
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)可以滑動(dòng)的平滑曲線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了Android中View跟隨手指移動(dòng)效果，代碼簡單易懂，非常不錯(cuò)，需要的朋友參考下2017-01-01
本文主要介紹了Kotlin的::符號(hào)怎么用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Android開發(fā)中ProgressDialog簡單用法示例
這篇文章主要介紹了Android開發(fā)中ProgressDialog簡單用法,結(jié)合實(shí)例形式分析了Android使用ProgressDialog的進(jìn)度條顯示與關(guān)閉、更新等事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
Android 手機(jī)獲取手機(jī)號(hào)實(shí)現(xiàn)方法
本文主要介紹Android 獲取手機(jī)號(hào)的實(shí)現(xiàn)方法，這里提供了實(shí)現(xiàn)方法，和具體操作流程，并符實(shí)現(xiàn)代碼，有需要的小伙伴可以參考下2016-09-09
現(xiàn)在Fragment的應(yīng)用真的是越來越廣泛了，之前Android在3.0版本加入Fragment的時(shí)候，主要是為了解決Android Pad屏幕比較大，空間不能充分利用的問題，但現(xiàn)在即使只是在手機(jī)上，也有很多的場景可以運(yùn)用到Fragment了，這篇文章給大家介紹了Android中Fragment的解析和使用。2016-11-11