Flutter从json数组生成GridView

import 'package:flutter/material.dart';
import 'dart:convert';

class MyGridView extends StatelessWidget {
  final List<Map<String, dynamic>> jsonData;

  MyGridView(this.jsonData);

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 每行显示的列数
        crossAxisSpacing: 10, // 列之间的间距
        mainAxisSpacing: 10, // 行之间的间距
      ),
      itemCount: jsonData.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Column(
            children: [
              Image.network(jsonData[index]['image']),
              Text(jsonData[index]['title']),
            ],
          ),
        );
      },
    );
  }
}

void main() {
  // 解析json数据
  String jsonStr = '''
  [
    {
      "title": "Item 1",
      "image": "https://example.com/image1.jpg"
    },
    {
      "title": "Item 2",
      "image": "https://example.com/image2.jpg"
    },
    {
      "title": "Item 3",
      "image": "https://example.com/image3.jpg"
    },
    {
      "title": "Item 4",
      "image": "https://example.com/image4.jpg"
    }
  ]
  ''';
  List<Map<String, dynamic>> jsonData = json.decode(jsonStr).cast<Map<String, dynamic>>();

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('GridView from JSON')),
      body: MyGridView(jsonData),
    ),
  ));
}