Question

我想在GridView的末尾添加一个按钮。我查看了另一个类似的问题，但是答案中给出的代码无法滚动。 Here是该答案的链接。

我的设计与此类似。这是一个粗略的草图。

同样为了澄清，我希望用户滚动到网格视图的末尾时显示按钮。

我还是很陌生，所以非常感谢您的帮助：）

Answer 1

您需要的是ScrollController class。

为什么要使用滚动控件？

它跟踪我们在进行滚动操作，即scrolling，reached bottom或top

我们如何使用它？

您需要在GridView内部使用它，以启动并运行

// Simply initialise your controller in your project
ScrollController _controller = new ScrollController();

// add listener to the controller to find out the scrolling event
_controller.addListener((){});

// pass this into your GridView. 
// We we will add it to GridView. ScrollController is for every scrolling widget
// in Flutter
GridView.builder(
   controller: _controller,
)

免责声明：：请不要关注UI方面，因为我们关心滚动事件跟踪并显示/隐藏按钮

我仅参考了给定的链接来创建UI => Your Provided Link
此外，我添加了滚动事件以标识我们是否正在滚动，但已注释
该项目当前在到达底部时显示按钮，而在顶部时隐藏按钮

代码

class _MyHomePageState extends State<MyHomePage> {
  List<String> homeList = [];
  
  //to check whether we have reached bottom
  bool isBottom = false;
  
  ScrollController _controller = new ScrollController();
  
  @override
  void initState() {
    super.initState();
    homeList = List.generate(10, (ind) => 'Item $ind').toList();
    
    // adding controller to check whether the page is 
    // at the bottom
    _controller.addListener((){
        // reached bottom
        if (_controller.offset >= _controller.position.maxScrollExtent &&
          !_controller.position.outOfRange) {
            setState(() => isBottom = true);
        }
      
        // IS SCROLLING
//         if (_controller.offset >= _controller.position.minScrollExtent &&
//             _controller.offset < _controller.position.maxScrollExtent && !_controller.position.outOfRange) {
//           setState(() {
//             isBottom = false;
//           });
//         }
      
        // REACHED TOP
        if (_controller.offset <= _controller.position.minScrollExtent &&
        !_controller.position.outOfRange) {
            setState(() => isBottom = false);
        }
     });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            GridView.builder(
              shrinkWrap: true,
              controller: _controller,
              itemCount: homeList.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, crossAxisSpacing: 20),
              itemBuilder: (ctx, i) {
                return GestureDetector(
                  onTap: () => print(i),
                  child: Container(
                    margin: EdgeInsets.only(bottom: 20.0),
                    decoration: BoxDecoration(
                      color: Colors.indigo[300],
                      borderRadius: BorderRadius.circular(15.0)
                    )
                  )
                );
              }
            ),
            // if we are bottom we show the button
            // else empty container, which is nothing but
            // hiding technique in Flutter
            isBottom ? Positioned(
              bottom: 20,
              left: 18,
              right: 18,
              child: Container(
                alignment: Alignment.center,
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.orangeAccent,
                  borderRadius: BorderRadius.circular(15),
                ),
                child: Text('Your widget at the end')
              )
            ) : Container()
          ]
        )
      )
    );
  }
}

结果

Flutter-在网格视图的末尾添加一个按钮

1 个答案: