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

【问题标题】：Listing local json data in flutter project在flutter项目中列出本地json数据
【发布时间】：2021-08-02 22:37:05
【问题描述】：

我正在尝试在我的移动应用中列出药物清单。我的数据在本地 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”。我该如何解决这个问题？

【问题讨论】：

标签： android json flutter listview dart

【解决方案1】：

只有'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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

【讨论】：

【解决方案2】：

处理和渲染 json 数据最有效的方法是创建模型。如果您不熟悉此QuickType 可以帮助您解决此问题。

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

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

【讨论】：