[Fluth]テキストにcustom省略記号を適用する

テキストがoverflowであれば、...に設定してellipsisを表示することができるが、...ではなく더보기を与えたい場合がある.これは比較的複雑な方法であるが、custion ellipsisおよびTextPainterを使用して、Custom CustomPainterに適したellipsis構成要素を作成することができる.

import 'package:flutter/material.dart';

class CustomEllipsisText extends StatelessWidget {
  const CustomEllipsisText({
    Key? key,
    required this.text,
    this.style,
    required this.ellipsis,
    this.maxWidth = double.infinity,
    this.minWidth = 0,
    this.maxLines = 1,
    this.textDirection,
  }) : super(key: key);

  final String text;
  final TextStyle? style;
  final String ellipsis;
  final int maxLines;
  final double maxWidth, minWidth;
  final TextDirection? textDirection;

  @override
  Widget build(BuildContext context) {
    TextPainter textPainter = TextPainter(
      text: TextSpan(text: text, style: style),
      maxLines: maxLines,
      textDirection: textDirection ?? TextDirection.ltr,
    )..layout(minWidth: minWidth, maxWidth: maxWidth);

    return CustomPaint(
        size: textPainter.size,
        painter: _CustomEllipsisTextPainter(
          text: TextSpan(text: text, style: style),
          ellipsis: ellipsis,
          maxLines: maxLines,
        ));
  }
}

class _CustomEllipsisTextPainter extends CustomPainter {
  final TextSpan text;
  final int maxLines;
  final String ellipsis;

  _CustomEllipsisTextPainter({
    required this.text,
    required this.ellipsis,
    required this.maxLines,
  }) : super();

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;

  @override
  void paint(Canvas canvas, Size size) {
    TextPainter painter = TextPainter(
      text: text,
      maxLines: maxLines,
      textDirection: TextDirection.ltr,
    )..ellipsis = ellipsis;
    painter.layout(maxWidth: size.width);
    painter.paint(canvas, const Offset(0, 0));
  }
}

コード注意:Fluthでテキストを展開
Flutter開発者のためにDiscoコミュニティをオープンしました!
[ディスコサーバリンク]

アクセスすると、問題を簡単に残したり、会話をしたりすることができます.
皆さん、どうぞご参加ください.