当前位置: 首页 > 知识库问答 >
问题:

如何在flutter中显示基于下拉选择的json数据?

顾乐心
2023-03-14

我正在创建具有下拉列表视图的页面。现在我在列表视图中显示完整数据。如果我想要任何特定的日期数据,那么我需要做什么。请帮我解决这个问题。下面是我正在获取的JSON。

 

    {
        "data": [{
                "Date": "2019-07-08",
                "Details": [{
                    "id": 1
                }, {
                    "id": 2
                }]
            },
            {
                "Date": "2019-07-09",
                "Details": [{
                    "id": 3
                }, {
                    "id": 4
                }]
            },
            {
                "Date": "2019-07-10",
                "Details": [{
                    "id": 5
                }, {
                    "id": 6
                }]
            }

        ]
    }

下面是代码


    Future getData() async {
        var response = await http.get(
            Uri.encodeFull(url),
            headers: {
                "Accept": "application/json"
            }
        );
        setState(() {
            var extractdata = jsonDecode(response.body);
            data = extractdata["data"];
        });
        return 'success';
    }

    Column(
        children: [
            Expanded(
                child: Container(
                    color: Colors.greenAccent,
                    child: ListView.builder(
                        itemCount: data == null ? 0 : data.length,
                        shrinkWrap: true,
                        itemBuilder: (context, index) {                    
                            return ListView.builder(
                                shrinkWrap: true,
                                physics: NeverScrollableScrollPhysics(),
                                itemCount: data == null ? 0 : data[index]["Session_Details"].length,
                                itemBuilder: (context, i) {
                                    return ListTile(title: Text("id"));
                                }
                            );
                        }
                    ),
                )
            ),
        ]
    )

共有2个答案

潘慈
2023-03-14
var json = JsonDecoder().convert(response.body);
        List <String> a = [];
        json.map((value) {
          a.add(value["key"]);
}).toList();

print(_phoneCodeList.runtimeType);

/*I/flutter(14165):列表*/

龙涵蓄
2023-03-14

您可以在下面复制粘贴运行完整代码
您可以比较所选下拉列表值,仅显示特定数据
并为其他代码片段返回Container()(不显示)

ListView.builder(
      itemCount: payload == null ? 0 : payload.data.length,
      shrinkWrap: true,
      itemBuilder: (context, index) {
        return ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: payload == null
                ? 0
                : payload.data[index].details.length,
            itemBuilder: (context, i) {
              if (dropdownValue == null) {
                return ListTile(
                    title: Text(
                        "${payload.data[index].details[i].id}"));
              } else {
                if (payload.data[index] == dropdownValue) {
                  return ListTile(
                      title: Text(
                          "${payload.data[index].details[i].id}"));
                } else {
                  return Container();
                }
              }
            });
      }),

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
// To parse this JSON data, do
//
//     final payload = payloadFromJson(jsonString);

import 'dart:convert';

Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));

String payloadToJson(Payload data) => json.encode(data.toJson());

class Payload {
  List<Datum> data;

  Payload({
    this.data,
  });

  factory Payload.fromJson(Map<String, dynamic> json) => Payload(
        data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
      );

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

class Datum {
  DateTime date;
  List<Detail> details;

  Datum({
    this.date,
    this.details,
  });

