flutter - 如何在滚动 flutter 上隐藏容器

Question

如何在滚动(从上到下)上隐藏容器 Horizo​​ntalList()(下图中标记的数字 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)
    ],
  ),

Horizo​​ntalList() 的代码:-

import 'package:flutter/material.dart';
class HorizontalList extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
return Container(
  height: 85.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      Catagory(
        image_location: 'Images/Icons/smartphone.png',
        image_caption: 'Electronics',
        image_catagory: 'electronics',
      ),
      Catagory(
        image_location: 'Images/Icons/car.png',
        image_caption: 'Vehicles',
        image_catagory: 'vehicles',
      ),
      Catagory(
        image_location: 'Images/Icons/property.png',
        image_caption: 'Housing',
        image_catagory: 'realestate',
      ),
      Catagory(
        image_location: 'Images/Icons/shoes.png',
        image_caption: "${'Fashion & Accessories'.substring(0,9)}...", //'',
        image_catagory: 'fashion',
      ),
      Catagory(
        image_location: 'Images/Icons/baby.png',
        image_caption: "${'Baby & Child'.substring(0,8)}...", //'',
        image_catagory: 'baby',
      ),
      Catagory(
        image_location: 'Images/Icons/mega-ball.png',
        image_caption: "${'Leisure & Games'.substring(0,9)}...", //'',
        image_catagory: 'sports',
      ),
      Catagory(
        image_location: 'Images/Icons/sofa.png',
        image_caption: "${'Home & Garden'.substring(0,6)}...",
        image_catagory: 'furnitures',
      ),
      Catagory(
        image_location: 'Images/Icons/agreement.png',
        image_caption: "${'Jobs & Services'.substring(0,8)}...",
        image_catagory: 'jobs',
      ),
      Catagory(
        image_location: 'Images/Icons/boxes.png',
        image_caption: 'Other',
        image_catagory: 'other',
      ),
      Catagory(
        image_location: 'Images/Icons/gift.png',
        image_caption: 'Free Stuff',
        image_catagory: 'free',
      ),
    ],
  ),
);
}
}

class Catagory extends StatelessWidget {
final String image_location;
final String image_caption;
final String image_catagory;
Catagory({this.image_location, this.image_caption, this.image_catagory});
@override
 Widget build(BuildContext context) {
return Padding(
  padding: const EdgeInsets.all(0.0),
  child: GestureDetector(
    onTap: () {
      print("$image_catagory"); //Print tapped image_caption
    },
    child: Container(
      width: 105.0,
      color: Color(0xFF051622),
      child: ListTile(
        title: CircleAvatar(
          //Circle with gold border
          radius: 30.0,
          backgroundColor: Color(0xFFDEB992),
          child: CircleAvatar(
            //Circle which containes the icon
            radius: 27.0,
            backgroundColor: Colors.white,
            child: Image.asset(image_location),
          ),
        ),
        subtitle: Container(
          alignment: Alignment.topCenter,
          height: 18.0,
          child: Text(
            image_caption,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    ),
  ),
);
}
}

ProductView() 的代码

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,
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      );
    },
  ),
);
}
}

1. • 是滚动时应隐藏的Container()
2. • 是第二个容器“所有类别”，滚动时不执行任何操作
3. • 是listView本身，这是滚动发生的地方。

Answer 1

您可以使用 ScrollController 来实现此目的:

为此，我相信您必须更改在此屏幕的父小部件中创建 Controller 的需求，然后将其传递到您的 ProductView(3) 以便它使用它。然后向 Controller 添加一个监听器，以便如果滚动高度为 0 或在末尾 然后您使 Horizo​​ntalList 可见或不可见。

//...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), 
        ],
      )
    );
  }
}

更新

好的，太棒了，现在让我们看看如何传递我们在上面的父小部件中定义的 Controller 。既然我们说我们有 ProductView 作为 ProductView(controller:scrollcontroller)，我们需要在 ProductView 小部件中声明它:

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
        }
      )
    )
  }
}

由于我们已经在父级中描述了事件监听器，因此我们只需将其添加到您的滚动小部件中，您应该很酷...