Flutter 色盲检测器效果

Flutter 色盲检测器效果

Android小彩虹2021-07-17 17:46:56200A+A-

本篇文章的起因是本来去appstore 搜索一个wps下载,然后碰巧看懂了这个色盲检测的应用,测试了一会,感觉自己是个色盲。本就在学习flutter的路上,所以打算仿写一个来用作学习。

先看一眼效果:

tutieshi_640x1343_5s.gif

其实这个没有什么难点,都是很基本的操作,资源的获取是下载了原应用,里面有资源文件,直接拿来用了。本文章仅供学习使用。本篇文章主要介绍一下完成这个小组件的知识点

资源文件

在flutter的pubspec.yaml文件中,打开资源文件加载的语句就可以了

  assets:
    - lib/assets/images/
    - lib/assets/data.json

其中lib/assets/images/ 表示在images下的所有文件都加载. 作者是将资源文件放在lib文件夹里面了, 这个因人而异吧。 其中还有一个data.json文件, 这个用来存储一些本地的资源信息。 加载方式

Future getData() async {
    String jsonString = await rootBundle.loadString("lib/assets/data.json");
    final jsonResult = json.decode(jsonString);
    List<Map> data = new List();
    for (Map<String, dynamic> map in jsonResult) {
      data.add(map);
    }
}

如果需要加载不同分辨率的图片 在通images文件加载,创建2.0x和3.0x就可以了,这样声明的时候需要加上

 assets:
    - lib/assets/images/
    - lib/assets/images/2.0x/
    - lib/assets/images/3.0x/

slider的使用

采用的分段的形式。这方面不多说了,看文档就知道了。

Slider(
              value: value,
              onChanged: (v) {
                setState(() => value = v);
              },
              label: "第${value.toInt()}题", //气泡的值
              divisions: 65, //进度条上显示多少个刻度点
              max: 66,
              min: 1,
            )

还有可以使用SliderTheme来自定义

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    activeTrackColor:  //进度条滑块左边颜色
    inactiveTrackColor: //进度条滑块右边颜色
    trackShape: //进度条形状,这边自定义两头显示圆角
    thumbColor:  //滑块颜色
    overlayColor:  //滑块拖拽时外圈的颜色
    overlayShape: // 可继承SliderComponentShape自定义形状,
    thumbShape: //可继承SliderComponentShape自定义形状,
    inactiveTickMarkColor:
    tickMarkShape: //继承SliderTickMarkShape可自定义刻度形状,
    showValueIndicator:ShowValueIndicator.onlyForDiscrete, //气泡显示的形式
    valueIndicatorColor: Colors.white, //气泡颜色
    valueIndicatorShape: PaddleSliderValueIndicatorShape(), //气泡形状
    valueIndicatorTextStyle: TextStyle(color: Colors.black), //气泡里值的风格
    trackHeight: 1 //进度条宽度
),

over~~~~

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们