flutter - 如何使用本地 JSON 在我的应用程序中动态创建页面？

Question

我有一个格式为 JSON 的文件：

{
  "Name": "Hello John",
  "Description": "Profile Text",
  "URL": "//apply now link ",
  "Orientation": "Landscape",
  "1024x500": "//profile picture link",
},

现在，当我的 gridView iOS 中的特定图块单击时，我想创建如下所示的页面。例如。如果用户单击 Hello John Tile 我想创建页面（显示在图像中），该页面将具有 Hello John 的标题和 John 的图像（链接 3）以及打开 Johns 个人资料的 url。但是 json 文件有 200 多个这样的配置文件，我想动态创建一个页面，当单击相应的 gridView Tile 时将打开该页面。还有一个需要从 JSON 文件调用的方向要求。

这是我要动态创建的页面：

这是网格视图。网格视图已编入索引并具有标题和图像。只有下一页必须使用 Json 调用。

这是页面的代码：

    class CourseInfoScreen extends StatefulWidget {
      @override
      _CourseInfoScreenState createState() => _CourseInfoScreenState();
    }

    class _CourseInfoScreenState extends State<CourseInfoScreen>
        with TickerProviderStateMixin {

      Future launchURL(String url) async {
        const url = '//apply now link ';
        if (await canLaunch(url)) {
          await launch(url, forceWebView: true, forceSafariVC: true);
        } else {
          throw 'Could not launch $url';
        }
      }

      Widget build(BuildContext context) {
        final double tempHeight = MediaQuery.of(context).size.height -
            (MediaQuery.of(context).size.width / 1.2) +
            24.0;

        return Container(
          color: DesignCourseAppTheme.nearlyWhite,
          child: Scaffold(
            backgroundColor: Colors.transparent,
            body: Stack(
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Container(
                      child: AspectRatio(
                        aspectRatio: 16 / 9,
                        child: Image(
                          image: NetworkImage(
                            //if(index==1){}
                            "https://image.shutterstock.com/image-vector/young-man-face-angry-facial-260nw-510023299.jpg",
                          ),
                          fit: BoxFit.fill, // use this
                        ),
                      ),
                    )
                  ],
                ),
      Padding(
        padding: const EdgeInsets.only(
          left: 16, 
          right: 16, 
          bottom: 18, 
          top: 16
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello John',
              textAlign: TextAlign.left,
              style: TextStyle(
                fontFamily: "Netflix",
                fontWeight: FontWeight.w600,
                fontSize: 35,
                letterSpacing: 0.27,
                color: HexColor('FFFF8C3B')
              ),
            ),
          ],
        ),
      ),

      Expanded(
        child: GestureDetector(
          onTap: () {
            print('pressed');
            _interstitialAd?.show();
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => WebviewScaffold(
                url:"//apply now link to be inserted here",

               //details of the Webview Scafflod 
appBar: AppBar(
                                                        leading: new IconButton(
                                                          icon: new Icon(
                                                              Icons.arrow_back),
                                                          onPressed: () {
                                                            Navigator.pop(
                                                                context);
                                                          },
                                                        ),
                                                        backgroundColor:
                                                            Color(0xFFFF8C3B),
                                                        title: const Text(
                                                          "Greedy Gnomes",
                                                        ),
                                                      ),                     

          child: Center(
            child: Text(
              'Apply Now',
              textAlign: TextAlign.left,
              style: TextStyle(
                fontFamily: "Netflix",
                fontWeight: FontWeight.w600,
                fontSize: 18,
                letterSpacing: 0.0,
                color: Colors.white,
              ),
            ),
          ),

    }

标签： flutterdart

Answer 1

这是一个示例，使用您的数据而不是您的布局，说明如何获取数据，将其列在网格中，然后点击每个项目移动到该项目的详细视图：

class PageFromJson extends StatefulWidget {
  @override
  _PageFromJsonState createState() => _PageFromJsonState();
}

class _PageFromJsonState extends State<PageFromJson> {


  List<Map> itemList = [
    {
      "Name": "Hello John",
      "Description": "Profile Text",
      "URL": "//apply now link ",
      "Orientation": "Landscape",
      "1024x500": "//profile picture link",
    },
    {
      "Name": "Hello Ana",
      "Description": "Profile Text",
      "URL": "//apply now link ",
      "Orientation": "Landscape",
      "1024x500": "//profile picture link",
    },
    {
      "Name": "Hello Alice",
      "Description": "Profile Text",
      "URL": "//apply now link ",
      "Orientation": "Landscape",
      "1024x500": "//profile picture link",
    },
  ];


  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: itemList.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () => _goToItemViewer(itemList[index]),
          child: ItemCard(
            item: itemList[index]
          ),
        );
      },
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2
      ),
    );
  }

  void _goToItemViewer(item){
    Navigator.of(context).push(MaterialPageRoute(builder: (context){
      return ItemViewer(item: item);
    }));
  }
}

class ItemCard extends StatelessWidget {
  final Map item;

  ItemCard({
    @required this.item,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: Colors.blueGrey,
      margin: EdgeInsets.all(12),
      height: 200,
      width: 200,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(item['Name']),
          Text(item['1024x500']),
        ],
      ),
    );
  }
}

class ItemViewer extends StatelessWidget {
  final Map item;

  ItemViewer({
    @required this.item,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(item['Name']),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(item['Name']),
            Text(item['Description']),
            Text(item['URL']),
            Text(item['Orientation']),
            Text(item['1024x500']),
          ],
        ),
      ),
    );
  }
}