【问题标题】:Displaying selected values from JSON in flutter在颤动中显示来自 JSON 的选定值
【发布时间】:2020-10-24 20:59:18
【问题描述】:

我只想从返回到 Listview 的 JSON 中显示具有 univ_spec_sub_id 为 53 的单位。我已经尝试实现一些代码,但它不起作用。有没有其他方法可以获得所需的输出?

这是点击 URL 后返回的 JSON:

"unit": [
        {
            "unit_id": "268",
            "univ_spec_sub_id": "53",
            "no_chapters": "13",
            "unit_name": "File Handling and Dictionaries",
        },
        {
            "unit_id": "300",
            "univ_spec_sub_id": "53",
            "no_chapters": "14",
            "unit_name": "Decision Control Statements",
        },
        {
            "unit_id": "298",
            "univ_spec_sub_id": "59",
            "no_chapters": "16",
            "unit_name": "Electromagnetism",
            
        },
        {
            "unit_id": "299",
            "univ_spec_sub_id": "59",
            "no_chapters": "0",
            "unit_name": "Coming Soon",
        },
        

这是我实现的代码。在此我已将单元 JSON 数组作为列表传递,并使用构造函数传递了 univ_spec_sub_id:

checkid(int index){
    if(widget.data[index]["univ_spec_sub_id"]== widget.univ_sub){
      articles(index);
    }
  }

  Container articles(int index){
    return Container(
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            GestureDetector(
              child: Card(
                child: Container(
                    child: Text(widget.data[index]["unit_no"]),
                        padding: const EdgeInsets.all(20),
                                ),
                              
                          ),
                          onTap: (){
                                print(widget.univ_sub);
                              },)
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
  
    return Scaffold(
      backgroundColor: Colors.indigo[700],
      body: ListView(
        children: <Widget>[
          Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 10, 110, 0),
                child: Container(
                  padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
                  child: IconButton(icon: Icon(Icons.arrow_back),
                    color: Colors.black,
                    onPressed: (){
                      Navigator.pop(context);
                    },
                    ),
                  
                ),
                ),
              SizedBox(height: 10,),
              Text('Programming and ',
                style: TextStyle(color: Colors.white,
                    fontSize: 32,
                fontWeight: FontWeight.bold),
              ),
              Text('    Problem Solving (IT) ',
                style: TextStyle(color: Colors.white,
                    fontSize: 32,
                    fontWeight: FontWeight.bold),
              ),
              
            ],

          ),
          SizedBox(height: 40,),
          Container(
            height: MediaQuery.of(context).size.height - 185,
            decoration: BoxDecoration(
              color: Colors.white70,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(75.0)),
            ),
            child: Padding(
                padding: EdgeInsets.fromLTRB(0, 100, 0, 0),
                child: Expanded(
                child: ListView.builder(
                  itemCount: widget.data.length,
                  itemBuilder: (BuildContext context,int index){
                    return Container(
                      child: checkid(index),
                    );
                  }),
              ),
            ),
          )
        ],
      ),
      
    );

【问题讨论】:

  • checkid() 应该返回一个小部件:return articles(index);

标签: json flutter dart


【解决方案1】:

只需查看我创建的示例即可。 你给的json:刚刚从我这边验证过

{
    "unit": [{
            "unit_id": "268",
            "univ_spec_sub_id": "53",
            "no_chapters": "13",
            "unit_name": "File Handling and Dictionaries"
        },
        {
            "unit_id": "300",
            "univ_spec_sub_id": "53",
            "no_chapters": "14",
            "unit_name": "Decision Control Statements"
        },
        {
            "unit_id": "298",
            "univ_spec_sub_id": "59",
            "no_chapters": "16",
            "unit_name": "Electromagnetism"

        },
        {
            "unit_id": "299",
            "univ_spec_sub_id": "59",
            "no_chapters": "0",
            "unit_name": "Coming Soon"
        }
    ]
}

这是 json 的模型类

// To parse this JSON data, do
//
//     final unit = unitFromJson(jsonString);

import 'dart:convert';

Unit unitFromJson(String str) => Unit.fromJson(json.decode(str));

String unitToJson(Unit data) => json.encode(data.toJson());

class Unit {
    Unit({
        this.unit,
    });

    List<UnitElement> unit;

    factory Unit.fromJson(Map<String, dynamic> json) => Unit(
        unit: List<UnitElement>.from(json["unit"].map((x) => UnitElement.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "unit": List<dynamic>.from(unit.map((x) => x.toJson())),
    };
}

class UnitElement {
    UnitElement({
        this.unitId,
        this.univSpecSubId,
        this.noChapters,
        this.unitName,
    });

    String unitId;
    String univSpecSubId;
    String noChapters;
    String unitName;

    factory UnitElement.fromJson(Map<String, dynamic> json) => UnitElement(
        unitId: json["unit_id"],
        univSpecSubId: json["univ_spec_sub_id"],
        noChapters: json["no_chapters"],
        unitName: json["unit_name"],
    );

    Map<String, dynamic> toJson() => {
        "unit_id": unitId,
        "univ_spec_sub_id": univSpecSubId,
        "no_chapters": noChapters,
        "unit_name": unitName,
    };
}

这是它的主要用户界面:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:json_parsing_example/models.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.amber),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  List<UnitElement> unitList = List();
  @override
  void initState() {
    super.initState();

    loadData();
  }

  Future<String> loadFromAssets() async {
    return await rootBundle.loadString('json/parse.json');
  }

  loadData() async {
    String jsonString = await loadFromAssets();
    final unit = unitFromJson(jsonString);
    unitList = unit.unit;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text('Second'),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SecondPage(
                data: unitList,
                univ_sub: "53",// This 53 is hardcoded you can add as per //your code
              ),
            ),
          );
        },
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  final String univ_sub;
  final  List<UnitElement> data;

  const SecondPage({Key key, this.univ_sub, this.data}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  Widget checkid(int index) {
    if (widget.data[index].univSpecSubId == widget.univ_sub) {
       return articles(index);
    }
  }

  Container articles(int index) {
    return Container(
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            GestureDetector(
              child: Card(
                child: Container(
                  child: Text(widget.data[index].unitId),
                  padding: const EdgeInsets.all(20),
                ),
              ),
              onTap: () {
                print(widget.univ_sub);
              },
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo[700],
      body: ListView(
        children: <Widget>[
          Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 10, 110, 0),
                child: Container(
                  padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
                  child: IconButton(
                    icon: Icon(Icons.arrow_back),
                    color: Colors.black,
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Text(
                'Programming and ',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 32,
                    fontWeight: FontWeight.bold),
              ),
              Text(
                '    Problem Solving (IT) ',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 32,
                    fontWeight: FontWeight.bold),
              ),
            ],
          ),
          SizedBox(
            height: 40,
          ),
          Container(
            height: MediaQuery.of(context).size.height - 185,
            decoration: BoxDecoration(
              color: Colors.white70,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(75.0)),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(0, 100, 0, 0),
              child: ListView.builder(
                shrinkWrap: true,
                  itemCount: widget.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      child: checkid(index),
                    );
                  }),
            ),
          )
        ],
      ),
    );
  }
}

只需检查一下,让我知道它是否有效。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-08-06
    • 1970-01-01
    • 2019-07-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-28
    • 2020-04-23
    相关资源
    最近更新 更多