在 flutter 项目中列出本地 json 数据

Question

我正在尝试在我的移动应用程序中列出药物清单。 我的数据在本地 json 文件中。

{
        "BARKOD": 8699755640016,
        "ATC KODU": "A01AA",
        "ATC ADI": "Caries prophylactic agents",
        "REFERANS \nE�DE�ER": "E�DE�ER",
        "ESDEGERI": 2,
        "ILAC ADI": "SENSORAL 250 ML SOLUSYON",
        "ETKIN MADDE": "POTASYUM NITRAT + SODYUM KLORUR",
        "FIRMA ADI": "DENTORAL MEDIFARMA",
        "BIRIM MIKTAR": "",
        "BIRIM CINSI": "",
        "AMBALAJ MIKTARI": 250,
        "RE�ETE": "NORMAL RE�ETE",
        "KDV DAHIL PERAKENDE SATIS TL FIYATI \n1 ? =2,1166 TL": "5,69"
    },

其中之一就是这样。 当我点击一个按钮时，我试图让所有这些数据出现。 我的代码如下所示。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:medicine_reminder/src/ui/homepage/homepage.dart';

class JsonPage extends StatefulWidget {
  @override
  _JsonPageState createState() => _JsonPageState();
}

class _JsonPageState extends State<JsonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Medicine List"),
        centerTitle: true,
      ),
      body: Center(
        child: FutureBuilder(
          builder: (context, snapshot) {
            var showData = json.decode(snapshot.data.toString());
            return ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                isThreeLine: true,
                title: Text(showData[index]['ILAC ADI']),
                subtitle: Text(showData[index]['ETKIN MADDE']),
                
                );
              },
              itemCount: showData.length,
            );
          },
          future:
              DefaultAssetBundle.of(context).loadString("assets/csvjson.json"),
        ),
      ),
      floatingActionButton: Stack(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 1),
            child: Align(
              heightFactor: 12.9,
              alignment: Alignment.topLeft,
              child: FloatingActionButton(
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => HomePage(),
                      ));
                },
                child: Icon(Icons.arrow_back),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

但我无法获得所有字段，我只能获得 2 个字段“ILAC ADI”和“ETKIN MADDE”。 我该如何解决这个问题？

Answer 1

处理 json 数据并渲染它们的最有效方法是创建模型。 如果您是这个QuickType的新手，可以帮助您解决这个问题。

粘贴您的 json，您将获得 model 的代码。 接下来，您可以使用 json 数据实例化 model 并使用 ListView.builder 遍历您的 model 并呈现数据。

Retroportal 工作室有一个很好的视频来解释这个概念，看看。 我相信它会帮助你。

Answer 2

屏幕上只显示'ILAC ADI'和'ETKIN MADDE' ，因为您只在ListTile中给出了这些值。

您可以使用Column代替ListTile来显示所有数据。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:medicine_reminder/src/ui/homepage/homepage.dart';

class JsonPage extends StatefulWidget {
  @override
  _JsonPageState createState() => _JsonPageState();
}

class _JsonPageState extends State<JsonPage> {
  // This List stores all the keys in the JSON
  final List<String> jsonKeyList = [
    'BARKOD',
    'ATC KODU',
    'ATC ADI',
    'REFERANS \nE�DE�ER',
    'ESDEGERI',
    'ILAC ADI',
    'ETKIN MADDE',
    'FIRMA ADI',
    'BIRIM MIKTAR',
    'BIRIM CINSI',
    'AMBALAJ MIKTARI',
    'RE�ETE',
    'KDV DAHIL PERAKENDE SATIS TL FIYATI \n1 ? =2,1166 TL',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Medicine List"),
        centerTitle: true,
      ),
      body: Center(
        child: FutureBuilder(
          builder: (context, snapshot) {
            var showData = json.decode(snapshot.data);
            print(showData.toString());
            return ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                // Used column to show all the values in the JSON
                return Column(
                  children: jsonKeyList.map((key) {
                    return Text(showData[index][key].toString());
                  }).toList(),
                );
              },
              itemCount: showData.length,
            );
          },
          future:
              DefaultAssetBundle.of(context).loadString("assets/csvjson.json"),
        ),
      ),
      floatingActionButton: Stack(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 1),
            child: Align(
              heightFactor: 12.9,
              alignment: Alignment.topLeft,
              child: FloatingActionButton(
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => HomePage(),
                      ));
                },
                child: Icon(Icons.arrow_back),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如果您有任何疑问，请发表评论。