Flutter 自定义view

带进度动画的圆环。没gif,效果大家自行脑补。

继承CustomPainterpaint()方法中拿到canvas,绘制API和android差不多。

import 'package:flutter/material.dart';class ProgressRingPainter extends CustomPainter {double strokeWidth = 20;Color _colorBg = Colors.white10;final double progress;ProgressRingPainter({this.progress});@overridevoid paint(Canvas canvas, Size size) {var xCenter = size.width / 2;var yCenter = size.height / 2;Rect rect = Rect.fromCenter(center: Offset(xCenter, yCenter),width: size.width,height: size.height);var paintBg = Paint()..style = PaintingStyle.stroke..isAntiAlias = true..strokeWidth = strokeWidth..color = _colorBg;List<Color> colors = List();colors.add(Colors.white70);colors.add(Colors.white);colors.add(Colors.white70);var paint = Paint()..style = PaintingStyle.stroke..isAntiAlias = true..strokeWidth = strokeWidth..shader = LinearGradient(colors: colors).createShader(rect);canvas.drawArc(rect, 0, 36, false, paintBg);canvas.drawArc(rect, 4.5, -progress, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;}
}
import 'package:flutter/material.dart';
import 'package:flutter_app_demo/widget/progress_ring_paint.dart';AnimationController animationController;class ProgressRing extends StatefulWidget {@overrideState<StatefulWidget> createState() {return ProgressRingState();}static void startAnimation() {animationController.forward(from: 0);}
}class ProgressRingState extends State<ProgressRing>with SingleTickerProviderStateMixin {Animation<double> animation;AnimationController controller;@overridevoid initState() {super.initState();controller = new AnimationController(duration: const Duration(seconds: 5), vsync: this);animation = CurvedAnimation(parent: controller, curve: Curves.linear);animation = new Tween(begin: 0.0, end: 36.0).animate(animation);controller.forward(from: 0);animationController = controller;}@overridevoid dispose() {controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return AnimatedProgressRing(animation: animation);}
}class AnimatedProgressRing extends AnimatedWidget {AnimatedProgressRing({Key key, Animation<double> animation}): super(key: key, listenable: animation);Widget build(BuildContext context) {final Animation<double> animation = listenable;return CustomPaint(size: Size(200, 200),painter: ProgressRingPainter(progress: animation.value),);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/58561.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

macbook 安装 Git 和 安装 Homebrew

使用MacBook 时&#xff0c;需要拉取代码&#xff0c;我们需要使用到 Git&#xff0c;但 MacBook 中并没安装&#xff0c;这里我们分享一下安装过程。其他方式可查看参考文献中的方法。 一、使用终端直接安装 在新版的 MacBook 中&#xff0c;可以使用终端直接安装 Git&#…

【网络工程】网络流量分析工具 Wireshark

文章目录 第一章&#xff1a;WireShark介绍第二章&#xff1a;WireShark应用第三章&#xff1a;Wireshark 实战 第一章&#xff1a;WireShark介绍 Wireshark (前身 Ethereal)&#xff1a;它是一个强大的网络封包分析软件工具 ! 此工具使用WinPCAP作为接口&#xff0c;直接与网卡…

CentOS软件包管理rpm、yum

一、软件包概述 Linux常见软件包分为两种&#xff0c;分别是源代码包、二进制文件包。源代码包是没有经过编译的包&#xff0c;需要经过GCC、C编译器编译才能运行&#xff0c;文件内容包含源代码文件&#xff0c;通常以.tar.gz、.zip、.rar结尾&#xff1b;二进制包无需编译&am…

TDengine + Telegraf + Grafana 实现图形化服务器状态监控

TDengine Telegraf Grafana 实现图形化服务器状态监控 技术栈环境搭建安装tdenginue下载安装包解压文件运行安装文件启动td运行 taosAdapter 安装Telegraf添加yum源安装生成配置文件修改配置文件启动telegraf 安装Grafana直接yum安装安装td数据源配置启动Grafana配置数据源导…

std::string 的append方法 存放文本和非文本数据

今天在用std::string来拼接数据 有文本数据 也有 非文本数据 如果是文本数据那么append方法参数为 ( char *data, int len&#xff09; 将data的前len个字节附加到 string中 如果是非文本数据 则参数为&#xff08;int size, char data&#xff09;; 重复size个data 附加…

森海塞尔为 CUPRA 首款纯电轿跑 SUV – CUPRA Tavascan 注入音频魅力

森海塞尔为 CUPRA 首款纯电轿跑 SUV – CUPRA Tavascan 注入音频魅力 音频专家森海塞尔携手富有挑战精神的 CUPRA&#xff0c;雕琢时代新贵车型&#xff0c;打造畅快尽兴的驾驶体验 全球知名音频专家森海塞尔与以颠覆传统、充满激情、不甘现状而闻名的汽车品牌 CUPRA 展开合作…

Vscode-工具使用

Vscode &#xff0c;这玩意儿是开源的&#xff0c;以前用收费的破解版&#xff0c;过段时间就高版本不匹配&#xff0c;这次搞个不要钱的玩玩&#xff0c;记录使用心得 下载 下载地址&#xff1a;官网 点击下载&#xff0c;但是这里有个问题下载比较慢&#xff0c;解决办法&a…

构建Docker容器监控系统(Cadvisor +InfluxDB+Grafana)

目录 案例概述 Cadvisor InfluxDBGrafana 1.1、 Cadvisor 1.2、InfluxDB 1.3、Grafana 1.4、监控组件架构 1.5、开始部署 安装docker-ce 阿里云镜像加速器 创建自定义网络 创建influxdb容器 案例概述 Docker作为目前十分出色的容器管理技术&#xff0c;得到大量企业…

RabbitMQ在CentOS下的安装

RabbitMQ的版本是3.8.2 1.环境配置&#xff1a;CentOs 7.6以上版本&#xff0c;我的版本是7.9&#xff0c;不要对yum换源&#xff0c;否则可能会安装失败。 echo "export LC_ALLen_US.UTF-8" >> /etc/profile source /etc/profile 以上命令&#xff0c;是…

使用 PowerShell 将 Excel 中的每个工作表单独另存为独立的文件

导语&#xff1a;在日常工作中&#xff0c;我们经常需要处理 Excel 文件。本文介绍了如何使用 PowerShell 脚本将一个 Excel 文件中的每个工作表单独另存为独立的 Excel 文件&#xff0c;以提高工作效率。 1. 准备工作 在开始之前&#xff0c;请确保已经安装了 Microsoft Exc…

AI:01-基于机器学习的深度学习的玫瑰花种类的识别

深度学习技术在图像识别领域有着广泛的应用,其中一种应用就是玫瑰花种类的识别。在本文中,我们将介绍如何使用机器学习和深度学习技术来实现玫瑰花种类的识别,并提供相应的代码实现。 一、数据集介绍 在进行机器学习和深度学习模型的训练之前,我们需要先准备好相应的数据集…

scipy求解约束无导数优化问题:SHGO算法

文章目录 SHGO算法参数说明测试 SHGO算法 SHGO&#xff0c;即simplicial homology global optimize&#xff0c;来自2018年的文章&#xff0c;是一种基于组合拓扑学的优化方法&#xff0c;是一个非常新的算法。 这种算法适用于CDFO(constrained deriviate free optimisation)…