gnested_scrollview 0.0.2 icon indicating copy to clipboard operation
gnested_scrollview: ^0.0.2 copied to clipboard

一个自定义的NestedScrollView。解决了NestedScrollView和PageView不能兼容问题。

GNestedScrollView #

介绍 #

Flutter提供的NestedScrollView当body是PageView,且PageView里包含ListView时,滑动某一个Page里的ListView其他Page里的ListView也会 跟着滑动。

而且拉开头部时候也会有很多手势絮乱的问题。

Flutter NestedScrollView的问题 #

下面提供一个NestedScrollView和PageView配合使用的例子:

可以看到: 1.当滑动PageView其中一个Page的ListView时,另外Page里的ListView也会跟着滑动。 2.向下滑动的时,ListView并没有拉到顶部,Header部分也会被拉开。

使用gnested_scrollview的运行效果 #

可以看到当滑动ListView时,另外的ListView并没有出现联动,头部的拉出时机也没有出现问题。

Usage #

添加依赖:

dependencies:
  gnested_scrollview: ^0.0.1

使用:


class TestNestedScrollView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    Widget current = GNestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
          return [
            SliverAppBar(
              pinned: true, 
              expandedHeight: 250.0,
              flexibleSpace: FlexibleSpaceBar(
                title: const Text('Demo'),
                background: Image.asset(
                  "assets/images/dog.png",
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ];
        },
        body: PageView(
          children: [
            TabChild(count: 30,),
            TabChild(count: 20,),
          ],
        ));

    current = Scaffold(
      body: current,
    );

    return current;
  }
}

class TabChild extends StatefulWidget {

  final int count;
  
  TabChild({this.count = 30});
  
  @override
  State<StatefulWidget> createState() {
    return _TabChildState();
  }
}

class _TabChildState extends State<TabChild> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: widget.count,
      itemBuilder: (BuildContext context, int index) {
        return SizedBox(
          height: 50,
          child: Center(child: Text('Item $index')),
        );
      },
    );
  }

  // @override
  bool get wantKeepAlive => true;
}
3
likes
85
pub points
38%
popularity

Publisher

unverified uploader

一个自定义的NestedScrollView。解决了NestedScrollView和PageView不能兼容问题。

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on gnested_scrollview