为中小型企业构建网站,自己做网站平台,网站安全检测软件,北滘大良网站制作文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了跟手指移动的小球相关的内容#xff0c;本章回中将介绍
自定义组件.闲话休提#xff0c;让我们一起Talk Flutter吧。 概念介绍
在项目中有些内容无法通过现有的组件来实现#xff0c;因此需要自定义组件#xf… 文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了跟手指移动的小球相关的内容本章回中将介绍
自定义组件.闲话休提让我们一起Talk Flutter吧。 概念介绍
在项目中有些内容无法通过现有的组件来实现因此需要自定义组件自定义组件通常分为两大类
组合已经有的组件形成新的组件重新绘制组件
组合已经有的组件我们没有专门介绍过不过有类似的内容比如前面章回中实现的阴影就可以看作是通过组合已经有的组件形成新的组件它组合了Text和BoxShadow组件形成了带阴影的文字组件。我们在本章回中主要介绍的是重新绘制组件。
实现方法
重新绘制组件需要使用两个组件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中指定的sizeoverridevoid 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);}overridebool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn true;}
}我们在上面的示例代码中自定义了个圆形圆形的大小和颜色可以通过参数指定。该代码中结合了综合使用了CustomPaint组件和CustomPainter组件。
编译并且运行上面的程序可以看到一个半径为100的蓝色圆形我在这里就演示程序的运行结果了建议大家自己动手去实践。
看官们与自定义组件相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
