Flutter中如何展示JSON数组格式下Data列表内的Name、Image等数据

兄弟，你遇到的问题其实很直观——你现在直接访问widget.rresponse.data.name肯定会报错，因为data是一个列表（List），不是单个的SearchData对象，列表本身没有name这个属性，得针对列表里的每一项来操作才行。

下面分两种常用场景给你解决方案：

场景1：展示所有Data数组里的条目（推荐） #

如果要把返回的所有数据都展示出来，最适合用ListView.builder来遍历列表，这样既能处理多条数据，还能避免布局溢出的问题。记得把ListView放在Expanded组件里，不然Column会因为ListView的无限高度报错。

修改后的页面代码如下：

class _AfterSearchPageState extends State<AfterSearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            // 展示Status和Message
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                children: [
                  Text("Status: ${widget.rresponse.status}"),
                  SizedBox(height: 8),
                  Text("Message: ${widget.rresponse.message}"),
                ],
              ),
            ),
            // 展示Data数组里的所有条目
            Expanded(
              child: ListView.builder(
                itemCount: widget.rresponse.data.length,
                itemBuilder: (context, index) {
                  // 获取当前索引的SearchData对象
                  final item = widget.rresponse.data[index];
                  return Card(
                    margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Name: ${item.name}", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                          SizedBox(height: 8),
                          // 仅当Image不为空时展示图片
                          if (item.image.isNotEmpty)
                            Image.network(item.image, height: 100, width: double.infinity, fit: BoxFit.cover),
                          SizedBox(height: 8),
                          Text("Extra1: ${item.extra1}"),
                          Text("EncId: ${item.encId}"),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
            // 返回按钮
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: OutlinedButton.icon(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => Home2(),
                      ),
                    );
                  },
                  icon: Icon(
                    Icons.exit_to_app,
                    size: 18,
                  ),
                  label: Text("GoTo Home")),
            ),
          ],
        ),
      ),
    );
  }
}

场景2：只展示某一条特定数据（比如第一条） #

如果你只是想快速测试某一条数据的展示，可以通过列表索引直接访问，但一定要先判断列表是否为空，避免出现下标越界的错误：

把你原来报错的那行代码替换成：

widget.rresponse.data.isNotEmpty 
    ? Text("Name: ${widget.rresponse.data[0].name}") 
    : Text("No data available"),

这样如果数组里有数据，就展示第一条的Name；如果为空，就显示提示文字，不会崩溃。

核心逻辑就是：列表要遍历或者通过索引访问单个元素，不能直接用列表去访问单个对象的属性，这是初学者很容易犯的小错误啦～

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