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

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

结果