详细可以访问仓库 HcUi: 重复创造Flutter 的轮子在原有组件上拓展展现出新的特性 (gitee.com)

介绍

对长文本进行省略展示,支持展开/收起,对省略位置可以自定义

c2b2bc33-ed77-4ad3-b50d-51d003bf5c52.gif

代码演示

基础用法

      HcTextEllipsis(
            content:"生态文明建设是关系中华民族永续发展的根本大计。总书记指出，要把建设美丽中国摆在强国建设、民族复兴的突出位置，以高品质生态环境支撑高质量发展，加快推进人与自然和谐共生的现代化。各地坚持以习近平生态文明思想为指引，牢固树立和践行绿水青山就是金山银山的理念，以更高站位、更宽视野、更大力度，全面推进美丽中国建设。"
          ),

最大显示行数

          HcTextEllipsis(
            maxLines: 2,
            content:"生态文明建设是关系中华民族永续发展的根本大计。总书记指出，要把建设美丽中国摆在强国建设、民族复兴的突出位置，以高品质生态环境支撑高质量发展，加快推进人与自然和谐共生的现代化。各地坚持以习近平生态文明思想为指引，牢固树立和践行绿水青山就是金山银山的理念，以更高站位、更宽视野、更大力度，全面推进美丽中国建设。"
          ),

省略符位置

 HcTextEllipsis(
            maxLines: 2,
            position: HcTextEllipsisPosition.center,
            content:"生态文明建设是关系中华民族永续发展的根本大计。总书记指出，要把建设美丽中国摆在强国建设、民族复兴的突出位置，以高品质生态环境支撑高质量发展，加快推进人与自然和谐共生的现代化。各地坚持以习近平生态文明思想为指引，牢固树立和践行绿水青山就是金山银山的理念，以更高站位、更宽视野、更大力度，全面推进美丽中国建设。"
          ),

替换省略符

          HcTextEllipsis(
            maxLines: 2,
            ellipsisDots: "~~~",
            position: HcTextEllipsisPosition.center,
            content:"生态文明建设是关系中华民族永续发展的根本大计。总书记指出，要把建设美丽中国摆在强国建设、民族复兴的突出位置，以高品质生态环境支撑高质量发展，加快推进人与自然和谐共生的现代化。各地坚持以习近平生态文明思想为指引，牢固树立和践行绿水青山就是金山银山的理念，以更高站位、更宽视野、更大力度，全面推进美丽中国建设。"
          ),

展开按钮单独显示

          HcTextEllipsis(
            maxLines: 2,
            ellipsisDots: "~~~",
            separateShow: false,
            position: HcTextEllipsisPosition.center,
            content:"生态文明建设是关系中华民族永续发展的根本大计。总书记指出，要把建设美丽中国摆在强国建设、民族复兴的突出位置，以高品质生态环境支撑高质量发展，加快推进人与自然和谐共生的现代化。各地坚持以习近平生态文明思想为指引，牢固树立和践行绿水青山就是金山银山的理念，以更高站位、更宽视野、更大力度，全面推进美丽中国建设。"
          ),

点击按钮的回调

       HcTextEllipsis(
              maxLines: 5,
              ellipsisDots: "...",
              separateShow: false,
              showEllipsisBtn: true,
              position: HcTextEllipsisPosition.center,
              callback: (bool state) {
                //设定回调后手动控制是否展开 返回true为展开 false为不展开
                return Future.value(!state);
              },
              content:
                  "生态文明建设是关系中华民族永续发展的根本大计。总书记指出，要把建设美丽中国摆在强国建设、民族复兴的突出位置，以高品质生态环境支撑高质量发展，加快推进人与自然和谐共生的现代化。各地坚持以习近平生态文明思想为指引，牢固树立和践行绿水青山就是金山银山的理念，以更高站位、更宽视野、更大力度，全面推进美丽中国建设。"),

API

props

参数	说明	类型	默认值	是否必填
maxLines	需要展示的行数	int	1	true
content	文字内容	String	-	true
expandText	展开按钮的文字内容	String	展开	true
collapseText	收起按钮的文字内容	String	收起	true
ellipsisDots	省略符	String	...	true
position	分隔符的位置	HcTextEllipsisPosition	end	true
isExpand	默认是否展开	bool	false	true
showEllipsisBtn	是否展示更多的按钮	bool	false	true
separateShow	按钮是否单独展示	bool	false	true
contentStyle	文字的字体样式	TextStyle?	-	false
btnTextStyle	按钮的文字样式	TextStyle?	-	false
callback	点击的时候回调	HcTextEllipsisCallback	-	false

HcTextEllipsisPosition

展示省略符号位置

参数名	说明
start	开头
center	中部
end	结尾

Function

方法名	说明	参数	返回类型
HcTextEllipsisCallback	点击按钮后的回调	Function(bool)	Future<bool?>

项目源码

enum HcTextEllipsisPosition { start, center, end }

typedef HcTextEllipsisCallback = Future<bool?> Function(bool);

