Flutter中一个能获取行数的Wrap

站长

2024年03月30日 18:38 · 阅读数 39

背景

如图所示，在我们某一版本开发中，UI设计折扣信息如果一行显示不下的话显示展开按钮，且默认展示一行，点击展开按钮才显示全部信息。 Flutter中一个能获取行数的Wrap

在Flutter中，我们通常使用Wrap组件来显示这种有多个子组件的UI，但在这个设计中Wrap却无法满足我们的需要，因为wrap 组件无法限制行数显示。这就需要我们自定义组件

自定义组件的几种方式

在Flutter中，我们通常可以通过

组合其他widget
自绘组件，比如通过CustomPaint绘制
实现RenderObject

第一种方式是我们经常使用的方式，Flutter提供了丰富的组件，我们可以通过拼装组合不同的组件来实现我们的目的。

第二种可以用来实现自定义样式，比如不规则的图案，进度条等。

第三种的RenderObject 就是Flutter三棵树中渲染树中的一个对象，是真正的渲染对象，组件的Layout、渲染都是通过该对象实现的。

方案

最初我是通过Wrap + OverflowBox + Container的方式来实现的，但这样的实现不够优雅，而且限制较多，所以后面更改了实现方式

这里是采用实现RenderObject对象来自定义组件。自定义LimitedWrap 组件,由于会有多个子组件，所以这里跟Wrap一样继承自MultiChildRenderObjectWidget。这里我们需要实现createRenderObject 方法返回一个RenderObject对象。

  @override
  RenderObject createRenderObject(BuildContext context) {
    return LimitRenderWrap(
      maxLine: maxLine,
      runSpacing: runSpacing,
      spacing: spacing,
      afterLayout: afterLayout,
    );
  }

这里自定义LimitRenderWrap,继承自RenderBox, 这是RenderObject的子类。这里有两个属性需要说明一下：

maxLine：最多显示多少行，传入0表示显示全部 afterLayout：布局结束之后的回调

对于RenderObject 对象来说，最重要的是进行两件事：

布局
绘制

也就是需要实现performLayout和paint 方法。在performLayout方法中，主要需要做以下几个事情：

布局子组件
记录当前行数
计算子组件的偏移量
确定自身的大小

这里需要额外介绍一下RenderObject的parentData属性。该属性是一个预留属性，主要用来保存一些布局数据，可以通过setupParentData方法设置：

  @override
  void setupParentData(covariant RenderObject child) {
    if (child.parentData is! _LimitedWrapParentData) {
      child.parentData = _LimitedWrapParentData();
    }
  }

_LimitedWrapParentDataperformLayout的实现：

  @override
  void performLayout() {
    RenderBox? child = firstChild;
    final constraints = this.constraints;
    _displayChildCount = 0;
    _displayLineCount = 0;

    if (child == null) {
      size = constraints.smallest;
      _callBack();
      return;
    }
    final mainAxisLimit = constraints.maxWidth;
    final spacing = this.spacing;
    final runSpacing = this.runSpacing;
    final maxLine = this.maxLine;
    final BoxConstraints childConstraints = BoxConstraints(maxWidth: constraints.maxWidth);

    // 当前显示的是第几行
    int runLine = 0;
    // 当前行子元素的个数
    int childCount = 0;
    // 当前行横向占据的空间
    double runMainAxisExtent = 0.0;
    // 当前行最大的高度
    double runCrossAxisExtent = 0.0;
    // 计算size使用
    // 整个组件横向最大的空间
    double mainAxisExtent = 0.0;
    // 整个组件纵向最大的高度
    double crossAxisExtent = 0.0;

    while (child != null) {
      child.layout(childConstraints, parentUsesSize: true);
      final childWidth = child.size.width;
      final childHeight = child.size.height;
      final childParentData = child.parentData! as _LimitedWrapParentData;
      if (childCount > 0 && runMainAxisExtent + spacing + childWidth > mainAxisLimit) {
        // 换行
        if (maxLine > 0 && runLine >= maxLine - 1) {
          childParentData._limit = true;
          break;
        }

        mainAxisExtent = math.max(mainAxisExtent, runMainAxisExtent);
        crossAxisExtent += runCrossAxisExtent;
        if (runLine > 0) crossAxisExtent += runSpacing;
        // 保存当前行数
        runLine += 1;
        childCount = 0;
        runMainAxisExtent = 0.0;
        runCrossAxisExtent = 0.0;
      }

      // 计算子组件的偏移量
      double dx = runMainAxisExtent;
      double dy = crossAxisExtent;
      if (childCount > 0) dx += spacing;
      if (runLine > 0) dy += runSpacing;
      childParentData.offset = Offset(dx, dy);

      // 记录当前行的最高、最宽
      runMainAxisExtent += childWidth;
      if (childCount > 0) runMainAxisExtent += spacing;
      runCrossAxisExtent = math.max(runCrossAxisExtent, childHeight);

      childCount += 1;
      childParentData._limit = false;
      child = childParentData.nextSibling;
      _displayChildCount += 1;
    }
    // 计算size
    if (childCount > 0) {
      mainAxisExtent = math.max(mainAxisExtent, runMainAxisExtent);
      crossAxisExtent += runCrossAxisExtent;
      if (runLine > 0) crossAxisExtent += runSpacing;
    }
    size = constraints.constrain(Size(mainAxisExtent, crossAxisExtent));
    // 显示的行数
    _displayLineCount = runLine + 1;

    _callBack();
  }  


  _callBack() {
    if (afterLayout != null) {
    SchedulerBinding.instance!.addPostFrameCallback((timeStamp) => afterLayout!(this));
    }
  }

这里有一点需要注意，不能直接调用回调方法，原因是当前组件布局结束之后其他组件可能并没有完成布局，如果在回调中触发了UI更新（setState）就会报错，所以需要在frame结束之后触发回调

下面是paint的方法实现：

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

  @override
  void defaultPaint(PaintingContext context, Offset offset) {
    RenderBox? child = firstChild;
    final maxLine = this.maxLine;
    while (child != null) {
      final childParentData = child.parentData! as _LimitedWrapParentData;
      if (maxLine > 0 && childParentData._limit) break;
      child.paint(context, offset + childParentData.offset);
      child = childParentData.nextSibling;
    }
  }

当实现完这些之后在真机运行，确实能满足我的期望，但是在模拟器运行时却报错如下：


======== Exception caught by scheduler library =====================================================
The following assertion was thrown during a scheduler callback:
Updated layout information required for RenderSemanticsAnnotations#16051 NEEDS-LAYOUT NEEDS-PAINT to calculate semantics.
'package:flutter/src/rendering/object.dart':
Failed assertion: line 3232 pos 12: '!_needsLayout'


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

这是因为我们之前只将我们需要的子组件进行了layout，而对于flutter组件来说所有的子组件都应该得到布局，所以即使可能有些子组件不需要绘制，但也需要对其进行布局：

 if (childCount > 0 &&
          runMainAxisExtent + spacing + childWidth > mainAxisLimit) {
        // 换行
        if (maxLine > 0 && runLine >= maxLine - 1) {
          childParentData._limit = true;
          // 布局剩余子组件
          _layoutRemainChildren(child, childConstraints);
          break;
        }
        // ...
      }  // 对不显示的子组件布局
  void _layoutRemainChildren(
      RenderBox? widget, BoxConstraints childConstraints) {
    RenderBox? child = widget;
    while (child != null) {
      child.layout(childConstraints, parentUsesSize: true);
      final childParentData = child.parentData as _LimitedWrapParentData;
      child = childParentData.nextSibling;
    }
  }

最终效果： Flutter中一个能获取行数的Wrap

源码：github.com/lwy121810/m… 大家可以下载运行看下，欢迎🌟～

转载自:https://juejin.cn/post/7331301209339707444