我想用 Flutter 創建一個移動應用程式，它通過 api 讀取新聞。第一次使用 Getx 包管理狀態。而且我不知道為什么我的新聞串列沒有生成
這是我的主頁
final TopHeadLinesController topheadlinesController =
Get.put(TopHeadLinesController());
Padding(
padding: EdgeInsets.only(left: 15.0, right: 15.0, top: 20.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"L'actualité en ce moment",
style: TextStyle(
fontFamily: 'Segoe UI',
fontSize: 21.0,
color: mainHexColor.withOpacity(0.54),
),
),
Align(
alignment: Alignment(0.84, -0.84),
child: InkWell(
onTap: () => Get.to(AppRoutes.TOP_HEADLINES),
splashColor: secondColor,
borderRadius: BorderRadius.circular(32.0),
child: Icon(Icons.double_arrow_rounded,
size: 25.0, color: iconHexColor)),
),
],
),
Container(
margin: EdgeInsets.only(bottom: 50.0),
padding: EdgeInsets.only(top: 5.0),
height: 235.0,
child: Obx(() {
return LoadingOverlay(
topheadlinesController.isLoading,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount:
topheadlinesController.articlesList.length,
itemBuilder: (context, index) {
// log('ELEMENT : ${topheadlinesController.articlesList[index]} &&&&&&& ${topheadlinesController.articlesList[index].title}');
return ActuItem(
article: topheadlinesController.articlesList[index],
);
}),
);
}),
),
],
),
),
TopHeadLinesController 檔案
class TopHeadLinesController extends GetxController {
var articlesList = [].obs;
bool isLoading = true;
@override
void onInit() {
fetchArticles();
super.onInit();
}
void fetchArticles() async {
var articles = await ApiRequest(url:'https://newsapi.org/v2/top-headlinescountry=fr&apiKey=API_KEY')
.getData(); // which returns a Future<List<Article>>
if (articles != null) {
articlesList.value = articles;
}
}
}
和 ActuItem 檔案
class ActuItem extends StatelessWidget {
Article article;
ActuItem(
{required this.article});
@override
Widget build(BuildContext context) {
return Container(
width: 250,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
//boxShadow: [ shadow ],
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 9,
offset: Offset(0, 3))
]),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: GestureDetector(
onTap: (() => Get.to(AppRoutes.DETAILS_NEWS)),
child: _getChild(),
// ),
),
),
SizedBox(
height: 7.0,
),
Padding(
padding: EdgeInsets.only(
top: 10.0,
left: 10.0,
right: 10.0,
),
child: Text(
article.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style:
TextStyle(fontFamily: 'avenir', fontWeight: FontWeight.w800),
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
article.url,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontFamily: 'Segoe UI',
color: mainHexColor,
),
),
)
],
),
);
}
_getChild() {
//print(const String.fromEnvironment('API_KEY'));
return Container(
width: Get.width,
height: Get.height / 1.8,
child: Image.network(
article.urlToImage!,
fit: BoxFit.cover,
),
);
}
}
沒有產生錯誤，對 API 的呼叫沒有問題通過。我不知道怎么了
uj5u.com熱心網友回復：
我知道你說 API 呼叫沒有顯示錯誤，但從你分享的內容來看，這是一個無效的 URL。和?之間需要有。此外，您永遠不會在 API 呼叫后重置為 false。headlinescountryisLoading
除此之外，我建議將您的串列初始化RxList為型別Article而不是動態的。
var articlesList = <Article>[].obs;
如果回傳的資料存在問題，getData它將在此行引發錯誤并提供更多見解。
articlesList.value = articles;
然后列印articlesList并結束函式或在除錯器中單步執行以查看該串列是如何填充的。
您的問題幾乎可以肯定在于articlesList沒有在fetchArticles函式中正確初始化。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/440168.html