Flutter中如何实现带多按钮的TextFormField？求可行实现方案

要实现带有多个按钮的输入框，最简洁的方式是利用TextField/TextFormField的InputDecoration属性，通过prefixIcon或suffixIcon放置多个按钮，结合Row来排列操作按钮。以下是可直接运行的完整示例：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '带按钮的输入框示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const InputWithButtonsPage(),
    );
  }
}

class InputWithButtonsPage extends StatefulWidget {
  const InputWithButtonsPage({super.key});

  @override
  State<InputWithButtonsPage> createState() => _InputWithButtonsPageState();
}

class _InputWithButtonsPageState extends State<InputWithButtonsPage> {
  final TextEditingController _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('带多按钮输入框')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextFormField(
          controller: _controller,
          decoration: InputDecoration(
            hintText: '请输入内容',
            border: const OutlineInputBorder(),
            // 在输入框右侧放置多个按钮
            suffixIcon: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: const Icon(Icons.format_bold),
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('触发加粗操作')),
                    );
                  },
                ),
                IconButton(
                  icon: const Icon(Icons.format_italic),
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('触发斜体操作')),
                    );
                  },
                ),
                IconButton(
                  icon: const Icon(Icons.clear),
                  onPressed: () => _controller.clear(),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

核心要点说明： #

• 用TextEditingController管控输入框内容，示例中实现了一键清空功能
• suffixIcon传入Row布局，设置mainAxisSize: MainAxisSize.min避免按钮区域过度拉伸
• 可根据需求替换按钮图标、调整按钮数量，自定义每个按钮的点击逻辑
• 若要在输入框左侧放置按钮，将suffixIcon替换为prefixIcon即可

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