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

Posted 2023-02-23

【中文标题】在flutter项目中列出本地json数据

【英文标题】：Listing local json data in flutter project

【发布时间】：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”。 我该如何解决这个问题？

【参考方案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 有一个很好的视频来解释这个概念，看看。我相信它会帮助你。