listview - Flutter 仅按需填充 ExpansionTile 数据(一个 Future 对象),而不是在初始化时
问题描述
我能够从 REST/JSON 填充 ListView 和 ExpansionTiles,这很好,但我希望扩展块最初不会被填充,并且仅在单击它们时单独填充(可能使用 onExpansionChanged :)
我有以下内容,它几乎可以像我想要的那样工作,除了它正在填充 ListView,然后由于每个 ExpansionTile 内的 FutureBuilder,它会立即(自动)填充扩展图块。
如何更改此设置,以便在单独单击/展开扩展磁贴之前不会填充它们?
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ExpansionTile Test',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<http.Response> _responseFuture;
@override
void initState() {
super.initState();
_responseFuture = http.get('https://jsonplaceholder.typicode.com/users');
print("Getting Main List");
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('ExpansionTile Test'),
),
body: new FutureBuilder(
future: _responseFuture,
builder: (BuildContext context, AsyncSnapshot<http.Response> response) {
if (!response.hasData) {
return const Center(
child: const Text('Loading...'),
);
} else if (response.data.statusCode != 200) {
return const Center(
child: const Text('Error loading data'),
);
} else {
List<dynamic> jsonn = json.decode(response.data.body);
return new MyExpansionTileList(jsonn);
}
},
),
);
}
}
class MyExpansionTileList extends StatelessWidget {
final List<dynamic> elementList;
MyExpansionTileList(this.elementList);
List<Widget> _getChildren() {
List<Widget> children = [];
elementList.forEach((element) {
children.add(
new MyExpansionTile(element['id'], element['name']),
);
});
return children;
}
@override
Widget build(BuildContext context) {
return new ListView(
children: _getChildren(),
);
}
}
class MyExpansionTile extends StatefulWidget {
final int id;
final String title;
MyExpansionTile(this.id, this.title);
@override
State createState() => new MyExpansionTileState();
}
class MyExpansionTileState extends State<MyExpansionTile> {
PageStorageKey _key;
Future<http.Response> _responseFuture;
@override
void initState() {
super.initState();
_responseFuture = http.get('https://jsonplaceholder.typicode.com/users');
print("Getting Expansion Item # ${widget.id}");
}
@override
Widget build(BuildContext context) {
_key = new PageStorageKey('${widget.id}');
return new ExpansionTile(
key: _key,
title: new Text(widget.title),
children: <Widget>[
new FutureBuilder(
future: _responseFuture,
builder:
(BuildContext context, AsyncSnapshot<http.Response> response) {
if (!response.hasData) {
return const Center(
child: const Text('Loading...'),
);
} else if (response.data.statusCode != 200) {
return const Center(
child: const Text('Error loading data'),
);
} else {
List<dynamic> json_data = json.decode(response.data.body);
List<Widget> reasonList = [];
json_data.forEach((element) {
reasonList.add(new ListTile(
dense: true,
title: new Text(element['email']),
));
});
return new Column(children: reasonList);
}
},
)
],
);
}
}
解决方案
您可以使用Completer代替 Future,但仍然使用 FutureBuilder,这是示例代码
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ExpansionTile Test',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<http.Response> _responseFuture;
@override
void initState() {
super.initState();
_responseFuture = http.get('https://jsonplaceholder.typicode.com/users');
print("Getting Main List");
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('ExpansionTile Test'),
),
body: new FutureBuilder(
future: _responseFuture,
builder: (BuildContext context, AsyncSnapshot<http.Response> response) {
if (!response.hasData) {
return const Center(
child: const Text('Loading...'),
);
} else if (response.data.statusCode != 200) {
return const Center(
child: const Text('Error loading data'),
);
} else {
List<dynamic> jsonn = json.decode(response.data.body);
return new MyExpansionTileList(jsonn);
}
},
),
);
}
}
class MyExpansionTileList extends StatelessWidget {
final List<dynamic> elementList;
MyExpansionTileList(this.elementList);
List<Widget> _getChildren() {
List<Widget> children = [];
elementList.forEach((element) {
children.add(
new MyExpansionTile(element['id'], element['name']),
);
});
return children;
}
@override
Widget build(BuildContext context) {
return new ListView(
children: _getChildren(),
);
}
}
class MyExpansionTile extends StatefulWidget {
final int id;
final String title;
MyExpansionTile(this.id, this.title);
@override
State createState() => new MyExpansionTileState();
}
class MyExpansionTileState extends State<MyExpansionTile> {
PageStorageKey _key;
Completer<http.Response> _responseCompleter = new Completer();
@override
Widget build(BuildContext context) {
_key = new PageStorageKey('${widget.id}');
return new ExpansionTile(
key: _key,
title: new Text(widget.title),
onExpansionChanged: (bool isExpanding) {
if (!_responseCompleter.isCompleted) {
_responseCompleter.complete(http.get('https://jsonplaceholder.typicode.com/users'));
print("Getting Expansion Item # ${widget.id}");
}
},
children: <Widget>[
new FutureBuilder(
future: _responseCompleter.future,
builder:
(BuildContext context, AsyncSnapshot<http.Response> response) {
if (!response.hasData) {
return const Center(
child: const Text('Loading...'),
);
} else if (response.data.statusCode != 200) {
return const Center(
child: const Text('Error loading data'),
);
} else {
List<dynamic> json_data = json.decode(response.data.body);
List<Widget> reasonList = [];
json_data.forEach((element) {
reasonList.add(new ListTile(
dense: true,
title: new Text(element['email']),
));
});
return new Column(children: reasonList);
}
},
)
],
);
}
}
推荐阅读
- laravel - 删除行或ID时如何保存数据?
- c# - 我可以从 HttpWebRequest 更改或删除服务器名称指示 (SNI) 扩展吗?
- android - 将 google play 计费库更新到版本 3,但行为令人困惑
- node.js - 下载pdf文件在节点js中不起作用
- android - 如果我需要的 lvl 是 26,我如何支持 min sdk 14?
- flutter - 在另一个 SingleChildScrollView(Vertical) 中颤动 SingleChildScrollView(Horizontal)
- javascript - 在 HTML/CSS 中修复元素时遇到问题
- unity3d - Unity Admob 横幅突然变大,底部有视频
- java - 实现 Dijkstra 算法的问题
- javascript - 为什么 promise-limit 在 Nodejs 中不起作用?