快捷導(dǎo)航

Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動(dòng)畫效果

更新時(shí)間：2020年11月27日 09:31:50 作者：老孟

這篇文章主要給大家介紹了關(guān)于Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動(dòng)畫效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

此動(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Python的異常概念介紹以及處理
本篇文章給大家分享了關(guān)于Python異常的相關(guān)概念知識點(diǎn)以及處理方法，對此有需要的朋友趕快學(xué)習(xí)下吧。
2018-03-03
Android去除煩人的默認(rèn)閃退Dialog
這篇文章主要為大家詳細(xì)介紹了Android去除煩人的默認(rèn)閃退Dialog的相關(guān)方法，感興趣的小伙伴們可以參考一下
2016-04-04
正確在Flutter中添加webview實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了正確在Flutter中添加webview實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
Android使用自定義PageTransformer實(shí)現(xiàn)個(gè)性的ViewPager動(dòng)畫切換效果
這篇文章主要介紹了Android使用自定義PageTransformer實(shí)現(xiàn)個(gè)性的ViewPager切換動(dòng)畫，具有很好的參考價(jià)值，一起跟隨小編過來看看吧
2018-05-05
android studio xml文件實(shí)現(xiàn)添加注釋
這篇文章主要介紹了android studio xml文件實(shí)現(xiàn)添加注釋，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-03-03
Android 動(dòng)畫實(shí)現(xiàn)幾種方案
這篇文章主要介紹了Android 動(dòng)畫實(shí)現(xiàn)幾種方案的相關(guān)資料,需要的朋友可以參考下
2017-06-06
Android：“萬能”Activity重構(gòu)篇
本文主要介紹了mvp以及每一層，以及使用mvp來重構(gòu)“萬能”Activity，其實(shí)每一層需要注意的東西還有很多，比如model層是最難寫的一層。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
Android工具欄頂出轉(zhuǎn)場動(dòng)畫的實(shí)現(xiàn)方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Android工具欄頂出轉(zhuǎn)場動(dòng)畫的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-09-09
本文教大家一步步實(shí)現(xiàn)自定義View之播放暫?？丶哂幸欢ǖ膮⒖純r(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06