La encapsulación personalizada de Flutter implementa el empalme al final del texto... ExpandableText

La encapsulación personalizada de Flutter implementa el empalme al final del texto... expandido/contraído ExpandableText

2024-07-12

Prefacio

Recientemente, estuve ocupado escribiendo Flutter para adaptarlo a terminales cruzados y completar un conjunto común de códigos para Android, iOS y HarmonyOS para reducir los costos de mano de obra y mantenimiento. En el proyecto, encontré la necesidad de implementar lo mismo que el anterior. Nativo de Android, cuando un fragmento de texto excede el número máximo de líneas, se trunca al final y se expande/contrae. Al principio no estaba familiarizado con él, así que primero usé Stack para controlar dinámicamente maxLines y el desbordamiento, y puse una máscara y texto en la esquina inferior derecha para lograrlo. Más tarde descubrí que algunos teléfonos con pantalla tendrán una situación embarazosa. Se cubre parte del texto y se filtra la mitad de la palabra, hoy finalmente tengo tiempo para optimizar el plan de implementación.

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

Descripción funcional

ExpandableText es un widget de Flutter personalizado que se utiliza para mostrar contenido de texto largo. Cuando la longitud del texto excede el número máximo preestablecido de líneas, el texto se contraerá y se mostrará un enlace "expandir". Haga clic para expandir completamente el texto y haga clic nuevamente para contraer el texto.

Puntos clave de implementación

1. Gestión de estados:

Utilice StatefulWidget y _ExpandableTextState para administrar el estado expandido/contraído del texto.
La variable isExpanded controla el estado de visualización del texto.

2. Procesamiento de textos:

Utilice los componentes TextPainter y RichText para medir y representar texto.
Cuando el texto excede el número máximo de líneas, al calcular e interceptar el texto, asegúrese de que el texto se muestre correctamente en el estado contraído y agregue un enlace "expandir".

3. Lógica de interacción:

Agregue monitoreo de eventos de clic a través de TapGestureRecognizer para implementar las funciones de "expandir" y "contraer".
El método setState se utiliza para actualizar el estado de visualización del texto.

4. Diseño responsivo:

Utilice LayoutBuilder para obtener anchos disponibles para adaptarse a diferentes tamaños de pantalla y entornos de diseño.
El método checkOverflow se utiliza para determinar si el texto excede el número máximo de líneas establecido.

5. Personalización de estilo:

Proporciona múltiples parámetros configurables, como maxLines, textStyle, linkTextExpand, linkTextCollapse, linkTextColor, lo que permite a los usuarios personalizar la apariencia y el comportamiento del texto.

6. Cómo utilizar


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

Precauciones

Cuando utilice ExpandableText, asegúrese de proporcionar suficiente ancho de contexto para que el punto de plegado del texto se calcule correctamente.
Los parámetros de estilo personalizados deben ajustarse según las necesidades reales para lograr el mejor efecto visual.

Compartir tecnología