如何在 SingleChildScrollView 中使用 Listview？

Question

我正在解决与 SingleChildScrollView 内的滚动列表视图相关的问题，其中列表视图滚动 controller 无法正常工作。

搞定 Controller

var scrollController = ScrollController();
@override
  void onInit() {
  scrollController.addListener((){
     if(scrollController.position.maxScrollExtent==scrollController.offset){
       //fetch more data
     }
  });
}

屏幕中的一些代码

Widget build(BuildContext context) {
    return Obx(
        () => SingleChildScrollView(
            child: Column(
              children: [
                MyFormFilterWidget(),
                Text("Found:${controller.aspList.length}"),
                controller.aspIsLoading.value
                    ? ProductLoading()
                    : controller.aspList.isNotEmpty
                  shrinkWrap: true,
                  padding: themePadding,
                  controller: controller.scrollController,
                  itemCount: controller.aspList.length + 1,
                  itemBuilder: (_, index) {
                    if (index < controller.aspList.length) {
                      return ProductCard(
                          product: controller.aspList[index]);
                    } else {
                      return controller.aspIsMoreLoading.value
                          ? SizedBox(
                        width: 200,
                        child: Center(
                          child: Padding(
                            padding: EdgeInsets.all(10),
                            child: CircularProgressIndicator(
                                color: primaryColor),
                          ),
                        ),
                      )
                          : controller.aspLastPage.value
                          ? SizedBox(
                        width: 200,
                        child: Padding(
                          padding: EdgeInsets.all(10),
                          child: Text("No more data",
                              textAlign: TextAlign.center),
                        ),
                      )
                          : SizedBox.shrink();
                    }
                  },
                  separatorBuilder: (BuildContext context, int index) {
                    return const SizedBox(height: 10);
                  },
                )
                    : const EmptyProduct(),
              ],
    );
  }

在这种情况下，scrollController 不工作 如果我删除 SigleScrollView 并只返回 ListView，它会正常工作。

Answer 1

如果您使用SingleChildScrollView并且里面有ListView小部件。 在将ListView物理设置为NeverScrollableScrollPhysics并将shrinkWrap为true之前，它不会滚动。

physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,

Answer 2

您可以在这里只使用列而不是 ListView。

body: SingleChildScrollView(
    child: Column(
      children: [
        Text("A"),
        for (int i = 0; i < 10; i++)
          Column(
            children: [
              Text("item $i"),
              Text("Divider of $i"),
            ],
          )
      ],
    ),
  ),

使用shrinkWrap: true

SingleChildScrollView(
  child: Column(
    children: [
      Text("A"),
      ListView.builder(
        shrinkWrap: true,
        itemCount: 222,
        itemBuilder: (context, index) => Text(" $index"),
      )
    ],
  ),
),

更好和推荐的CustomScrollView

return Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverToBoxAdapter(
        child: Text("a"),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return Text("item $index");
        }, childCount: 133),
      )
    ],
  ),
);