Flutter小技巧：如何实现多行文字展开收起

在 Flutter 中实现多行文本展开/收起功能

前言

在 Flutter 应用中，展示多行文本时，需要考虑文本的合理展示，以充分利用有限的空间。本博客将介绍如何使用 TextSpan 和 RichText 控件实现多行文本展开和收起功能，帮助您解决这一难题。

实现原理

TextSpan 是一个通用的文本控件，允许自定义文本样式和属性。将多个 TextSpan 组合在一起，便可创建 RichText 控件，并实现文本展开和收起功能。当用户点击多行文本时，可以更改 TextSpan 的样式以实现展开或收起效果，例如，将字体大小设为 0 以隐藏文本，或恢复原始大小以显示文本。

代码实现

以下是实现多行文本展开/收起功能的代码示例：

import 'package:flutter/material.dart';

class ExpandableText extends StatefulWidget {
  const ExpandableText({
    Key? key,
    required this.text,
    this.maxLines = 3,
    this.expandText = '展开',
    this.collapseText = '收起',
  }) : super(key: key);

  final String text;
  final int maxLines;
  final String expandText;
  final String collapseText;

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

class _ExpandableTextState extends State<ExpandableText> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RichText(
          text: TextSpan(
            children: [
              TextSpan(
                text: _isExpanded ? widget.text : widget.text.substring(0, widget.maxLines * 20),
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 16,
                ),
              ),
              WidgetSpan(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      _isExpanded = !_isExpanded;
                    });
                  },
                  child: Text(
                    _isExpanded ? widget.collapseText : widget.expandText,
                    style: const TextStyle(
                      color: Colors.blue,
                      fontSize: 16,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

使用说明

将 ExpandableText 控件添加到 Flutter 应用程序，并设置 text 属性以指定要显示的文本。通过设置 maxLines 属性指定文本的最大行数，expandText 和 collapseText 属性分别设置展开和收起按钮的文本。

ExpandableText(
  text: '这是一段很长的文字，需要合理展示。',
  maxLines: 3,
  expandText: '展开',
  collapseText: '收起',
),

总结

本博客介绍了在 Flutter 中使用 TextSpan 和 RichText 控件实现多行文本展开和收起功能的方法，为展示多行文本提供了一种灵活而实用的解决方案。

常见问题解答

1. 如何更改展开/收起按钮的样式？

   • 编辑 ExpandableText 控件中 WidgetSpan 的 child 属性。

2. 如何限制展开文本的行数？

   • 设置 ExpandableText 的 maxLines 属性。

3. 可以在文本展开后执行其他操作吗？

   • 是的，可以在 GestureDetector 的 onTap 回调中添加额外的逻辑。

4. 如何检测文本是否已展开？

   • 访问 ExpandableText 控件的 _isExpanded 字段。

5. 可以将展开功能应用于代码中的所有文本吗？

   • 是的，通过将 ExpandableText 用作 Text 或 RichText 的包装器控件。