如何在滚动颤动中隐藏容器

Question

如何隐藏容器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)
    ],
  ),

HorizontalList()的代码：-

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：

为此，我相信您将不得不更改在此屏幕的父窗口小部件中创建控制器的需求，然后将其传递给ProductView（3）以便使用它。然后将侦听器添加到控制器，以便滚动高度为0或末尾然后使HorizontalList可见或不可见。

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

更新

太好了，现在让我们看看如何传递在上面的父小部件中定义的控制器。由于我们说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
        }
      )
    )
  }
}

因为我们已经在父级中描述了事件侦听器，所以我们只需将其添加到滚动小部件中，您就应该很酷...