Flutter如何实现文本展开收起功能？现有DropdownButton2代码不符合需求

你当前用的DropdownButton2是下拉选择组件，和你要的长文本折叠展开功能完全不匹配，所以达不到预期效果。下面给你两种可行的实现方式：

方式一：使用第三方包expandable_text（推荐，快速实现） #

这个包专门用来处理文本展开收起，配置灵活。

步骤1：添加依赖 #

在项目的pubspec.yaml文件中添加依赖：

dependencies:
  expandable_text: ^2.3.0 # 可替换为最新版本

执行flutter pub get完成安装。

步骤2：使用示例 #

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

class ExpandableTextDemo extends StatelessWidget {
  // 模拟长文本内容
  final String longText = "这是一段需要折叠的长文本示例，当文本内容超过指定行数时，会自动折叠显示，点击展开按钮可以查看完整内容，点击收起按钮又会回到折叠状态。这里可以放入任意长度的文本内容，比如产品介绍、文章摘要等场景都非常适用。";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ExpandableText(
          longText,
          expandText: '展开',
          collapseText: '收起',
          maxLines: 2, // 折叠时显示的行数
          linkColor: Colors.blue, // 展开/收起文本的颜色
          style: TextStyle(fontSize: 14, color: Colors.black87),
          linkStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
        ),
      ),
    );
  }
}

方式二：手动实现（无第三方依赖） #

如果不想引入第三方包，可以自己通过状态管理实现：

import 'package:flutter/material.dart';

class ManualExpandableText extends StatefulWidget {
  @override
  _ManualExpandableTextState createState() => _ManualExpandableTextState();
}

class _ManualExpandableTextState extends State<ManualExpandableText> {
  bool _isExpanded = false;
  final String longText = "这是一段需要折叠的长文本示例，当文本内容超过指定行数时，会自动折叠显示，点击展开按钮可以查看完整内容，点击收起按钮又会回到折叠状态。这里可以放入任意长度的文本内容，比如产品介绍、文章摘要等场景都非常适用。";
  final int maxLines = 2; // 折叠时显示的行数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              longText,
              maxLines: _isExpanded ? null : maxLines,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 14, color: Colors.black87),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  _isExpanded = !_isExpanded;
                });
              },
              child: Text(
                _isExpanded ? '收起' : '展开',
                style: TextStyle(fontSize: 14, color: Colors.blue, fontWeight: FontWeight.w500),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

两种方式对比 #

• 第三方包：无需自己处理状态逻辑，支持更多自定义配置（比如展开动画、自定义按钮样式等），开发效率高。
• 手动实现：无额外依赖，完全自定义逻辑，适合对包体积有要求或需要高度定制的场景。

内容的提问来源于stack exchange，提问作者jordan