关于flutter:在-Flutter-中编写自定义小部件第1部分ー-EllipsizedText

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

原文

https://rlesovyi.medium.com/w...

代码

https://github.com/MatrixDev/...

注释

申明式用户界面在 Flutter 是相当不错，易于应用，它是十分迷人的应用尽可能。然而很多时候，开发人员只是做得太过火了ーー用申明的形式编写所有货色，即便有时候工作能够以更强制性的形式更无效、更容易了解。

每个人都应该明确的---- 在陈说和命令式编程之间必须有一个均衡。每种办法都有本人的用处，每种办法在某些工作上都比其余办法更加杰出。

在本系列文章中，我将形容如何通过从头创立自定义小部件来解决不同的问题。每一个都比前一个略微简单一点。

思考

在查看代码之前，咱们须要晓得一些根本的事件。

Widget ー只是一个不可变的(最好是 const)类，它蕴含 Elements 和 RenderObjects 的配置属性。它还负责创立上述元素和渲染对象。须要了解的重要事件ー小部件从不蕴含状态或任何业务逻辑，只是传递它们。

元素ー是负责理论 UI 树的实体。它蕴含对所有子元素的援用，以及(不像 Widget)对其父元素的援用。元素在大多数状况下都会被重用，除非键或小部件被更改。因而，如果 onlyWidget 属性被更改，即便调配了新的 Widget，Element 也将放弃不变。

State ー只不过是 Element 外部的一个用户定义类，它还公开了一些来自它的回调。

RenderObject ーー负责理论尺寸的计算、子元素的搁置、绘制、触摸事件的解决等。这些对象与 Android 或其余框架的经典视图十分类似。

为什么咱们同时领有元素和渲染对象？因为效率高。每个小部件都有各自的元素，但只有一些有渲染对象。因为这一点，很多布局，触摸和其余档次遍历调用能够省略。

代码

第一个例子是一个非常简单的小部件，它在文本不适宜时用省略号缩放文本。为什么咱们须要这样一个小部件时，内置的文本曾经省略号反对你可能会问？答案很简略---- 到目前为止，它只是通过文字而不是字符来表白 https://github.com/flutter/fl...

那么，咱们开始吧。Flutter 有许多内置的基类和 mixin，它们将帮忙构建齐全自定义的小部件。以下是其中的一些:

LeafRenderObjectWidget 没有 child
SingleChildRenderObjectWidget 一个 child
MultiChildRenderObjectWidget 多个 child

在咱们的例子中，咱们将应用 LeafRenderObjectWidget，因为咱们只须要渲染文本，并且不会有子节点:

enum Ellipsis { start, middle, end }class EllipsizedText extends LeafRenderObjectWidget {  final String text;  final TextStyle? style;  final Ellipsis ellipsis;  const EllipsizedText(    this.text, {    Key? key,    this.style,    this.ellipsis = Ellipsis.end,  }) : super(key: key);  @override  RenderObject createRenderObject(BuildContext context) {    return RenderEllipsizedText()..widget = this;  }  @override  void updateRenderObject(BuildContext context, RenderEllipsizedText renderObject) {    renderObject.widget = this;  }}

咱们创立了咱们的 Widget，惟一不同寻常的是有两种办法:

createRenderObject — 负责理论创立咱们的 RenderObject
updateRenderObject — 当 Widget 的数据发生变化但 RenderObject 放弃不变时，将调用 updateRenderObject ー。在这种状况下，咱们须要更新 RenderObject 中的数据，否则它将出现旧文本

我还须要留神，将每个值从小部件复制到 RenderObject 是首选的。然而我会通过整个 Widget，因为不管怎样它们都是不可变的(而且我懒得编写所有的样板代码)。

当初让咱们从理论的渲染对象开始:

class RenderEllipsizedText extends RenderBox {  var _widgetChanged = false;  var _widget = const EllipsizedText('');  set widget(EllipsizedText widget) {    if (_widget.text == widget.text &&        _widget.style == widget.style &&        _widget.ellipsis == widget.ellipsis) {      return;    }    _widgetChanged = true;    _widget = widget;    markNeedsLayout();  }}

在这里，咱们定义了所有的变量，并编写了一个 setter 来理论更新它们。还有一个查看值是否理论产生了更改的防护措施ー如果没有更改，则没有必要从新计算省略号和重绘文本。

当初咱们须要布局渲染对象。

class RenderEllipsizedText extends RenderBox {  // ...  var _constraints = const BoxConstraints();  @override  void performLayout() {    if (!_widgetChanged && _constraints == constraints && hasSize) {      return;    }    _widgetChanged = false;    _constraints = constraints;    size =_ellipsize(      minWidth: constraints.minWidth,      maxWidth: constraints.maxWidth,    );  }}

布局的过程相当简略。所有咱们须要做的ー依据提供给咱们的束缚计算渲染对象的大小。束缚只形容咱们必须恪守的最小和最大规模。另外，如果没有任何变动，并且在以前的布局传递过程中曾经计算了大小，则增加额定的查看。

理论创立省略号文本的过程相当繁琐，而且必定有更好的解决方案，但我抉择应用二进制搜寻来寻找最佳匹配。

class RenderEllipsizedText extends RenderBox {  // ...  final _textPainter = TextPainter(textDirection: TextDirection.ltr);  Size _ellipsize({required double minWidth, required double maxWidth}) {    final text = _widget.text;    if (_layoutText(length: text.length, minWidth: minWidth) > maxWidth) {      var left = 0;      var right = text.length - 1;      while (left < right) {        final index = (left + right) ~/ 2;        if (_layoutText(length: index, minWidth: minWidth) > maxWidth) {          right = index;        } else {          left = index + 1;        }      }      _layoutText(length: right - 1, minWidth: minWidth);    }    return constraints.constrain(Size(_textPainter.width, _textPainter.height));  }}

我不会讲完所有这些逻辑(如果你违心，你能够通过它来浏览)。然而重要的是 TextPainter 是用来计算文本大小的。如果文本大小长于咱们的束缚，我会尽量使它越来越短，直到它合乎咱们的束缚。

_layoutText 用来计算咱们裁剪后的文本大小:

double _layoutText({required int length, required double minWidth}) {  final text = _widget.text;  final style = _widget.style;  final ellipsis = _widget.ellipsis;  String ellipsizedText = '';  switch (ellipsis) {    case Ellipsis.start:      if (length > 0) {        ellipsizedText = text.substring(text.length - length, text.length);        if (length != text.length) {          ellipsizedText = '...' + ellipsizedText;        }      }      break;    case Ellipsis.middle:      if (length > 0) {        ellipsizedText = text;        if (length != text.length) {          var start = text.substring(0, (length / 2).round());          var end = text.substring(text.length - start.length, text.length);          ellipsizedText = start + '...' + end;        }      }      break;    case Ellipsis.end:      if (length > 0) {        ellipsizedText = text.substring(0, length);        if (length != text.length) {          ellipsizedText = ellipsizedText + '...';        }      }      break;  }  _textPainter.text = TextSpan(text: ellipsizedText, style: style);  _textPainter.layout(minWidth: minWidth, maxWidth: double.infinity);  return _textPainter.width;}

差不多就是这样了，咱们剩下要做的就是——实际上画出咱们的文本。

@overridevoid paint(PaintingContext context, Offset offset) {  _textPainter.paint(context.canvas, offset);}

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego...