技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

序文

最近、私はクロスターミナルに適応するために Flutter を書き、人件費を削減するために Android、iOS、HarmonyOS の共通のコード セットを完成させることに忙しくしています。このプロジェクトでは、以前と同じものを実装する必要がありました。 Android ネイティブでは、テキストが最大行数を超えると、末尾が切り詰められ、展開/折りたたみが行われます。最初は慣れていなかったので、最初は Stack を使用して maxLines とオーバーフローを動的に制御し、それを実現するために右下隅にマスクとテキストを配置しました。後で、一部のスクリーンフォンでは一部の部分が恥ずかしい状況になることがわかりました。テキストの一部が覆われ、単語の半分が漏れてしまいます。今日、ようやく実装計画を最適化する時間ができました。

コードを実装する

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class ExpandableText extends StatefulWidget {
  final String text;
  final int maxLines;
  final TextStyle textStyle;
  final String linkTextExpand;
  final String linkTextCollapse;
  final Color linkTextColor;

  const ExpandableText(
      {super.key,
      required this.text,
      this.maxLines = 2,
      this.textStyle = const TextStyle(color: Colors.black),
      this.linkTextColor = Colors.blue,
      this.linkTextExpand = " 展开",
      this.linkTextCollapse = " 收起"});

  @override
  State<StatefulWidget> createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool isExpanded = false;
  late TextSpan expandSpan;
  late TextSpan linkTextSpan;

  @override
  void initState() {
    super.initState();
    expandSpan = TextSpan(
      text: widget.linkTextExpand,
      style: TextStyle(color: widget.linkTextColor),
      recognizer: TapGestureRecognizer()
        ..onTap = () {
          setState(() {
            isExpanded = !isExpanded;
          });
        },
    );

    linkTextSpan = TextSpan(
      text: '...',
      style: widget.textStyle,
      children: [expandSpan],
    );
  }

  /// 检查文本是否溢出
  bool checkOverflow(double width) {
    final textPainter = TextPainter(
      text: TextSpan(text: widget.text, style: widget.textStyle),
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(maxWidth: width);
    return textPainter.height > widget.maxLines * textPainter.preferredLineHeight;
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final maxWidth = constraints.maxWidth;
        final textSpan = TextSpan(
          text: widget.text,
          style: widget.textStyle,
        );

        final textPainter = TextPainter(
          text: textSpan,
          maxLines: isExpanded ? null : widget.maxLines,
          textDirection: TextDirection.ltr,
        );
        textPainter.layout(maxWidth: maxWidth);

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            isExpanded ? _buildExpandedText() : _buildCollapsedText(textPainter, maxWidth),
          ],
        );
      },
    );
  }

  /// 构建折叠状态下的文本
  Widget _buildCollapsedText(TextPainter textPainter, double maxWidth) {
    var truncatedText = widget.text;
    if (checkOverflow(maxWidth)) {
      // 文本的长度超过了最大行数，需要截取然后拼接展开部分的逻辑
      final linkPainter = TextPainter(
        text: linkTextSpan,
        textDirection: TextDirection.ltr,
      );
      linkPainter.layout(maxWidth: maxWidth);
      final position = textPainter.getPositionForOffset(Offset(maxWidth - linkPainter.width, textPainter.height));
      final endOffset = textPainter.getOffsetBefore(position.offset) ?? position.offset;
      truncatedText = widget.text.substring(0, endOffset);
    }

    return RichText(
      text: TextSpan(
        text: truncatedText,
        style: widget.textStyle,
        children: widget.text.length == truncatedText.length ? [] : [linkTextSpan],
      ),
      maxLines: widget.maxLines,
      overflow: TextOverflow.ellipsis,
    );
  }

  /// 构建展开状态下的文本
  Widget _buildExpandedText() {
    final collapseSpan = TextSpan(
      text: widget.linkTextCollapse,
      style: TextStyle(color: widget.linkTextColor),
      recognizer: TapGestureRecognizer()
        ..onTap = () {
          setState(() {
            isExpanded = !isExpanded;
          });
        },
    );

    return RichText(
      text: TextSpan(
        text: widget.text,
        style: widget.textStyle,
        children: [collapseSpan],
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

機能概要

ExpandableText は、長いテキスト コンテンツを表示するために使用されるカスタム Flutter ウィジェットです。テキストの長さが事前に設定された最大行数を超えると、テキストが折りたたまれ、「展開」リンクが表示されます。クリックするとテキストが完全に展開され、もう一度クリックするとテキストが折りたたまれます。

実装の重要なポイント

1.ステータス管理：

StatefulWidget と _ExpandableTextState を使用して、テキストの展開/折りたたみ状態を管理します。
isExpanded 変数はテキストの表示状態を制御します。

2. テキスト処理:

TextPainter コンポーネントと RichText コンポーネントを使用して、テキストを測定しレンダリングします。
テキストが最大行数を超える場合、テキストを計算してインターセプトすることにより、テキストが折りたたまれた状態で正しく表示されることを確認し、「展開」リンクを追加します。

3. インタラクションロジック:

TapGestureRecognizer を介してクリック イベント監視を追加し、「展開」および「折りたたみ」機能を実装します。
setState メソッドは、テキストの表示状態を更新するために使用されます。

4. レスポンシブなレイアウト:

LayoutBuilder を使用して、さまざまな画面サイズやレイアウト環境に対応できる利用可能な幅を取得します。
checkOverflow メソッドは、テキストが設定された最大行数を超えているかどうかを判断するために使用されます。

5. スタイルのカスタマイズ:

maxLines、textStyle、linkTextExpand、linkTextCollapse、linkTextColor などの複数の構成可能なパラメータを提供し、ユーザーがテキストの外観と動作をカスタマイズできるようにします。

6. 使用方法

ExpandableText(
  text: "这是一段很长的文本，它将被折叠起来，只有在点击'展开'链接后才会完全显示。",
  maxLines: 2,
  textStyle: TextStyle(fontSize: 16, color: Colors.black),
  linkTextExpand: " 展开",
  linkTextCollapse: " 收起",
  linkTextColor: Colors.blue,
);
1
2
3
4
5
6
7
8
9

予防

ExpandableText を使用する場合は、テキストの折り返し点が正しく計算されるように、十分なコンテキスト幅を指定してください。
最高の視覚効果を実現するには、実際のニーズに応じてカスタム スタイル パラメータを調整する必要があります。