L'incapsulamento personalizzato di Flutter implementa la giunzione alla fine del testo...ExpandableText

L'incapsulamento personalizzato di Flutter implementa la giunzione alla fine del testo... espanso/compresso Testo espandibile

2024-07-12

Prefazione

Recentemente, sono stato impegnato a scrivere Flutter per adattarlo ai terminali incrociati, completando un set comune di codici per Android, iOS e HarmonyOS per ridurre i costi di manutenzione della manodopera. Nel progetto, ho riscontrato la necessità di implementare la stessa cosa del precedente Nativo Android quando una parte di testo supera il numero massimo di righe, troncare alla fine e unire espandere/comprimere. All'inizio non lo conoscevo, quindi ho utilizzato Stack per controllare dinamicamente maxLines e overflow e ho inserito una maschera e un testo nell'angolo in basso a destra per ottenerlo. Successivamente ho scoperto che alcuni telefoni con schermo avranno una situazione imbarazzante in cui parte del testo è coperto e metà della parola trapela, oggi ho finalmente il tempo di ottimizzare il piano di attuazione.

Implementare il codice

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

Panoramica funzionale

EspandibileText è un widget Flutter personalizzato utilizzato per visualizzare contenuti di testo lunghi. Quando la lunghezza del testo supera il numero massimo di righe preimpostato, il testo verrà compresso e verrà visualizzato un collegamento "espandi" Fare clic per espandere completamente il testo e fare nuovamente clic per comprimerlo.

Punti chiave di implementazione

1. Gestione dello stato:

Utilizza StatefulWidget e _ExpandableTextState per gestire lo stato espanso/compresso del testo.
La variabile isExpanded controlla lo stato di visualizzazione del testo.

2. Elaborazione del testo:

Utilizza i componenti TextPainter e RichText per misurare ed eseguire il rendering del testo.
Quando il testo supera il numero massimo di righe, calcolando e intercettando il testo, assicurati che il testo venga visualizzato correttamente nello stato compresso e aggiungi un collegamento "espandi".

3. Logica di interazione:

Aggiungi il monitoraggio degli eventi clic tramite TapGestureRecognizer per implementare le funzioni "espandi" e "comprimi".
Il metodo setState viene utilizzato per aggiornare lo stato di visualizzazione del testo.

4. Layout reattivo:

Utilizza LayoutBuilder per ottenere le larghezze disponibili per adattarsi a diverse dimensioni dello schermo e ambienti di layout.
Il metodo checkOverflow viene utilizzato per determinare se il testo supera il numero massimo di righe impostato.

5. Personalizzazione dello stile:

Fornisce più parametri configurabili, come maxLines, textStyle, linkTextExpand, linkTextCollapse, linkTextColor, consentendo agli utenti di personalizzare l'aspetto e il comportamento del testo.

6. Come usare


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

Precauzioni

Quando utilizziExpandableText assicurati di fornire una larghezza di contesto sufficiente in modo che il punto di piegatura del testo venga calcolato correttamente.
I parametri di stile personalizzato devono essere regolati in base alle esigenze effettive per ottenere il miglior effetto visivo.

Condivisione della tecnologia