如何在Flutter中实现点击添加按钮弹出指定弹窗

根据你需要的弹窗样式（含输入框、单选选项、操作按钮），下面是完整实现代码：

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('添加弹窗示例')),
        body: const AddButtonDemo(),
      ),
    );
  }
}

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

  @override
  State<AddButtonDemo> createState() => _AddButtonDemoState();
}

class _AddButtonDemoState extends State<AddButtonDemo> {
  final TextEditingController _nameController = TextEditingController();
  String? _selectedType;

  void _showAddDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('添加新条目'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 名称输入框
            TextField(
              controller: _nameController,
              decoration: const InputDecoration(
                labelText: '名称',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            // 单选选项组
            const Text('选择类型', style: TextStyle(fontWeight: FontWeight.bold)),
            RadioListTile<String>(
              title: const Text('类型一'),
              value: 'type1',
              groupValue: _selectedType,
              onChanged: (value) {
                setState(() => _selectedType = value);
              },
            ),
            RadioListTile<String>(
              title: const Text('类型二'),
              value: 'type2',
              groupValue: _selectedType,
              onChanged: (value) {
                setState(() => _selectedType = value);
              },
            ),
          ],
        ),
        actions: [
          // 取消按钮
          TextButton(
            onPressed: () {
              _nameController.clear();
              setState(() => _selectedType = null);
              Navigator.pop(context);
            },
            child: const Text('取消'),
          ),
          // 确认按钮
          TextButton(
            onPressed: () {
              if (_nameController.text.isNotEmpty && _selectedType != null) {
                // 这里处理添加逻辑，比如提交数据
                print('名称: ${_nameController.text}, 类型: $_selectedType');
                // 清空输入并关闭弹窗
                _nameController.clear();
                setState(() => _selectedType = null);
                Navigator.pop(context);
              }
            },
            child: const Text('确认'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: _showAddDialog,
        child: const Icon(Icons.add),
      ),
    );
  }

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

关键说明 #

• 使用showDialog触发弹窗，内部用AlertDialog构建基础弹窗框架
• 用TextField实现输入功能，通过TextEditingController管理输入内容
• 单选选项用RadioListTile，绑定groupValue和onChanged来维护选中状态
• 底部操作按钮分别处理取消（清空状态+关闭弹窗）和确认（校验数据+处理逻辑+关闭弹窗）

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