  factory Datum.fromJson(Map<String, dynamic> json) => Datum(
        date: DateTime.parse(json["Date"]),
        details:
            List<Detail>.from(json["Details"].map((x) => Detail.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "Date":
            "${date.year.toString().padLeft(4, '0')}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}",
        "Details": List<dynamic>.from(details.map((x) => x.toJson())),
      };
}

class Detail {
  int id;

  Detail({
    this.id,
  });

  factory Detail.fromJson(Map<String, dynamic> json) => Detail(
        id: json["id"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
      };
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Payload payload;
  Datum dropdownValue = null;

  Future getData() async {
    var response = await http
        .get("https://www.json-generator.com/api/json/get/bOpGzigKOG?indent=2");
    payload = payloadFromJson(response.body);

    setState(() {});
    return 'success';
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      getData();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: payload == null
          ? CircularProgressIndicator()
          : Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Center(
                    child: DropdownButton<Datum>(
                      //isDense: true,
                      hint: Text('Choose'),
                      value: dropdownValue,
                      icon: Icon(Icons.check_circle_outline),
                      iconSize: 24,
                      elevation: 16,
                      style: TextStyle(color: Colors.deepPurple),
                      underline: Container(
                        height: 2,
                        color: Colors.blue[300],
                      ),
                      onChanged: (Datum newValue) {
                        setState(() {
                          dropdownValue = newValue;
                        });
                      },
                      items: payload.data
                          .map<DropdownMenuItem<Datum>>((Datum value) {
                        return DropdownMenuItem<Datum>(
                            value: value,
                            child: Text(
                                ' ${value.date.year.toString()}/${value.date.month.toString()}/${value.date.day.toString()}'));
                      }).toList(),
                    ),
                  ),
                  ListView.builder(
                      itemCount: payload == null ? 0 : payload.data.length,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        return ListView.builder(
                            shrinkWrap: true,
                            physics: NeverScrollableScrollPhysics(),
                            itemCount: payload == null
                                ? 0
                                : payload.data[index].details.length,
                            itemBuilder: (context, i) {
                              if (dropdownValue == null) {
                                return ListTile(
                                    title: Text(
                                        "${payload.data[index].details[i].id}"));
                              } else {
                                if (payload.data[index] == dropdownValue) {
                                  return ListTile(
                                      title: Text(
                                          "${payload.data[index].details[i].id}"));
                                } else {
                                  return Container();
                                }
                              }
                            });
                      }),
                  Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ],
              ),
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
 类似资料:
  • 我正在尝试编写一些相当基本的代码,但多年来没有接触过JavaScript,我真的不确定最好的方法是什么。 目标:有一个42个竞技场部分数字的下拉列表,当选择这些数字时,将根据该数字显示“红色”或“黑色”。为了提供过多信息,部分编号是: 黑色:103, 105, 107, 111, 113, 115, 119, 121, 123, 127, 129, 131, 201, 203, 205, 207,

  • 我想在选择另一个select元素的一个选项时显示一个select元素,在选择另一个选项时隐藏它。 这是JavaScript: 感谢任何帮助。谢谢

  • 我有三个下拉框。我的第一个下拉选择框如下所示 我的第二个看起来是这样的 第三个是这样的 如果从第一个下拉列表中选择值3,则只能从第二个和第三个下拉列表中选择三个选项(即1、2、3)。 该选项的其余部分应禁用或不可选。 如果从第二个下拉列表中选择值2,第三个下拉列表应该只能选择1。((即3-2)),反之亦然。 类似地,对于第一个下拉框 中选择的所有可能选项值,都应应用相同的逻辑 为我的查询建议jav

  • 我目前有下拉选择和使用JavaScript显示/隐藏值的工作代码,这取决于所选择的内容,正如你可以看到下面的代码。我想做的是,根据新建和使用的选择,有三种不同的表单输入。如果选择使用,它会直接进入带有输入的表单。如果你选择新的,它会带来另一个下拉列表,你可以选择租赁或购买,并根据这一点选择另外两个表单显示。我知道如何提交一个表单只是一个表单到PHP使用POST。但是,我的问题是,因为根据下拉,表单

  • 我有一个用来选择某些元素的代码,当你点击geticon按钮并显示正确的选项值时,该代码工作得很好。问题是我不确定如何显示下拉菜单的选择选项值(而不是按钮)。 这是我的Jsfiddle null null

  • 我正在使用npm模块编辑数据表单。下面是我的API响应示例: 下面是编辑组件所需的代码行 我需要显示下拉列表中选择的公司名称的现有值。