我正在構建我的第一個顫振應用程式（也是我的第一個移動應用程式），我很難理解如何重新加載頁面（更改狀態）。
我看到了檔案，還搜索了一些與我相關的問題，但我仍然無法解決這個問題，因為有很多方法可以改變狀態，具體取決于具體問題。
所以，我有這個螢屏：
import 'package:flutter/material.dart';
import 'package:mobile_tech_overdose/models/categories.dart';
import 'package:mobile_tech_overdose/models/subcategories.dart';
import 'package:mobile_tech_overdose/services/api/category_api.dart';
import 'package:mobile_tech_overdose/services/api/subcategory_api.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
CategoryApi categoryApi = CategoryApi();
SubcategoryApi subcategoryApi = SubcategoryApi();
late Future<List<Category>> futureCategories;
late Future<List<Subcategory>> futureSubcategoriesFromCategory;
int? category_id;
@override
void initState() {
super.initState();
futureCategories = categoryApi.fetchCategories();
futureSubcategoriesFromCategory = subcategoryApi.fetchSubcategoriesFromCategory(category_id);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Forum Categories'),
),
body: Column(
children: [
SizedBox(
height: 100,
child: FutureBuilder<List<Category>>(
future: futureCategories,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
Category category = snapshot.data![index];
return Container(
height: 200,
width: 200,
margin: const EdgeInsets.only(top: 20, left: 40),
child: ListTile(
title: ElevatedButton(
child: Text(category.name),
onPressed: () {
setState(() {
category_id = category.id;
});
},
),
),
);
});
} else if (snapshot.hasError) {
return const Text('Something went wrong');
}
return const Center(
child: CircularProgressIndicator()
);
}),
),
Expanded(
child: FutureBuilder<List<Subcategory>>(
future: futureSubcategoriesFromCategory,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
scrollDirection: Axis.vertical,
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
Subcategory subcategory = snapshot.data![index];
return Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Card(
color: Colors.black45,
child: InkWell(
splashColor: Colors.blue.withAlpha(50),
onTap: () {
debugPrint('Card');
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Container(
width: 50.0,
height: 100.0,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fitHeight,
image: NetworkImage(
subcategory.photo_url)
)
)
),
),
title: Padding(
padding: const EdgeInsets.only(bottom: 4.0),
child: Text(
subcategory.name,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87
)
),
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 4.0, bottom: 4.0),
child: Text.rich(
TextSpan(
text: 'Last Topic: ',
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black54
),
children: <TextSpan>[
TextSpan(
text: subcategory.latest_topic!,
style: const TextStyle(color: Colors.white70)
)
],
)
),
),
// subtitle: Text(
// 'Last Topic: ${subcategory.latest_topic!}',
// style: TextStyle(
// color: Colors.white,
// fontWeight: FontWeight.bold
// )
// ),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
RichText(
text: TextSpan(
children: [
const WidgetSpan(
child: Icon(Icons.live_help, size: 20, color: Colors.redAccent,),
),
TextSpan(
text: " ${subcategory.topics_count}",
semanticsLabel: "Topics count"
),
],
),
),
const SizedBox(width: 8),
RichText(
text: TextSpan(
children: [
const WidgetSpan(
child: Icon(Icons.question_answer, size: 20, color: Colors.redAccent,),
),
TextSpan(
text: " ${subcategory.comments_count}",
semanticsLabel: "Topics count"
),
],
),
),
const SizedBox(width: 8),
],
),
],
),
),
),
),
),
);
});
} else if (snapshot.hasError) {
return const Text('Something went wrong');
}
return const Center(
child: CircularProgressIndicator()
);
}),
),
],
));
}
}
如您所見，我呼叫setState()第一個ListView.builder ElevatedButton來更新category_id值。該 var 的目的是用于第二個ListView.builder( futureSubcategoriesFromCategory = subcategoryApi.fetchSubcategoriesFromCategory(category_id);)。但我可能做錯了什么，因為小部件沒有重新加載。
任何人都可以幫助我嗎？
uj5u.com熱心網友回復：
setState將重建螢屏，即將再次呼叫構建函式，您的代碼將更改第二個ListView.builder，initState因此它不會以新值再次執行category_id
快速解決方法是將其添加到您的 setState
futureSubcategoriesFromCategory = subcategoryApi.fetchSubcategoriesFromCategory(category.id);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/409974.html
標籤：