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: Center(
          child: ElevatedButton(
            onPressed: () => _showInfoDialog(context),
            child: const Text('打开对话框'),
          ),
        ),
      ),
    );
  }

  void _showInfoDialog(BuildContext context) {
    final TextEditingController _inputController = TextEditingController();
    List<InfoModel> _infos = [];

    showDialog(
      context: context,
      builder: (context) => StatefulBuilder(
        // 对话框内的状态更新必须用StatefulBuilder包裹
        builder: (context, setState) => AlertDialog(
          title: const Text('输入并查看信息'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: _inputController,
                decoration: const InputDecoration(hintText: '输入信息...'),
                onChanged: (value) {
                  // 模拟将输入文本转为你的InfoModel对象，可根据实际需求替换逻辑
                  final newInfo = InfoModel(content: value);
                  setState(() {
                    // 追加新信息到列表，若需替换列表则改为 _infos = [newInfo];
                    _infos = [..._infos, newInfo];
                    // 如果你的_result是处理好的完整列表，直接替换成：
                    // _infos = _result;
                  });
                },
              ),
              const SizedBox(height: 16),
              // 完善后的ListView.builder
              Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: _infos.length, // 必须指定itemCount，避免空列表异常
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(_infos[index].toMap().toString()),
                    );
                  },
                ),
              ),
              // 空状态提示，提升用户体验
              if (_infos.isEmpty)
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 16),
                  child: Text('暂无输入信息'),
                ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: const Text('关闭'),
            ),
          ],
        ),
      ),
    );
  }
}

// 模拟你的InfoModel类，可根据实际业务调整字段和toMap逻辑
class InfoModel {
  final String content;

  InfoModel({required this.content});

  Map<String, dynamic> toMap() {
    return {'content': content};
  }
}

关键要点说明 #

• 对话框状态管理：对话框默认是无状态组件，必须用StatefulBuilder包裹才能让内部的setState正确更新UI，这是很容易踩坑的点。
• ListView优化：添加itemCount: _infos.length避免空列表时itemBuilder返回null引发异常；同时增加空状态提示，让界面更友好。
• 输入逻辑适配：如果你的_result是已经处理好的完整信息列表，直接把onChanged里的替换逻辑改成setState(() {_infos = _result;});即可，确保_result是符合InfoModel类型的列表。

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