Flutter中如何将TextFormField的查看更多/收起按钮置于文本末行右侧

核心实现思路 #

通过StatefulWidget维护展开状态，将TextFormField与文本按钮组合在Stack布局中，利用Positioned将按钮定位到文本框右下角，根据状态切换maxLines值和按钮文字。

完整代码示例 #

import 'package:flutter/material.dart';

class ExpandableTextFormField extends StatefulWidget {
  final String initialValue;
  final String hintText;

  const ExpandableTextFormField({
    super.key,
    required this.initialValue,
    required this.hintText,
  });

  @override
  State<ExpandableTextFormField> createState() => _ExpandableTextFormFieldState();
}

class _ExpandableTextFormFieldState extends State<ExpandableTextFormField> {
  late TextEditingController _controller;
  bool _isExpanded = false;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.initialValue);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        TextFormField(
          controller: _controller,
          maxLines: _isExpanded ? null : 10,
          decoration: InputDecoration(
            hintText: widget.hintText,
            border: const OutlineInputBorder(),
            // 给按钮预留右侧空间，避免遮挡文本
            contentPadding: const EdgeInsets.fromLTRB(16, 16, 80, 16),
          ),
        ),
        Positioned(
          bottom: 8,
          right: 8,
          child: TextButton(
            onPressed: () => setState(() => _isExpanded = !_isExpanded),
            style: TextButton.styleFrom(
              padding: EdgeInsets.zero,
              minimumSize: const Size(60, 30),
            ),
            child: Text(
              _isExpanded ? 'See Less' : 'See More',
              style: const TextStyle(color: Colors.blue),
            ),
          ),
        ),
      ],
    );
  }
}

// 使用示例
class DemoScreen extends StatelessWidget {
  const DemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Expandable TextFormField Demo')),
      body: const Padding(
        padding: EdgeInsets.all(16.0),
        child: ExpandableTextFormField(
          initialValue: '''这里是初始的长文本内容，用来测试TextFormField的展开和收起功能。
当文本内容超过10行时，右下角的See More按钮会显示，点击后文本框会展开显示所有内容，按钮文字变为See Less；再次点击则收起，恢复10行的限制。
可以添加更多的测试文本，确保功能正常工作。比如这一行，还有下一行，再下一行，直到超过10行的长度。
继续添加内容，让文本足够长，验证收起状态下只显示前10行，展开后显示全部内容。''',
          hintText: '输入内容...',
        ),
      ),
    );
  }
}

关键细节说明 #

• 状态控制：用_isExpanded布尔值管理展开/收起状态，点击按钮时通过setState触发UI更新。
• 布局适配：通过Stack+Positioned实现按钮的悬浮定位，同时调整TextFormField的contentPadding，避免按钮遮挡最后一行文本。
• 行数切换：收起时maxLines设为10，展开时设为null（表示无行数限制，自动适配内容高度）。
• 按钮样式：设置紧凑的按钮尺寸，让按钮贴合文本框角落，不影响整体布局美观。

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