Question

您可以在此gif中看到问题：

这是代码和示例： https://dartpad.dev/2cc7714328ad1c44d5fccabe7a73eb7a

我的应用程序中具有相同的设置，当用户向下滚动然后向上然后向下（没有等待反弹稳定）时，这会引起问题

任何帮助将不胜感激。

Answer 1

找到了解决方案：https://dartpad.dev/4b8df2bed9db58fbdf16dd041362ee22

此问题是由于在条子下使用ListViewBuilder引起的。它是通过使用SliverList小部件修复的，您可以在此处看到区别：

之前：

NestedScrollView(
  headerSliverBuilder:
      (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
      SliverPersistentHeader(
        pinned: true,
        //? M7: this was true
        //floating: false, // useless if pinned is true.
        delegate: ContestTabHeader(
            (MediaQuery.of(context).size.width * 1)),
        //(MediaQuery.of(context).size.width * 1.3)),
      ),
    ];
  },
  body: Container(
    color: AppTheme.getTheme().backgroundColor,
    child: ListView.builder(
      itemCount: 4,
      padding: EdgeInsets.only(top: 32, bottom: 16),
      scrollDirection: Axis.vertical,
      itemBuilder: (context, index) {
        var count = 4;
        var animation = Tween(begin: 0.0, end: 1.0).animate(
          CurvedAnimation(
            parent: widget.animationController,
            curve: Interval((1 / count) * index, 1.0,
                curve: Curves.fastOutSlowIn),
          ),
        );
        if (index == 0) {
          return TitleView(
            titleTxt: 'المواضيع',
            subTxt: '',
            animation: animation,
            animationController: widget.animationController,
          );
        } else if (index == 1) {
          return Padding(
            padding: const EdgeInsets.only(top: 8),
            child: PopularListView(
              animationController:
                  widget.animationController,
              callBack: (index) {},
            ),
          );
        } else if (index == 2) {
          return TitleView(
            titleTxt: 'ننصحك بهذه الدروس',
            subTxt: 'View all',
            animation: animation,
            isLeftButton: true,
            animationController: widget.animationController,
          );
        } else {
          return getDealListView(index);
        }
      },
    ),
  ),
),

然后在修复之后：

CustomScrollView(
  slivers: <Widget>[
    SliverPersistentHeader(
      pinned: false,
      // floating: false,
      delegate: ContestTabHeader((MediaQuery.of(context).size.width * 1)),
    ),
    SliverPadding(
      padding: EdgeInsets.only(top: 20),
                              sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            var count = 4;
            var animation = Tween(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(
                parent: widget.animationController,
                curve: Interval((1 / count) * index, 1.0, curve: Curves.fastOutSlowIn),
              ),
            );
            if (index == 0) {
              return TitleView(
                titleTxt: 'المواضيع',
                subTxt: '',
                animation: animation,
                animationController: widget.animationController,
              );
            } else if (index == 1) {
              return Padding(
                padding: const EdgeInsets.only(top: 8),
                child: PopularListView(
                  animationController: widget.animationController,
                  callBack: (index) {},
                ),
              );
            } else if (index == 2) {
              return TitleView(
                titleTxt: 'ننصحك بهذه الدروس',
                subTxt: 'View all',
                animation: animation,
                isLeftButton: true,
                animationController: widget.animationController,
              );
            } else {
              return getDealListView(index);
            }
          },
          childCount: 4,
        ),
      ),
    ),
  ],
),

希望这可以帮助遇到相同问题的人。

具有ListViewBuilder的SliverPersistentHeader导致奇怪的滚动问题

1 个答案: