Flutter 如何隐藏卷轴颤振上的容器

如何将容器

HorizontalList（）

（下面的imgae波纹管上标记的数字1）隐藏在滚动条上（从上到下）。
主体代码-：

 body: Column(
    children: <Widget>[
      HorizontalList(),//Categories horizontal Scroll Bar **Hide this on scroll**(Number 1 on Img)
      Padding(
        padding: EdgeInsets.only(top: 2.0),
      ),
      CategoriesBar(),//Fillters and categories Title bar (Number 2 on Img)
      Padding(
        padding: EdgeInsets.only(top: 4.0),
      ),
      ProductView(),//All product view **GrideView** (Number 3 on Img)
    ],
  ),

ProductView（）的代码

类ProductView扩展StatefulWidget{
@凌驾
_ProductViewState createState（）=>\u ProductViewState（）；
}
类_ProductViewState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回新的灵活(
子项：新建GridView.builder(
gridDelegate：
新SliverGridDelegateWithFixedCrossAxisCount（crossAxisCount:2），
itemCount:storeItems.length，
itemBuilder:（构建上下文，int索引）{
归还新卡(
标高：12.0，
形状：圆形矩形边框(
边界半径：边界半径。圆形（10.0），
),
子：新堆栈(
对齐：分馏Loffset.bottomCenter，
儿童：[
新专栏(
儿童：[
ClipRRect(
borderRadius：仅限borderRadius(
左上：半径。圆形（10.0），
右上角：半径。圆形（10.0）），
孩子：新图像网络(
storeItems[index].itemImage，
适合：BoxFit.cover，
宽度：200.0，
身高：145.0，
),
),
填充物(
填充：常数边集全部（5.0），
子对象：对齐(
对齐：alignment.centerLeft，
儿童：新文本(
storeItems[index]。itemName，
溢出：TextOverflow.省略号，
样式：TextStyle(
字体大小：16.0，
fontWeight:fontWeight.w700，
),
textAlign:textAlign.start，
),
),
),
填充物(
填充：仅限常量边集（左：5.0），
子对象：对齐(
对齐：alignment.centerLeft，
儿童：新文本(
“Rs${storeItems[index].itemPrice}”，
样式：TextStyle(
fontWeight:fontWeight.w500，
字体大小：15.0，
颜色：颜色。深橙色（每分），
textAlign:textAlign.left，
),
),
),
],
)
],
),
);
},
),
);
}
}

• 是滚动时应隐藏的

  容器（）

• 第二个容器是“所有类别”，滚动时不应执行任何操作

• 是listView本身，这是滚动发生的地方

---

您可以使用

滚动控制器

实现这一点：

为此，我相信您必须更改在该屏幕的父窗口小部件中创建控制器的需要，然后将其传递给您的

ProductView

（3），以便它使用它。然后向控制器添加一个侦听器，以便在滚动高度为0或结束时 然后将

水平列表设置为可见或不可见

//...parent widget up here

class _ParentWidgetState extends State<ParentWidget> {
  final ScrollController scrollcontroller = new ScrollController();

  bool scroll_visibility = true;
  
  @Override
  void initState() {
    scrollcontroller.addListener(() {
      if(scrollcontroller.position.pixels > 0 || scrollcontroller.position.pixels < scrollcontroller.position.maxScrollExtent)
        scroll_visibility = false;
      else 
        scroll_visibility = true;

      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Visibility(
            visible: scroll_visibility,
            child: HorizontalList()
          ),
          Padding(
            padding: EdgeInsets.only(top: 2.0),
          ),
          CategoriesBar(), 
          Padding(
            padding: EdgeInsets.only(top: 4.0),
          ),
          /*
            You will need to pass the controller down to the scroll view in your product
            view widget, so it can work...
          */
          ProductView(controller: scrollcontroller), 
        ],
      )
    );
  }
}

由于我们已经在父级中描述了事件侦听器，我们只需将其添加到您的滚动小部件中，您应该很酷…
wrap 1 in Visibility（），然后收听scrollController 3？很可能您需要
CustomScrollView
-文档中说：“一个ScrollView，它使用条子创建自定义滚动效果。CustomScrollView允许您直接提供片段以创建各种滚动效果，例如列表、网格和展开标题。例如，要创建一个滚动视图，其中包含一个展开的应用程序栏，后跟一个列表和一个网格，请使用包含三个片段的列表：SliverAppBar、SliverList和SliverGrid。“使用SliveRappBar感谢您的回答，请您向我解释如何将控制器向下传递到滚动视图？我不熟悉这个flutter的东西。好的，我需要你用
ProductView
widget的内容更新你的问题。。。
class ProductView extends StatefulWidget {
 @override
 _ProductViewState createState() => _ProductViewState();
 }

class _ProductViewState extends State<ProductView> {
 @override
 Widget build(BuildContext context) {


return new Flexible(
  child: new GridView.builder(
    gridDelegate:
        new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    itemCount: storeItems.length,
    itemBuilder: (BuildContext context, int index) {
      return new Card(
        elevation: 12.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: new Stack(
          alignment: FractionalOffset.bottomCenter,
          children: <Widget>[
            new Column(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10.0),
                      topRight: Radius.circular(10.0)),
                  child: new Image.network(
                    storeItems[index].itemImage,
                    fit: BoxFit.cover,
                    width: 200.0,
                    height: 145.0,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(5.0),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: new Text(
                      storeItems[index].itemName,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.w700,
                      ),
                      textAlign: TextAlign.start,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 5.0),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: new Text(
                      "Rs${storeItems[index].itemPrice}",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: 15.0,
                          color: Colors.deepOrangeAccent),
                      textAlign: TextAlign.left,
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      );
    },
  ),
);
}
}

//...parent widget up here

class _ParentWidgetState extends State<ParentWidget> {
  final ScrollController scrollcontroller = new ScrollController();

  bool scroll_visibility = true;
  
  @Override
  void initState() {
    scrollcontroller.addListener(() {
      if(scrollcontroller.position.pixels > 0 || scrollcontroller.position.pixels < scrollcontroller.position.maxScrollExtent)
        scroll_visibility = false;
      else 
        scroll_visibility = true;

      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Visibility(
            visible: scroll_visibility,
            child: HorizontalList()
          ),
          Padding(
            padding: EdgeInsets.only(top: 2.0),
          ),
          CategoriesBar(), 
          Padding(
            padding: EdgeInsets.only(top: 4.0),
          ),
          /*
            You will need to pass the controller down to the scroll view in your product
            view widget, so it can work...
          */
          ProductView(controller: scrollcontroller), 
        ],
      )
    );
  }
}

class ProductView extends StatefulWidget {
  final ScrollController controller;
  
  /*
  *  this is where we add the controller so we contstruct with the controller
  *  from the parent.
  */
  ProductView({@required this.controller});

  @override
  _ProductViewState createState() => _ProductViewState();
}
/*
*  With that we now have a predefined controller from parent that we can use
*  in the ProductView widget.
*/
class _ProductViewState extends State<ProductView> {
  @override
  Widget build(BuildContext context) {
    return new Flexible(
      child: new GridView.builder(
        //then we add the controller here
        controller: widget.controller,
        gridDelegate:
          new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemCount: storeItems.length,
        itemBuilder: (BuildContext context, int index) {
        //...your code here as described above
        }
      )
    )
  }
}