第一百四十七回 自定义组件一

文章目录

  • 概念介绍
  • 实现方法
  • 示例代码

我们在上一章回中介绍了跟手指移动的小球相关的内容,本章回中将介绍 自定义组件.闲话休提,让我们一起Talk Flutter吧。

概念介绍

在项目中有些内容无法通过现有的组件来实现,因此需要自定义组件,自定义组件通常分为两大类:

  • 组合已经有的组件形成新的组件;
  • 重新绘制组件;

组合已经有的组件我们没有专门介绍过,不过有类似的内容,比如前面章回中实现的阴影就可以看作是通过组合已经有的组件形成新的组件,它组合了TextBoxShadow组件,形成了带阴影的文字组件。我们在本章回中主要介绍的是重新绘制组件。

实现方法

重新绘制组件需要使用两个组件:CustomPaint组件和CustomPainter组件,因此我们首先介绍一下这两个组件:

  • CustomPainte组件相当于是一个画布,它主要用来创建画布,它提供了size属性来控制画布的大小;
  • CustomPainter组件相当于画笔,组件中需要的内容主要通过它来实现,它是一个抽象类,我们需要实现它的Paint()方法,所有绘制的内容都是在这个方法中完成的。
  • 绘制组件时创建画笔对象,并且把它赋值给画布的painter属性,这样就把画笔和画布关联在了一起。

示例代码

CustomPaint(painter: RockerPainter(outerRadius,Colors.blue),size: Size(100,100),
),class RockerPainter extends CustomPainter{///offset表示圆的圆心与(0,0)的偏移距离,其值等于半径final Color _color;final double radius = size;Offset _offset = Offset.zero;RockerPainter( this.radius,this._color);///参数中的size就是包含类的CustomPaint中指定的sizevoid paint(Canvas canvas,Size size) {Paint paint = Paint()..color = _color..strokeCap = StrokeCap.round..isAntiAlias = true..strokeWidth = 2.0;///圆的半径由参数指定_offset = Offset(radius, radius);///画圆:第一个参数指定Offset,表示圆的左上角为基准进行偏移而不是以圆心为基准canvas.drawCircle(_offset,radius,paint);}bool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn true;}
}

我们在上面的示例代码中,自定义了个圆形,圆形的大小和颜色可以通过参数指定。该代码中结合了综合使用了CustomPaint组件和CustomPainter组件。

编译并且运行上面的程序,可以看到一个半径为100的蓝色圆形,我在这里就演示程序的运行结果了,建议大家自己动手去实践。

看官们,与"自定义组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

HashMap:hashCode()和equals()方法的正确实习

确保自定义对象作为键时正确实现hashCode()和equals()方法是非常重要的,因为这两个方法直接影响着对象在哈希表(如HashMap)中的存储和检索。 下面进一步解释为什么这两个方法如此重要: hashCode()方法:这个方法返回一…

【计算机网络】 粘包问题

文章目录 为什么会产生粘包问题?解决办法先发包大小再发包内容代码示例 为什么会产生粘包问题? tcp是数据流传输,是一种没有边界的,可以合并的传输数据方式。合并就要能拆开,拆不开就是粘包。 解决办法 设置标志位&a…

共享股东模式:实体门店的新型股东模式机遇与挑战并存

在传统的经营模式中,经营者通常需要独自承担企业的风险和责任,同时也需要投入大量的人力和资金。对很多创业者而言,这是一项巨大的挑战。有没有一种方法能够使创业者们在共享资源和利益的同时分担风险和责任呢? 共享股东模式是一…

Spring MongoDB

首先创建数据实体,Document(collection "name") 建立一个一对多的关系时, DocumentReference 导致数据库仅仅存储条目的Id,称为手动索引关系。 也有其它的方法在MongoDB中创建关系。 接下来创建Controller。 RestController …

短效代理IP与长效代理IP:应用场景与选择方法

随着互联网的迅速发展,越来越多的网站开始采取反爬虫措施,以保护自己的数据安全。而作为一种常见的反爬虫工具,代理IP也被广泛应用。代理IP分为短效代理IP和长效代理IP两种类型,本文将介绍它们的区别和应用场景。 一、短效代理IP …

数据结构-----队列

目录 前言 队列 定义 队列的定义和操作方法 队列节点的定义 操作方式 顺序表实现队列(C/C代码) 链表实现队列(C/C代码) Python语言实现队列 前言 排队是我们日常生活中必不可少的一件事,去饭堂打饭的时候排队&a…

彩色相机工作原理——bayer格式理解

早期,图像传感器只能记录光的强弱,无法记录光的颜色,所以只能拍摄黑白照片。 1974年,拜尔提出了bayer阵列,发明了bayer格式图片。不同于高成本的三个图像传感器方案,拜尔提出只用一个图像传感器,在其前面放…

k8s相关命令-命名空间

k8s相关命令目录 文章目录 前言一、创建命名空间二、删除命名空间三、查看命名空间列表四、查看命名空间列表五、查看特定命名空间下所有资源六、删除特定命名空间下所有资源 前言 记录k8s命名空间的相关操作命令 一、创建命名空间 kubectl create namespace <namespace&g…

java向数据库写入数据:如何使用Java将数据写入数据库

​​​​​​答&#xff1a;Java向数据库写入数据的步骤如下&#xff1a;需要创建一个JDBC连接&#xff0c;以便访问数据库。 答&#xff1a;Java向数据库写入数据的步骤如下&#xff1a; 1. 首先&#xff0c;需要创建一个JDBC连接&#xff0c;以便访问数据库。 2. 然后&…

tensorflow基础

windows安装tensorflow anaconda或者pip安装tensorflow&#xff0c;tensorflow只支持win7 64系统&#xff0c;本人使用tensorflow1.5版本&#xff08;pip install tensorflow1.5&#xff09; tensorboard tensorboard只支持chrome浏览器&#xff0c;而且加载过程中可能有一段…

JS new操作符具体做了什么?

1. 意义 在JavaScript中&#xff0c;“new” 操作符用于创建一个新的对象实例。具体来说&#xff0c;“new” 操作符会执行以下步骤&#xff1a; JavaScript中的new操作符是一个非常重要的操作符&#xff0c;它用于创建一个新的对象实例。 2. 实例化步骤 创建一个新的空对象。…

Java面向对象七大原则以及设计模式单例模式和工厂模式简单工厂模式

面向对象的七大原则&#xff08;OOP&#xff09; 1,开闭原则&#xff1a; 对扩展开发&#xff0c;对修改关闭 2.里氏替换原则&#xff1a; 继承必须确保超类所拥有的子类的性质在子类中仍然成立 3.依赖倒置原则&#xff1a; 面向接口编程&#xff0c;不要面向实现编程&am…

K8S pod资源、探针

目录 一.pod资源限制 1.pod资源限制方式 2.pod资源限制指定时指定的参数 &#xff08;1&#xff09;request 资源 &#xff08;2&#xff09; limit 资源 &#xff08;3&#xff09;两种资源匹配方式 3.资源限制的示例 &#xff08;1&#xff09;官网示例 2&#xff0…

super详解

父类 package com.mypackage.oop.demo06;public class Person06{public Person06() {System.out.println("Person06无参执行了");}protected String name "hexioahei";public void print(){System.out.println("Person");} }子类 package com…

机器学习第七课--情感分析系统

分词 分词是最基本的第一步。无论对于英文文本&#xff0c;还是中文文本都离不开分词。英文的分词相对比较简单&#xff0c;因为一般的英文写法里通过空格来隔开不同单词的。但对于中文&#xff0c;我们不得不采用一些算法去做分词。 常用的分词工具 # encodingutf-8 import …

Python爬虫:获取必应图片的下载链接

文章目录 1. 前言2. 实现思路3. 运行结果 1. 前言 首先&#xff0c;说明一下&#xff0c;本篇博客内容可能涉及到版权问题&#xff0c;为此&#xff0c;小编只说明一下实现思路&#xff0c;至于全部参考代码&#xff0c;小编不粘贴出来。不过&#xff0c;小编会说明详细一些&a…

docker查看镜像的latest对应的具体版本

查询容器镜像时&#xff0c;TAG只显示latest&#xff0c;而不是显示具体的版本号 docker images # 显示内容 REPOSITORY TAG IMAGE ID CREATED SIZE nginx latest 605c77e624dd 20 months ago 141MB redis latest 7614ae945…

three.js——模型对象的使用材质和方法

模型对象的使用材质和方法 前言效果图1、旋转、缩放、平移&#xff0c;居中的使用1.1 旋转rotation&#xff08;.rotateX()、.rotateY()、.rotateZ()&#xff09;1.2缩放.scale()1.3平移.translate()1.4居中.center() 2、材质属性.wireframe 前言 BufferGeometry通过.scale()、…

LeetCode: 4. Median of Two Sorted Arrays

LeetCode - The Worlds Leading Online Programming Learning Platform 题目大意 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。 请你找出这两个有序数组的中位数&#xff0c;并且要求算法的时间复杂度为 O(log(m n))。 你可以假设 nums1 和 nums2 不会同时为空。 …

css动画旋转分层旋转图

1.代码 <template><view class"animations"><view class"animation animation1"><view class"animate1"></view><view class"animate2"></view><view class"animate3">&l…