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});

  @override
  void 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);
  }

  @override
  bool 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 {
  @override
  State<StatefulWidget> createState() {
    return ProgressRingState();
  }

  static void startAnimation() {
    animationController.forward(from: 0);
  }
}

class ProgressRingState extends State<ProgressRing>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void 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;
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget 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),
    );
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

整数规划——第三章 全单模矩阵

整数规划——第三章 全单模矩阵 若线性规划问题的约束矩阵为全单模矩阵&#xff0c;则该问题可行域的顶点都是整数点&#xff0c;从而线性规划与整数规划的最优解相同。 3.1 全单模性与最优性 考虑线性整数规划问题&#xff1a; (IP) min ⁡ c T x , s . t . A x ≤ b , x …

MATLAB的设置路径

在主页下的 或者在命令行输入path&#xff0c;命令行会出现所有路径 必须要将某些函数.m文件以及一些类文件包含在路径当中&#xff0c;否则在脚本代码中输入代码时&#xff0c;不会有代码提示

LeetCode96. 不同的二叉搜索树

96. 不同的二叉搜索树 文章目录 [96. 不同的二叉搜索树](https://leetcode.cn/problems/unique-binary-search-trees/)一、题目二、题解 一、题目 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的…

SpringBoot整合达梦数据库

近期接到了一个需要国产化的项目&#xff0c;用到了达梦数据库&#xff0c;没想到一开始配置就出现了问题&#xff0c;下面把配置给大家粘贴出来&#xff0c;大家少踩点坑。 一、先下载达梦数据库 这是达梦数据库下载链接&#xff0c;达梦数据库没有免费的&#xff0c;个人好…

Flask 是什么?Flask框架详解及实践指南

Flask 是一个轻量级的 Python Web 框架&#xff0c;它被广泛用于构建 Web 应用程序和 API。Flask 简单易用&#xff0c;具有灵活性和可扩展性&#xff0c;是许多开发者喜欢用其构建项目的原因。本文将介绍 Flask 是什么以及如何使用它来构建 Web 应用程序&#xff0c;同时提供一…

JavaScript基础 第一天

本套笔记是通过学习B站Pink老师JavaScript核心进阶 前端必学总结的学习笔记&#xff0c;希望自己之后在使用的过程中能够将所学知识融会贯通 学习目标 1. 理解变量是存储数据的容器 2.理解什么是数据并知道数据的类型 3.知道JavaScript数据类型转换的特征 学习目录 1.Jav…

排序进行曲-v4.0

文章目录 小程一言快速排序步骤详细解释具体步骤 举例总结 复杂度分析时间复杂度分析&#xff1a;空间复杂度分析&#xff1a;注意 应用场景总结 实际举例结果总结 代码实现结果解释 小程一言 这篇文章是在排序进行曲3.0之后的续讲&#xff0c; 这篇文章主要是对快速排序进行细…

[JAVAee]网络编程-套接字Socket

目录 基本概念 发送端与接收端 请求与响应 ​编辑客户端与服务器 Socket套接字 分类 数据报套接字 流套接字传输模型 UDP数据报套接字编程 DatagramSocket API DatagramPacket API InetSocketAddress API 示例一: 示例二: TCP流数据报套接字编程 ServerSock…

Jupyter Notebook 遇上 NebulaGraph,可视化探索图数据库

在之前的《手把手教你用 NebulaGraph AI 全家桶跑图算法》中&#xff0c;除了介绍了 ngai 这个小工具之外&#xff0c;还提到了一件事有了 Jupyter Notebook 插件: https://github.com/wey-gu/ipython-ngql&#xff0c;可以更便捷地操作 NebulaGraph。 本文就手把手教你咋在 J…

设备管理平台:采用以可靠性为中心的维护策略的优势

在如今的工业领域&#xff0c;以可靠性为中心的维护策略正逐渐成为企业数字化转型的核心。无论是混合还是离散自动化应用&#xff0c;优化维护和工作流程实践已经成为提高利润、降低停机时间、增强运营和生产性能的不可或缺的一环。在这个过程中&#xff0c;设备管理系统与物联…

汽车BOOTLOADER开发经历

鄙人参与电动汽车BOOTLOADER开发近三年&#xff0c;从完全没有这方面的基础到参与国内外大小知名或不知名车企的电动车三大件的BOOTLOADER开发&#xff0c;总结了以下一点学习心得。 1.熟悉基本术语含义 诊断、寻址方式、FBL、擦除、驱动 2.熟悉国际标准、UDS服务格式 汽车的…

Redis BitMap/HyperLogLog/GEO/布隆过滤器案例

面试问题&#xff1a; 抖音电商直播&#xff0c;主播介绍的商品有评论&#xff0c;1个商品对应了1系列的评论&#xff0c;排序展现取前10条记录用户在手机App上的签到打卡信息&#xff1a;1天对应1系列用户的签到记录&#xff0c;新浪微博、钉钉打卡签到&#xff0c;来没来如何…

我开源的 c#+wpf 模仿网易云音乐播放器

MusicApp 介绍 gitee地址&#xff1a;https://gitee.com/liu_guo_feng/music-app 我开源的 c#wpf 模仿网易云音乐播放器 项目页面功能完成列表 首页(待完善) 每日推荐音乐 歌单详情 带播放列表 歌词页(待完善) 换肤功能(待完善) 系统托盘 … 预览 仅供学习使用 不作任何商业用…

类图的6种关系和golang应用

文章目录 1. 依赖和关联1.1 依赖&#xff08;Dependency&#xff09;概念类图示例代码示例 1.2 关联&#xff08;Association&#xff09;概念类图示例代码示例 2. 组合和聚合&#xff08;特殊的关联关系&#xff09;2.1 聚合&#xff08;Aggregation&#xff09;概念类图示例代…

9、Kubernetes核心技术 - Volume

目录 一、概述 二、卷的类型 三、emptyDir 四、hostPath 五、NFS 5.1、master服务器上搭建nfs服务器 5.2、各个slave节点上安装nfs客户端 5.3、创建Pod 六、PV和PVC 6.1、PV 6.1.1、PV资源清单文件示例 6.1.2、PV属性说明 6.1.3、PV的状态 6.2、PVC 6.2.1、PVC资…

Chapter 13: Network Programming | Python for Everybody 讲义笔记_En

文章目录 Python for Everybody课程简介Network ProgrammingNetworked programsHypertext Transfer Protocol - HTTPThe world’s simplest web browserRetrieving an image over HTTPRetrieving web pages with urllibReading binary files using urllibParsing HTML and scra…

如何实现对主机的立体监控?

主机监控是保证系统稳定性和性能的重要环节之一&#xff0c;那应该如何实现对主机的立体监控&#xff1f; 本期EasyOps产品使用最佳实践&#xff0c;我们将为您揭晓&#xff1a; 主机应该如何分组和管理&#xff1f; 主机监控应该关注哪些关键性指标&#xff1f; 背 景 通…

利用线程池多线程并发实现TCP两端通信交互,并将服务端设为守护进程

文章目录 实现目标实现步骤封装日志类封装线程池封装线程封装锁封装线程池 TCP通信的接口和注意事项accept TCP封装任务客户端Client.hppClient.cc 服务端Server.hpp Server.cc实现效果 守护进程服务端守护进程化 实现目标 利用线程池多线程并发实现基于TCP通信的多个客户端与…

vue3 excel 导出功能

1.安装 xlsx 库 npm install xlsx2.创建导出函数 src/utils/excelUtils.js import * as XLSX from xlsx;const exportToExcel (fileName, datas, sheetNames) > {// 创建工作簿const wb XLSX.utils.book_new()for (let i 0; i < datas.length; i) {let data datas…

Q-Tester 3.8:适用于开发、生产和售后的诊断测试软件

Q-Tester是一款简易使用的诊断测试软件&#xff0c;同时也是一款基于ODX&#xff08;ASAM MCD-2D/ISO 22901-1&#xff09;国际标准的工程诊断仪&#xff0c;通过该诊断仪可实现与ECU控制之间的数据交互。这一方案的优势是&#xff0c;在功能方面确定并完成相关开发工作后&…