class HcTextEllipsis extends StatefulWidget {
  //需要展示的行数
  final int maxLines;

  //文字内容
  final String content;

  //展开的文字
  final String expandText;

  //折叠的文字
  final String collapseText;

  ///分隔符
  final String ellipsisDots;

  /// 文本的样式
  final TextStyle contentStyle;

  //按钮的 文字样式
  final TextStyle btnTextStyle;

  //点击按钮的回调
  final HcTextEllipsisCallback? callback;

  //分割符的位置
  final HcTextEllipsisPosition position;

  //是否展开
  final bool isExpand;

  //是否单独显示
  final bool separateShow;

  //是否展示拓展按钮
  final bool showEllipsisBtn;

  const HcTextEllipsis(
      {Key? key,
      this.isExpand = false,
      this.maxLines = 1,
      required this.content,
      this.expandText = "展开",
      this.collapseText = "收起",
      this.ellipsisDots = "...",
      this.position = HcTextEllipsisPosition.end,
      this.contentStyle = const TextStyle(color: Colors.black, fontSize: 16),
      this.callback,
      this.btnTextStyle = const TextStyle(
          color: Colors.blue, fontSize: 14, fontWeight: FontWeight.w500),
      this.separateShow = false,
      this.showEllipsisBtn = true})
      : super(key: key);

  @override
  State<HcTextEllipsis> createState() => _HcTextEllipsisState();
}

class _HcTextEllipsisState extends State<HcTextEllipsis> {
  //是否展开
  bool _isExpand = false;

  //组件的大小
  Size _viewSize = const Size(0, 0);

  //按钮组件的宽度
  double btnWidth = 0.0;

  //省略符号的宽度
  double dotWidth = 0.0;

  //文字高度
  double fontHeight = 0.0;

  //ellipsisLineWidth;
  double ellipsisLineWidth = 0.0;

  @override
  void initState() {
    super.initState();
    _isExpand = widget.isExpand;
  }

