O encapsulamento personalizado do Flutter implementa emenda no final do texto...ExpandableText

O encapsulamento personalizado do Flutter implementa a emenda no final do texto... expandido/recolhido ExpandableText

2024-07-12

Prefácio

Recentemente, tenho estado ocupado escrevendo Flutter para se adaptar a terminais cruzados, completando um conjunto comum de códigos para Android, iOS e HarmonyOS para reduzir custos de manutenção de mão de obra. No projeto, encontrei a necessidade de implementar a mesma coisa que o anterior. Nativo do Android quando um trecho de texto excede o número máximo de linhas, trunca no final e emenda, expande/retrai. Eu não estava familiarizado com isso no início, então usei primeiro Stack para controlar dinamicamente maxLines e overflow, e coloquei uma máscara e texto no canto inferior direito para conseguir isso. Mais tarde, descobri que alguns telefones com tela terão uma situação embaraçosa onde parte. do texto está coberto e metade da palavra vaza, hoje finalmente tenho tempo para otimizar o plano de implementação.

Implementar código

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

Visão geral funcional

ExpandableText é um widget Flutter personalizado usado para exibir conteúdo de texto longo. Quando o comprimento do texto exceder o número máximo predefinido de linhas, o texto será recolhido e um link "expandir" será exibido. Clique para expandir totalmente o texto e clique novamente para recolhê-lo.

Principais pontos de implementação

1. Gerenciamento de status:

Use StatefulWidget e _ExpandableTextState para gerenciar o estado expandido/recolhido do texto.
A variável isExpanded controla o estado de exibição do texto.

2. Processamento de texto:

Use os componentes TextPainter e RichText para medir e renderizar texto.
Quando o texto ultrapassar o número máximo de linhas, ao calcular e interceptar o texto, certifique-se de que o texto seja exibido corretamente no estado recolhido e adicione um link "expandir".

3. Lógica de interação:

Adicione monitoramento de eventos de clique por meio do TapGestureRecognizer para implementar as funções "expandir" e "recolher".
O método setState é usado para atualizar o estado de exibição do texto.

4. Layout responsivo:

Use o LayoutBuilder para obter larguras disponíveis para acomodar diferentes tamanhos de tela e ambientes de layout.
O método checkOverflow é usado para determinar se o texto excede o número máximo de linhas definido.

5. Personalização de estilo:

Fornece vários parâmetros configuráveis, como maxLines, textStyle, linkTextExpand, linkTextCollapse, linkTextColor, permitindo aos usuários personalizar a aparência e o comportamento do texto.

6. Como usar


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

Precauções

Ao usar ExpandableText, certifique-se de fornecer largura de contexto suficiente para que o ponto de dobra do texto seja calculado corretamente.
Os parâmetros de estilo personalizado devem ser ajustados de acordo com as necessidades reais para obter o melhor efeito visual.

Compartilhamento de tecnologia