为什么我的 ListView.builder 没有 return 任何东西？

Question

我想用 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 的调用没有问题。不知道怎么回事

Answer 1

我知道你说过 API 调用没有显示错误，但根据你分享的内容，这是无效的 URL。 headlines 和 country 之间需要有一个 ?。此外，您永远不会在 API 调用后将 isLoading 重置为 false。

除此之外，我建议将您的列表初始化为 Article 类型的 RxList 而不是动态的。

  var articlesList = <Article>[].obs;

如果 getData returns 的数据存在问题，它将在该行抛出错误并提供更多见解。

articlesList.value = articles;

然后打印 articlesList 和函数的结尾，或者在调试器中单步执行它以查看该列表是如何填充的。

您的问题几乎可以肯定是 articlesList 没有在 fetchArticles 函数中正确初始化。

为什么我的 ListView.builder 没有 return 任何东西？

Why my ListView.builder doesn't return anything?

api

listview

request

flutter

flutter-getx