  @override
  void didUpdateWidget(covariant HcTextEllipsis oldWidget) {
    super.didUpdateWidget(oldWidget);
    _isExpand = widget.isExpand;
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, size) {
      //按钮的宽度
      btnWidth =
          HcStringUtil.boundingTextSize(widget.expandText, widget.btnTextStyle)
              .width;
      //文字的宽度与高度
      Size fontSize = HcStringUtil.boundingTextSize(
          widget.ellipsisDots, widget.contentStyle);
      dotWidth = fontSize.width;
      fontHeight = fontSize.height;
      //组件最大长度
      _viewSize = Size(size.maxWidth, size.maxHeight);
      //获取painter信息
      TextPainter painter = HcStringUtil.getTextInfo(
          widget.content, widget.contentStyle,
          maxLines: widget.maxLines, width: _viewSize.width);

      // 如果不满一行直接显示
      if (!painter.didExceedMaxLines) {
        return Text(widget.content, style: widget.contentStyle);
      }
      String result = "";
      String content = widget.content;
      switch (widget.position) {
        case HcTextEllipsisPosition.start:
          result = _buildEllipsisStartText(content, widget.maxLines);
          break;
        case HcTextEllipsisPosition.center:
          if (widget.maxLines == 1) {
            ellipsisLineWidth = _viewSize.width -
                (!widget.separateShow && widget.showEllipsisBtn
                    ? btnWidth
                    : 0) -
                dotWidth;
            int start = HcStringUtil.getTextInfo(content, widget.contentStyle,
                    width: (ellipsisLineWidth ~/ 2).toDouble())
                .getPositionForOffset(
                    Offset((ellipsisLineWidth ~/ 2).toDouble(), 0))
                .offset;
            result = content.substring(0, start);
            result += widget.ellipsisDots;
            content = HcStringUtil.reverseString(content);
            int end = HcStringUtil.getTextInfo(content, widget.contentStyle,
                    width:
                        ellipsisLineWidth - (ellipsisLineWidth ~/ 2).toDouble())
                .getPositionForOffset(Offset(
                    ellipsisLineWidth - (ellipsisLineWidth ~/ 2).toDouble(), 0))
                .offset;
            result += HcStringUtil.reverseString(content.substring(0, end));
          } else {
            double halfLine = (widget.maxLines ~/ 2).toDouble();
            result += _buildEllipsisEndText(content, widget.maxLines - halfLine,
                showEllipsis: false);
            result += _buildEllipsisStartText(content, halfLine);
          }
          break;
        case HcTextEllipsisPosition.end:
          result = _buildEllipsisEndText(content, widget.maxLines);
          break;
      }

      return RichText(
        text: TextSpan(
            text: _isExpand ? widget.content : result,
            style: widget.contentStyle,
            children: [if (widget.showEllipsisBtn) _ellipsisBtn()]),
      );
    });
  }

  InlineSpan _ellipsisBtn() {
    return TextSpan(
        text: _isExpand ? widget.collapseText : widget.expandText,
        style: widget.btnTextStyle,
        recognizer: TapGestureRecognizer()
          ..onTap = () async {
            bool isExpand = !_isExpand;
            if (widget.callback != null) {
              try {
                isExpand = await widget.callback!.call(_isExpand) ?? isExpand;
              } finally {}
            }
            setState(() {
              _isExpand = isExpand;
            });
          });
  }

  String _buildEllipsisStartText(content, maxLines) {
    String result = "";
    // 反转文字截取最后
    content = HcStringUtil.reverseString(content);
    // 获取文字展示宽度
    ellipsisLineWidth = _viewSize.width -
        (!widget.separateShow && widget.showEllipsisBtn ? btnWidth : 0) -
        (widget.maxLines == 1 ? dotWidth : 0);
    // 获取阶段位置
    int lastLineIndex = HcStringUtil.getTextInfo(content, widget.contentStyle,
            width: _viewSize.width)
        .getPositionForOffset(Offset(ellipsisLineWidth, 0))
        .offset;
    // 判断阶段位置展示的文字是否超过最大限度
    double resultWidth = HcStringUtil.boundingTextSize(
            content.substring(0, lastLineIndex), widget.contentStyle)
        .width;
    // 修正最大截取距离
    lastLineIndex =
        resultWidth > ellipsisLineWidth ? lastLineIndex - 1 : lastLineIndex;
    String temp = content.substring(0, lastLineIndex);
    if (maxLines > 1) {
      content = content.substring(lastLineIndex);
      if (maxLines > 2) {
        int centerIndex = HcStringUtil.getTextInfo(content, widget.contentStyle,
                width: _viewSize.width)
            .getPositionForOffset(
                Offset(_viewSize.width, fontHeight * (maxLines - 3)))
            .offset;
        temp += content.substring(0, centerIndex);

        content = content.substring(centerIndex);
      }
      int firstIndex = HcStringUtil.getTextInfo(content, widget.contentStyle,
              width: _viewSize.width - dotWidth)
          .getPositionForOffset(Offset(_viewSize.width - dotWidth, 0))
          .offset;
      temp += content.substring(0, firstIndex);
    }

    result = widget.ellipsisDots;
    result += HcStringUtil.reverseString(temp);
    return result;
  }

  String _buildEllipsisEndText(content, maxLines, {bool showEllipsis = true}) {
    String result = "";
    if (maxLines > 1) {
      int position = HcStringUtil.getTextInfo(content, widget.contentStyle,
              width: _viewSize.width)
          .getPositionForOffset(
              Offset(_viewSize.width, fontHeight * (maxLines - 2)))
          .offset;
      result = content.substring(0, position);
      content = content.substring(position);
    }
    ellipsisLineWidth = _viewSize.width -
        (showEllipsis && (!widget.separateShow && widget.showEllipsisBtn)
            ? btnWidth
            : 0) -
        dotWidth;
    int position = HcStringUtil.getTextInfo(content, widget.contentStyle,
            width: ellipsisLineWidth)
        .getPositionForOffset(Offset(ellipsisLineWidth, 0))
        .offset;
    result += content.substring(0, position);
    if (showEllipsis) {
      result += widget.ellipsisDots;
    }
    return result;
  }
}
 static Size boundingTextSize(String text, TextStyle style,
      {int maxLines = 2 ^ 31,
      double maxWidth = double.infinity,
      textDirection = TextDirection.ltr}) {
    if (text.isEmpty) {
      return Size.zero;
    }
    final TextPainter textPainter = TextPainter(
        textDirection: textDirection,
        text: TextSpan(text: text, style: style),
        maxLines: maxLines)
      ..layout(maxWidth: maxWidth);
    return textPainter.size;
  }

  /// 获取文字信息
  static TextPainter getTextInfo(String text, TextStyle style,
      {int maxLines = 2 ^ 23,
      double width = double.infinity,
      String? ellipsis,
      textDirection = TextDirection.ltr}) {
    TextSpan span = TextSpan(text: text, style: style);
    return TextPainter(
      text: span,
      maxLines: maxLines,
      ellipsis: ellipsis,
      textDirection: textDirection,
    )..layout(maxWidth: width);
  }

  ///翻转文字
  static String reverseString(String str) {
    return str.split("").reversed.join();
  }

Flutter 重复造轮子 (9) Ellipsis 省略文字组件的封装

Flutter 重复造轮子 (9) Ellipsis 省略文字组件的封装

介绍

代码演示

基础用法

最大显示行数

省略符位置

替换省略符

展开按钮单独显示

点击按钮的回调

API

props

HcTextEllipsisPosition

Function

项目源码

推荐阅读更多精彩内容

Flutter 重复造轮子 (9) Ellipsis 省略文字组件 的封装

介绍

代码演示

基础用法

最大显示行数

省略符位置

替换省略符

展开按钮单独显示

点击按钮的回调

API

props

HcTextEllipsisPosition

Function

项目源码

推荐阅读更多精彩内容

Flutter 重复造轮子 (9) Ellipsis 省略文字组件的封装