zoukankan      html  css  js  c++  java
  • 【Flutter 实战】酷炫的开关动画效果

    此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了。
    更多动画效果及Flutter资源:https://github.com/781238222/flutter-do

    添加依赖

    在项目的 pubspec.yaml 文件中添加依赖:

    dependencies:
    	wheel_switch: ^0.0.1
    

    执行命令:

    flutter pub get
    

    使用

    WheelSwitch(
      value: false,
    )
    

    组件默认的宽高分别是80、30,也可以指定宽高:

    WheelSwitch(
      value: false,
       150,
      height: 50,
    )
    

    开关发生变化回调:

    WheelSwitch(
      value: false,
      onChanged: (value){
        print('WheelSwitch : $value');
      },
    )
    

    设置其轨道颜色,分为激活(开)和未激活(关)状态的颜色:

    WheelSwitch(
      value: false,
       150,
      height: 50,
      activeTrackColor: Colors.red,
      inactiveTrackColor: Colors.green,
    )
    

    设置滑块的颜色:

    WheelSwitch(
      value: false,
       150,
      height: 50,
      activeTrackColor: Colors.red,
      inactiveTrackColor: Colors.green,
      activeThumbColor: Colors.blue,
      inactiveThumbColor: Colors.green,
    )
    

    未激活状态(关):

    激活状态(开):

    设置文字和文字样式:

    WheelSwitch(
      value: false,
       150,
      height: 50,
      activeText: '开',
      inactiveText: '关',
      activeTextStyle: TextStyle(color: Colors.white,fontSize: 20),
      inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10),
    )
    

    交流

    老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

    欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

  • 相关阅读:
    windows下安装mysql教程
    python生成器实现杨辉三角
    python默认参数问题
    python中判断素数的函数
    extract()和extact_first()的区别
    硬连接和软连接的区别
    du与df的区别
    命题逻辑
    关于 better-scroll 设置了以后无法滚动或不生效的问题
    Maven *IDEA*
  • 原文地址:https://www.cnblogs.com/mengqd/p/14045940.html
Copyright © 2011-2022 走看看