JSON解析和CircleAvatar

Question

我编写了一段代码来从 JSON 文件读取图像名称和 URI。 并使用图像 URI 通过 CircleAvatar 渲染图像。

但我得到的是空值。您能检查一下代码并看看我做错了什么吗？

使用简单的数组值并使用 Listbuilder，效果很好 但这在带有 Json 解析返回字符串的 Listview 中不起作用。

class HomePage extends StatelessWidget {
   HomePage({super.key});
   var jsonData;
   Future<void> loadJsonAsset() async {
     final String jsonString = await rootBundle.loadString('assets/json/asset.json');
     var data = jsonDecode(jsonString);
          jsonData = data;
     print(jsonData[0]['assetURI']);
     print(jsonData);
   }

  @override
  Widget build(BuildContext context) {
    loadJsonAsset();
    var arrabc = ["assets/images/bath.png",'assets/images/brush.png', 'assets/images/vihaan.png'];

    return Scaffold(

      body: ListView.builder(itemBuilder: (context,index){
        return CircleAvatar(
    **      //This is displaying the data
          backgroundImage: AssetImage(arrabc[index]),
          //This is not  displaying the data - runtime exception
        //backgroundImage: AssetImage(jsonData[0]['assetURI']),**
          maxRadius: 30,
        );
      },
      itemCount: arrabc.length,
          )
      );
  }
 }

当我通过 CircleAvatar 中的 jsonData[0]['name'] 运行代码时，它会抛出 RuntimeExcpetion 作为抛出 null。

但同样适用于数组值 arrabc[index]。

请建议我做错了什么

arrabc 正在工作，而 jsonData 不工作。

Answer 1

问题在于

loadJsonAsset

是一个异步函数。在访问

jsonData

之前它不会完成执行。

这样的东西可能对你有用：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List jsonData = [];

  Future<void> loadJsonAsset() async {
    final String jsonString = await rootBundle.loadString('assets/json/asset.json');
    setState(() {
      jsonData = jsonDecode(jsonString);
    });
  }

  @override
  void initState() {
    loadJsonAsset();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
          itemBuilder: (context, index) {
            return CircleAvatar(
              backgroundImage: AssetImage(jsonData[index]['assetURI']),
              maxRadius: 30,
            );
          },
          itemCount: jsonData.length,
    ));
  }
}