Flutter中如何在ListView Builder区域外展示列表数据？

当然可以在ListView Builder区域外展示列表数据，完全不存在技术上的限制。你只需要将userList中的数据拼接成目标格式的字符串，在指定容器中展示即可，每次列表更新时UI会自动同步。

具体实现步骤 #

1. 拼接用户信息字符串：遍历userList，将每个用户的name和age按Name: XXX, Age: XXX格式拼接，用空格分隔所有用户信息。如果age可能为null，建议添加空值处理避免显示null。
2. 替换待填充容器：把拼接好的字符串传入目标Container的Text组件中。

修改后的关键代码 #

在build方法中先构建展示文本：

// 拼接用户信息，处理age为空的情况
String displayText = userList.map((user) => 'Name: ${user.name}, Age: ${user.age ?? 'N/A'}').join(' ');

替换原有的待填充容器：

Container(child: Text(displayText)),

完整修改后的代码 #

class _Passenger extends State<Passenger> {
  TextEditingController nameController = TextEditingController();
  TextEditingController ageController = TextEditingController();
  int currentIndex = 0;

  final form = GlobalKey<FormState>();
  bool update = false;
  final User user = User(name: "", age: int.tryParse(''));
  List<User> userList = [
    User(name: "You", age: 20),
    User(name: "Him", age: 20),
  ];
  String text = '';
  int? number = int.tryParse('');
  
  @override
  Widget build(BuildContext context) {
    // 拼接需要展示的用户信息字符串
    String displayText = userList.map((user) => 'Name: ${user.name}, Age: ${user.age ?? 'N/A'}').join(' ');
    
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                height: 550,
                decoration: BoxDecoration(border: Border.all(color: Colors.black)),
                child: ListView.builder(
                  itemCount: userList.length,
                  itemBuilder: (context, index) {
                    String name = userList[index].name;
                    int? age = userList[index].age;

                    return SizedBox(
                      width: 20,
                      child: Card(
                        color: Colors.grey,
                        child: Padding(
                          padding: const EdgeInsets.all(2.0),
                          child: ListTile(
                            title: Text( "Name: $name    Age: $age"),
                          )
                        )
                      ),
                    );
                  }
                ),
              ),
            ],
          ),
          // 替换为拼接好的文本
          Container(child: Text(displayText)),
          // Add Button
          Container(
            width: 150,
            height: 50,
            margin: const EdgeInsets.all(10),
            child: ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) => SimpleDialog(children: [
                    TextField(
                      decoration: const InputDecoration(labelText: 'Name'),
                      onChanged: (value) {
                        setState(() {
                          text = value;
                        });
                      },
                    ),
                    TextField(
                      keyboardType: TextInputType.number,
                      decoration: const InputDecoration(labelText: 'Age'),
                      onChanged: (value) {
                        setState(() {
                          number = int.parse(value);
                        });
                      },
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          userList.add(User(name: text, age: number));
                        });
                        Navigator.pop(context); // 关闭弹窗，优化体验
                      },
                      child: const Text('Add')
                    )
                  ])
                );
              },
              child: const Text("Add"),
            )
          ),
        ])
      )
    );
  }
}

class User {
  String name;
  int? age;
  User({
    required this.name,
    this.age,
  });
}

额外补充了关闭弹窗的逻辑，避免添加用户后弹窗停留的问题，提升交互体验。

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