Question

我有两个滚动视图。一个嵌套有一个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，显示了在SliverAppBar中滚动时，FAB只会发生变化：GIPHY

Answer 1

使用 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(
            ),

Answer 2

我通过使用CustomScrollView而不是NestedScrollView来解决问题，然后用SingleChildScrollView更改了SliverList。

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

2 个答案: