flutter - 在 Flutter 中完成数据加载后如何渲染我的小部件
问题描述
我正在尝试做什么 登录后,显示具有列表视图的 HomeScreen。此列表视图显示来自 API 的数据。因此,加载需要一点时间。我想在加载完成后呈现我的 HomeScreen,并且我的列表视图中充满了数据。
我已经做了什么, 我有一个 api 帮助器类,它可以做 api 工作。它有一个静态方法,它为我的列表视图获取数据并返回一个列表。这是我的 getFixtureData 方法。
static Future<List<Fixtures>> getFixtureData() async {
Map<String, String> queryParameters = {
'league': '78',
'next': '20',
};
http.Response response = await http.get(
getUrl('fixtures', queryParameters),
headers: requestHeaders,
);
print(response.body);
if (response.statusCode == 200) {
String data = response.body;
List<dynamic> result = jsonDecode(data)['response'];
for (int i = 0; i < result.length; i++) {
Fixtures fixture = Fixtures();
fixture.leagueID = jsonDecode(data)['response'][i]['league']['id'];
fixture.country = jsonDecode(data)['response'][i]['league']['country'];
fixture.leagueName = jsonDecode(data)['response'][i]['league']['name'];
fixture.fixtureID = jsonDecode(data)['response'][i]['fixture']['id'];
//get Odds to match with fixtures by fixtureID
await getOddsData(fixture.fixtureID);
fixture.dateTime =
DateTime.parse(jsonDecode(data)['response'][i]['fixture']['date']);
fixture.homeTeam =
jsonDecode(data)['response'][i]['teams']['home']['name'];
fixture.awayTeam =
jsonDecode(data)['response'][i]['teams']['away']['name'];
fixture.status =
jsonDecode(data)['response'][i]['fixture']['status']['long'];
fixture.homeGoals = jsonDecode(data)['response'][i]['goals']['home'];
fixture.awayGoals = jsonDecode(data)['response'][i]['goals']['away'];
fixture.htScoreHome =
jsonDecode(data)['response'][i]['score']['halftime']['home'];
fixture.htScoreAway =
jsonDecode(data)['response'][i]['score']['halftime']['away'];
fixture.ftScoreHome =
jsonDecode(data)['response'][i]['score']['fulltime']['home'];
fixture.ftScoreAway =
jsonDecode(data)['response'][i]['score']['fulltime']['away'];
if (oddsList.length > 0) {
for (int j = 0; j < oddsList.length; j++) {
if (oddsList[j].fixtureID == fixture.fixtureID) {
fixture.homeOdds = oddsList[j].homeOdds;
fixture.drawOdds = oddsList[j].drawOdds;
fixture.awayOdds = oddsList[j].awayOdds;
fixture.bookmakerName = oddsList[j].bookmakerName;
FootballApi.fixtureList.add(
fixture); // this line must be here. If there is no odds of that match, it should not be in fixtureList
}
}
}
}
} else {
print('statusCode: ' + response.statusCode.toString());
}
return FootballApi.fixtureList;
}
我在有状态的小部件(HomeScreen)中调用此方法,它有一个列表视图,我用返回的列表 getFixtureData 方法提供它。我在 HomeScreen 的 initState 中调用它。这是相关的代码。
class HomeScreen extends StatefulWidget {
static String id = 'home_screen';
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int gameIndex = 0;
String gameTitle = 'Soccer';
int selectedCategoryIndex = 0;
List<Fixtures> fixtureList = List<Fixtures>();
@override
void initState() {
// TODO: implement initState
super.initState();
getFixture();
}
Future<List<Fixtures>> getFixture() async {
fixtureList = await FootballApi.getFixtureData();
return fixtureList;
}
这部分是我将数据传递给 HomeScreen 中的列表视图的地方。
Stack(children: [
AppListView(
matchList: FootballApi.fixtureList,
//callback function brings the matchCounter value from ListView class
onChange: (value) {
setState(() {
matchCounter = value;
});
},
finalBetList: (value) {
setState(() {
betList = value;
});
},
),
问题是; 当用户登录时,他正在使用空列表视图查看我的主屏幕。几秒钟后,列表视图被加载。我想在我的列表视图完全加载后渲染 HomeScreen。最好的方法是什么?
解决方案
从异步函数获取数据后,使用FutureBuilder
小部件构建小部件;
FutureBuilder<List<Fixtures>>(
future: getFixture(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<Fixtures> yourResponseDataFromAsync = snapshot.data;
return AppListView(
matchList: yourResponseDataFromAsync,
//callback function brings the matchCounter value from ListView class
onChange: (value) {
setState(() {
matchCounter = value;
});
},
finalBetList: (value) {
setState(() {
betList = value;
});
},
);
}
return CircularProgressIndicator();
},
),
推荐阅读
- java - 将@XmlValue 读取为字符串而不进行编组/解组
- c# - 未生成信号器/集线器文件
- android - 为什么在添加 CMake 选项后我得到不同的构建变体选项
- api - 如何从 xrp 中获取信息,如 localhost 中的 data api v2
- google-analytics - 如何从谷歌分析中获取/显示网站总访问量?
- kubernetes - 使用 srimzi 在 k8s 上部署后无法将生产者/消费者连接到 kafka 云代理
- algorithm - 回溯,文本分割
- snowflake-cloud-data-platform - Snowflake 数据仓库中的主键验证
- dynamics-crm - Dynamics Marketing - Dynamics 电子邮件内容
- r - 将具有负值的矩阵转换为栅格