【Flutter】【基础】CustomPaint 绘画功能(一)

在这里插入图片描述

功能:CustomPaint

  • 相当于在一个画布上面画画,可以自己绘制不同的颜色形状等
  • 在各种widget 或者是插件不能满足到需求的时候,可以自己定义一些形状

使用实例和代码:

CustomPaint: 能使你绘制的东西显示在你的ui 上面,
painter=》child=》oregroundPainter,foregroundPainter最外面的一层会覆盖painter,child 层里面的widget.

 return Container(//painter 绘制完成之后需要再CustomPaint 里面构建称为widgetchild: Center(child: CustomPaint(child: Icon(Icons.abc,size: 40,color: Colors.red,),painter: MybackGroudnPaiter(), //最内一层//  child: ,//子组件,在中间foregroundPainter: ForegroundPainter(), //最外面一层,也是  CustomPainter),),);

CustomPainter 绘制

class MybackGroudnPaiter extends CustomPainter {void paint(Canvas canvas, Size size) {//canvas 画布,size 画布的尺寸//在这边绘制// canvas.drawColor(Colors.red, BlendMode.color);var centerp = size / 2;//定义画笔是什么颜色,样式,画笔的宽度var paint = Paint()..color = Colors.teal..style = PaintingStyle.fill..strokeWidth = 2.0;canvas.drawRect(Rect.fromLTWH(centerp.width - 100, centerp.height - 100, 200, 200),paint);}bool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}class ForegroundPainter extends CustomPainter {void paint(Canvas canvas, Size size) {var centerp = size / 2;//定义画笔是什么颜色,样式,画笔的宽度var paint = Paint()..color = Colors.pink..style = PaintingStyle.fill..strokeWidth = 2.0;canvas.drawRect(Rect.fromLTWH(centerp.width - 130, centerp.height - 130, 200, 200),paint);}bool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn true;}
}

绘制完成之后显示的图片


绘画的能力

我们绘制1000个彩色点点,从上往下掉落,看看性能,没有任何的卡顿,真给力

import 'dart:math';
import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);Widget build(BuildContext context) {return const MaterialApp(home: Scaffold(backgroundColor: Colors.white,body: MyHomePage(title: 'jack ma',),),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);final String title;State<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage>with SingleTickerProviderStateMixin {late AnimationController _controller;final List<Snowflake> _snowflakes =List.generate(1000, (index) => Snowflake());void initState() {;_controller =AnimationController(vsync: this, duration: const Duration(seconds: 5))..repeat();super.initState();}Widget build(BuildContext context) {return Scaffold(body: Center(child: SizedBox(width: double.infinity,height: double.infinity,child: AnimatedBuilder(animation: _controller,builder: (BuildContext context, Widget? child) {//一直在这边build,5s 动画运行时间for (var snow in _snowflakes) {snow.fall();}return CustomPaint(painter: MyPainter(_snowflakes),);},),),));}
}class MyPainter extends CustomPainter {final List<Snowflake> _snowflakes;MyPainter(this._snowflakes);void paint(Canvas canvas, Size size) {final whitePaint = Paint()..color = Colors.grey;for (int i = 0; i < 1000; i++) {whitePaint.color = Colors.primaries[i % Colors.primaries.length];canvas.drawCircle(Offset(_snowflakes[i].x, _snowflakes[i].y),_snowflakes[i].radius, whitePaint);}}bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}class Snowflake {double x = Random().nextDouble() * 400;double y = Random().nextDouble() * 800;double radius = Random().nextDouble() * 2 + 2;double velocity = Random().nextDouble() * 4 + 2;void fall() {y += velocity;if (y > 800) {y = 0;x = Random().nextDouble() * 400;radius = Random().nextDouble() * 2 + 2;velocity = Random().nextDouble() * 4 + 2;}}
}

在这里插入图片描述

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

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

相关文章

竞赛项目 酒店评价的情感倾向分析

前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 酒店评价的情感倾向分析 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/post…

用Python做一个滑雪小游戏

游戏是让人娱乐和放松的好方式&#xff0c;而编写和玩自己的游戏则是一种特别有趣的体验。在本文中&#xff0c;我们将使用Python和pygame库来创建一个简单的滑雪小游戏。通过这个小游戏项目&#xff0c;我们将学习如何使用Python编程语言来制作自己的游戏&#xff0c;并且享受…

IT运维:使用数据分析平台监控深信服防火墙

概述 深信服防火墙自身监控可以满足绝大部分需求&#xff0c;比如哪个应用占了最大带宽&#xff0c;哪个用户访问了哪些网站&#xff1f;这里我们为什么使用鸿鹄呢&#xff1f;因为我们要的是数据的处理和分析&#xff0c;比如某个用户在某个事件都做了哪些行为&#xff0c;这个…

【设计模式】前端控制器模式

前端控制器模式&#xff08;Front Controller Pattern&#xff09;是用来提供一个集中的请求处理机制&#xff0c;所有的请求都将由一个单一的处理程序处理。该处理程序可以做认证/授权/记录日志&#xff0c;或者跟踪请求&#xff0c;然后把请求传给相应的处理程序。以下是这种…

基于鲲鹏平台Ceph深度性能调优

刘亮奇 架构师技术联盟 2021-04-12 07:50 摘自&#xff1a; https://mp.weixin.qq.com/s/o9HH-8TF0DbMqHrvsFh1NA 随着 IOT、大数据、移动互联等应用的暴涨&#xff0c;产生的数据也越来越多&#xff0c;整个存储市场总量也逐年增长&#xff0c;预计到 2021 年分布式存储会占到…

UNIX基础知识:UNIX体系结构、登录、文件和目录、输入和输出、程序和进程、出错处理、用户标识、信号、时间值、系统调用和库函数

引言&#xff1a; 所有的操作系统都为运行在其上的程序提供服务&#xff0c;比如&#xff1a;执行新程序、打开文件、读写文件、分配存储区、获得系统当前时间等等 1. UNIX体系结构 从严格意义上来说&#xff0c;操作系统可被定义为一种软件&#xff0c;它控制计算机硬件资源&…

CTFshow 限时活动 红包挑战7、红包挑战8

CTFshow红包挑战7 写不出来一点&#xff0c;还是等了官方wp之后才复现。 直接给了源码 <?php highlight_file(__FILE__); error_reporting(2);extract($_GET); ini_set($name,$value);system("ls ".filter($_GET[1])."" );function filter($cmd){$cmd…

【图像分类】理论篇(2)经典卷积神经网络 Lenet~Densenet

1、卷积运算 在二维卷积运算中&#xff0c;卷积窗口从输入张量的左上角开始&#xff0c;从左到右、从上到下滑动。 当卷积窗口滑动到新一个位置时&#xff0c;包含在该窗口中的部分张量与卷积核张量进行按元素相乘&#xff0c;得到的张量再求和得到一个单一的标量值&#xff0c…

SQL- 每日一题【1327. 列出指定时间段内所有的下单产品】

题目 表: Products 表: Orders 写一个解决方案&#xff0c;要求获取在 2020 年 2 月份下单的数量不少于 100 的产品的名字和数目。 返回结果表单的 顺序无要求 。 查询结果的格式如下。 示例 1: 解题思路 1.题目要求我们获取在 2020 年 2 月份下单的数量不少于 100 的产品的…

IO多路复用

常见的网络IO模型 网络 IO 模型分为四种&#xff1a;同步阻塞 IO(Blocking IO, BIO)、同步非阻塞IO(NIO, NewIO)、IO 多路复用、异步非阻塞 IO(Async IO, AIO)&#xff0c;其中AIO为异步IO&#xff0c;其他都是同步IO 同步阻塞IO 同步阻塞IO&#xff1a;在线程处理过程中&am…

Redis_事务操作

13. redis事务操作 13.1事务简介 原子性(Atomicity) 一致性(Consistency) 隔离性(isolation) 持久性(durabiliby) ACID 13.2 Redis事务 提供了multi、exec命令来完成 第一步&#xff0c;客户端使用multi命令显式地开启事务第二步&#xff0c;客户端把事务中要执行的指令发…

前沿分享-通过经皮神经刺激来治疗糖尿病神经性疼痛

经皮神经电刺激&#xff08;PENS&#xff09;设备用于对糖尿病周围神经病变引起的慢性、顽固性疼痛进行多次治疗。 放在耳朵上的这种可穿戴设备在几天内持续提供低水平的脉冲电流。 这是一种安全有效的非麻醉性替代治疗慢性疼痛的方法。还有一张设备放在糖足上的照片&#xff0…

向量数据库 Milvus Cloud Partition Key:租户数量多,单个租户数据少的三种解决方案

三种解决方案 这个问题提出的时候,Milvus 的最新版本是 2.2.8,我们做个角色互换,在当时站在这个用户的角度,留在我们面前的选择有这么几个: 为每个租户创建一个 collection 为每个租户创建一个 partition 创建一个租户名称的标量字段 接下来,我们依次分析下这三种方案的可…

《零基础实践深度学习》(第2版)学习笔记,(五)深度学习与计算机视觉

文章目录 1. 计算机视觉概述2. 图像分类3. 目标检测 1. 计算机视觉概述 图像分类 目标检测 2. 图像分类 3. 目标检测

01-C++数据类型

3、基础类型 3.1、简单变量 变量的命名 carDrip和cardRip 或boat_sport和boats_port 此外&#xff0c;还有有前缀的命名&#xff0c;使用前缀表示数据类型。常见的前缀有:str&#xff08;表示字符串&#xff09;、n&#xff08;表示整数值&#xff09;、b&#xff08;表示…

深入探究QCheckBox的三种状态及其用法

文章目录 引言&#xff1a;三种状态一、未选中状态&#xff08;0&#xff09;&#xff1a;二、选中状态&#xff08;2&#xff09;&#xff1a;三、部分选中状态&#xff08;1&#xff09;&#xff1a; 判断方法结论&#xff1a; 引言&#xff1a; QCheckBox是Qt框架中常用的复…

html css实现爱心

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>/* 爱心 */.lo…

结构体的定义与赋值

1、结构体定义 首先定义一个学生结构体&#xff0c;如下所示&#xff1a; struct Student {int num;char name[32];char sex;int age; }; 接着在主函数中对学生进行声明&#xff0c;如下所示&#xff1a; #include<iostream> using namespace std;struct Student {in…

直接在html中引入Vue.js的cdn来实现一个简单的上传图片组件

摘要 当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时&#xff0c;你可以利用 Vue 的数据绑定和事件处理能力&#xff0c;结合 HTML 和 CSS&#xff0c;轻松地创建一个交互式的图片上传界面。以下是一个示例&#xff1a; 代码结构 index.html <!DOCTYPE html> &…

Rust 重载运算符|复数结构的“加减乘除”四则运算

复数 基本概念 复数定义 由实数部分和虚数部分所组成的数&#xff0c;形如a&#xff0b;bi 。 其中a、b为实数&#xff0c;i 为“虚数单位”&#xff0c;i -1&#xff0c;即虚数单位的平方等于-1。 a、b分别叫做复数a&#xff0b;bi的实部和虚部。 当b0时&#xff0c;a&…