时间戳

首页 > 解决方案 > 一个控制器用于两个滚动视图

dart - 一个控制器用于两个滚动视图

问题描述

我有两个滚动视图。一个嵌套的有一个 SliverAppBar，然后是一个 SingleChildScrollView 用于我的其余内容（如下面的代码所示）。然后我有一个控制器来控制浮动操作按钮的不透明度，当向上和向下滚动时。

但是，控制器仅在我将它放在 NestedScroll 上时才起作用，然后它仅在滚动实际标题时起作用，而不是在滚动浏览其余内容时起作用。

如果我将相同的控制器添加到 SingleChildScrollView 它会使两个视图分别滚动。任何人的想法来修复？

Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
    resizeToAvoidBottomPadding: false,
    body: NestedScrollView(
    controller: _controller,
              headerSliverBuilder: (BuildContext context, bool innerBoxScrolled){
                  return <Widget>[
                    SliverAppBar(
              },
              body:SingleChildScrollView(
            ),

我已缩短代码以仅显示两个视图。

这是我更改 FAB 不透明度的方法：

 void _scrollListener() {
if(_controller.position.userScrollDirection == ScrollDirection.reverse){
  setState(() {
    _hideFAB = true;
  });
}

if(_controller.position.userScrollDirection == ScrollDirection.forward){
  setState((){
    _hideFAB = false;
  });
}

}

这是一个 GIF，显示 FAB 仅在 SliverAppBar 内滚动时发生变化：GIPHY

标签： dartflutter

解决方案

使用ListView而不是SingleChildScrollView，将其余内容放入 ListView

    Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
    resizeToAvoidBottomPadding: false,
    body: NestedScrollView(
    controller: _controller,
              headerSliverBuilder: (BuildContext context, bool innerBoxScrolled){
                  return <Widget>[
                    SliverAppBar(
              },
              body:ListView(
            ),

推荐阅读