代码编织梦想

简单例子:该例子让多个子View垂直排列

class LinearLayout extends MultiChildRenderObjectWidget {

  LinearLayout({
    Key key,
    List<Widget> child
  }): super(key: key , children: child);

  @override
  RenderObject createRenderObject(BuildContext context) => RenderLayout();
}

class PageParentData extends ContainerBoxParentData<RenderBox> {}

class RenderLayout extends RenderBox with ContainerRenderObjectMixin<RenderBox, PageParentData>,RenderBoxContainerDefaultsMixin<RenderBox, PageParentData>{

  @override
  void setupParentData(RenderBox child) {
    if (child.parentData is! PageParentData)
      child.parentData = PageParentData();
  }

  @override
  void performLayout() {
    //测量自身大小
    size = constraints.constrain(Size(double.infinity,double.infinity));
    double dx = 0, dy = 0;
    RenderBox child = firstChild;
    while(child != null) {
      PageParentData childParentData = child.parentData;
      child.layout(constraints.heightConstraints(), parentUsesSize: true);
      //设置子View的坐标
      childParentData.offset = Offset(dx, dy);
      //dx += child.size.width;
      dy += child.size.height;
      child = childParentData.nextSibling;
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    defaultPaint(context, offset);
  }
}

使用:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: Container(
        child: LinearLayout(
          child: <Widget>[
            Text(
                "第一行第一行第一行第一行"
            ),
            Text(
                "第二行第二行第二行第二行第二行"
            ),
            Text(
                "第三行第三行第三行第三行第三行第三行第三行"
            )
          ],
        ),
      ),
    );
  }

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_16009381/article/details/111101404

Flutter自定义布局排列:单个子View-爱代码爱编程

简单例子:该例子实现了子View居中对齐效果 class CenterLayout extends SingleChildRenderObjectWidget { CenterLayout({ Key key, Widget child }): super(key: key , child: child); @overri

Flutter iOS风格中Widget内容滑到了顶部导航栏后面与其重叠-爱代码爱编程

Flutter 开发问题点一览 Flutter iOS风格中Widget内容滑到了顶部导航栏后面与其重叠Flutter iOS风格文本输入框CupertinoTextField光标在Android中未与提示文本对齐 文章目录 Flutter 开发问题点一览1. 问题描述2. 原因、对策3. 源码分析 1. 问题描述 Flutter在iOS风格

排序算法复习(上篇)-爱代码爱编程

排序算法概述 排序就是将一组对象按照某种逻辑顺序重新排列的过程。比如,订单按照日期排序的——这种排序很可能使用了某种排序算法。在计算时代早期,大家普遍认为30% 的计算周期都用在了排序上。如果今天这个比例降低了,可能的原因之一是如今的排序算法更加高效,而并非排序的重要性降低了。现在计算机的广泛使用使得数据无处不在,而整理数据的第一步通常就是进行排序。几乎

记录安装flutter的一些坑-爱代码爱编程

记录Flutter 安装出现的一些问题 1 首先下载Flutter sdk 建议安装最新版 下载地址https://www.baidu.com/link?url=L5t4aE9yfDnUkfVgc7CXvvZ4HmjYod_GnvSqMqOv646EZBhIJMospzbR2ezCbBYz1V9D8svA5quwyYnfAga5UK&wd=&am

Flutter iOS风格文本输入框CupertinoTextField光标在Android中未与提示文本对齐-爱代码爱编程

Flutter 开发问题点一览 Flutter iOS风格中Widget内容滑到了顶部导航栏后面与其重叠Flutter iOS风格文本输入框CupertinoTextField光标在Android中未与提示文本对齐 文章目录 Flutter 开发问题点一览1. 问题描述2. 原因、对策3. 源码分析 1. 问题描述 Flutter iOS风格