Flutter自定义MultiChildRenderObjectWidget实现圆环布局效果
一、本文主要是学习巩固一下自定义RenderObject这一块内容，用所了解到的知识实现一个圆环布局效果
- 本篇文章主要参考了
恋猫de小郭Flutter 完整开发实战详解（十六、详解自定义布局实战）文章，大家可以先看完这篇文章再来阅读本篇这样能更好的理解文中代码。 - 源码在文末。
二、效果图
.
根据自组件的数量，平均将所有的子组件摆放在矩形的内切圆上。
三、自定义Layout步骤
- 创建
CircleLayoutWidget类继承MultiChildRenderObjectWidget - 创建
CircleLayoutData类继承ContainerBoxParentData - 创建
CircleLayoutRenderBox类继承RenderBox，同时混入ContainerRenderObjectMixin、RenderBoxContainerDefaultsMixin
关于上面两个混入，在开头引入的文章链接中已经详细说明了
如下代码
class CircleLayoutWidget extends MultiChildRenderObjectWidget {///圆环布局的大小final double size;CircleLayoutWidget({required this.size,required List<Widget> children,Key? key,}) : super(key: key, children: children);@overrideRenderObject createRenderObject(BuildContext context) {return CircleLayoutRenderBox(size);}
}///每个child的数据
class CircleLayoutData extends ContainerBoxParentData<RenderBox> {}
四、这里重点讲一下自定义RenderBox这块操作
- 需要混入上面说到的两个
mixin - 重写
setupParentData函数为每一个child设置数据 - 重写
performLayout函数进行布局大小设置、逻辑编写;同时需要对每一个child进行layout
child.layout(constraints, parentUsesSize: true);
- 重写
paint函数进行child的绘制
class CircleLayoutRenderBox extends RenderBoxwithContainerRenderObjectMixin<RenderBox, CircleLayoutData>,RenderBoxContainerDefaultsMixin<RenderBox, CircleLayoutData> {final double layoutSize;CircleLayoutRenderBox(this.layoutSize);///step 1@overridevoid setupParentData(RenderObject child) {if (child.parentData is! CircleLayoutData) {child.parentData = CircleLayoutData();}}@overridevoid performLayout() {size = Size(layoutSize, layoutSize);///省略部分代码...}@overridevoid paint(PaintingContext context, Offset offset) {defaultPaint(context, offset);}
}
五、这里说下关于每一个child在圆环上的坐标计算
通过画图来理解各个点位的关系，可以得到以下信息
- 半径r是画布大小的一半
r = layoutSize / 2 - 角a根据子组件数量进行计算
∠a = 2 * pi / childCount - 有了上面俩个条件就可以通过三角函数计算出F点的坐标
F(x,y) = (sin(∠a) * r, cos(∠a) * r)
@override
void performLayout() {final double r = layoutSize / 2;///起始角度0double angle = 0;int count = 0;RenderBox? child = firstChild;while (child != null) {child.layout(constraints, parentUsesSize: true);final CircleLayoutData parentData = child.parentData! as CircleLayoutData;///计算当前child所在的角度angle = count * 2 * pi / childCount;parentData.offset = Offset(sin(angle) * r - child.size.width / 2 + r,cos(angle) * r - child.size.height / 2 + r,);///下一个childchild = parentData.nextSibling;count++;}
}
注意：最后还需要对F点进行(x,y) = (x - child.size.width / 2 + r ,y - child.size.height / 2 +r)运算，这是为了让组件的中心在圆弧上同时将坐标原点移动到画布中心
本文所有源码下载
Flutter自定义MultiChildRenderObjectWidget实现圆环布局效果相关推荐
- Android 自定义 圆环,Android自定义view实现圆环效果实例代码
先上效果图,如果大家感觉不错,请参考实现代码. 重要的是如何实现自定义的view效果 (1)创建类,继承view,重写onDraw和onMesure方法 public class CirclePerc ...
- flutter自定义单元格_使用自定义大小的单元格制作复杂的UICollectionView布局（第1部分）
flutter自定义单元格 Recently I built a screen with a pretty complex layout containing self sizing cells. I ...
- android自定义radiogroup,Android 自定义View实现任意布局的RadioGroup效果
前言 RadioGroup是继承LinearLayout,只支持横向或者竖向两种布局.所以在某些情况,比如多行多列布局,RadioGroup就并不适用 . 本篇文章通过继承RelativeLayout ...
- Android横向伸缩,Android 实现伸缩布局效果示例代码
最近项目实现下面的图示的效果,本来想用listview+gridview实现,但是貌似挺麻烦的于是就用flowlayout 来addview实现添加伸缩的效果,实现也比较简单. mainActivit ...
- 【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )
文章目录 一.Flutter 自定义字体 1.ttf 字体文件 2.ttf 字体资源配置 3.获取字体 4.全局使用字体 5.局部使用字体 二.完整代码示例 三.相关资源 一.Flutter 自定义字 ...
- jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码 完成一个完全自己设计的导航栏 ...
- android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果
前言 今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果 不知道这种效果大家叫什么名字?如果有更合适的名字可以在 ...
- android计步器简书,自定义View-仿QQ运动步数进度效果
自定义View-仿QQ运动步数进度效果 一.写在前面 (1) 图一,仿QQ步数运行效果 (2) 图二,完整的圆效果 完整代码请看这 二.正文开始 (1)首先来个三部曲,自定义属性,布局设置,属性获取 ...
- Flutter中的圆角和圆形效果
Flutter中的圆角和圆形效果 第一种:以图片为容器背景,设置容器四角的圆角角度 第二种 ClipRRect 裁剪矩形四角 可自定义圆角度数 第三种 ClipOval 直接就是圆形 第四种 Circ ...
最新文章
- 面试：你知道Java中的回调机制吗？
- 阿里平头哥会和AMD一样成为令英特尔头痛的存在吗？
- 探索客户端JavaScript
- weeklyblogging_20100805PM
- Maven整合SSM测试
- Python中关于XML-RPC原理
- LeetCode66——Plus One（一个整数用数组存储，然后在末尾加1）
- 机器学习入门算法基础视频
- 什么是次梯度（次导数）
- 正则表达式--简单记忆一
- 百度文库复制内容，留作笔记
- 读书笔记-OpenCL编程指南 HelloWorld
- 公差基本偏差代号_基本偏差代号公差等级代号.ppt
- docker容器2：镜像制作
- python与CAD——磨平了棱角的多边形
- 几何语言点C是ab的中点,备战中考:初中数学作图基本步骤及作图语言
- Java实现斗地主的发牌以及展示
- 更换APP启动图标和名称
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
- 你真的需要文档管理软件吗？