如何在 PageView 中嵌套 ListView

Question

I have a horizontal PageView with some nested vertical LIstView on each page.

the Issue is I am unable to scroll those nested listview as I am only registering the PageView gestures.

note: when I use SliverChildBuilderDelegate inside customSCrollView with no limits the scroll is actually active but everything else no

this is what the code look like

class ProductDetail extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() => ProductDetailState();
}

class ProductDetailState extends State {
  

  @override
  Widget build(BuildContext context) {
    return Material(
      child: DefaultTabController(
        length: 2,
        child: Column(
          children: [
            Expanded(
              child: NestedScrollView(
//                 physics: BouncingScrollPhysics(),
                headerSliverBuilder:
                    (BuildContext context, bool innerBoxIsScrolled) {
                  return <Widget>[];
                },
                body: PageView( // this is a pageView container
                  children: <Widget>[
                    CustomScrollView(
                      slivers: [
                       SliverList(
                          delegate: SliverChildBuilderDelegate(
                            (context, index) {
                              return ListTile(
                                title: Text('index $index'),
                              );
                            },
                            childCount: 10
                          ),
                        )
                       ]
                    ),
                    CustomScrollView(
                      slivers: [
                       SliverList(
                          delegate: SliverChildBuilderDelegate(
                            (context, index) {
                              return ListTile(
                                title: Text('index $index'),
                              );
                            },
                            childCount: 10
                          ),
                        )
                       ]
                    ),
                  ],
                ),
              ),
            ),
            Container(
              height: 30,
//               child: 
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

NestedScrollView is messing up here. Since, you're not using headerSliverBuilder , you can just remove the widget entirely. Here's the working code.

@override
Widget build(BuildContext context) {
  return Material(
    child: PageView(
      children: <Widget>[
        CustomScrollView(
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(title: Text('index $index')),
                childCount: 20,
              ),
            )
          ],
        ),
        CustomScrollView(
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(title: Text('index $index')),
                childCount: 20,
              ),
            )
          ],
        ),
      ],
    ),
  );
}