我正在创建具有下拉列表视图的页面。现在我在列表视图中显示完整数据。如果我想要任何特定的日期数据,那么我需要做什么。请帮我解决这个问题。下面是我正在获取的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")); } ); } ), ) ), ] )
var json = JsonDecoder().convert(response.body);
List <String> a = [];
json.map((value) {
a.add(value["key"]);
}).toList();
print(_phoneCodeList.runtimeType);
/*I/flutter(14165):列表*/
您可以在下面复制粘贴运行完整代码
您可以比较所选下拉列表值,仅显示特定数据
并为其他代码片段返回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响应示例: 下面是编辑组件所需的代码行 我需要显示下拉列表中选择的公司名称的现有值。