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

Posted 2023-02-23

【中文标题】Flutter - 在网格视图的末尾添加一个按钮

【英文标题】：Flutter - Add a button at the end of Grid View

【发布时间】：2020-11-15 18:16:53

【问题描述】：

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

我的设计也有类似的。这是一个粗略的草图。

也只是为了澄清，我希望按钮在用户滚动到网格视图的末尾时出现。

我还是新手，所以非常感谢您的帮助:)

【参考方案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()
          ]
        )
      )
    );
  

结果

【讨论】：

(1) 请不要添加“希望对你有帮助”、“希望有用”、“学习愉快”等浮夸。技术写作在这里是一种期望。我一般认为这种事情只不过是乞求投票。

(2) 引用块不适用于一般突出显示或分栏框。顾名思义，引用块用于引用，即不是您自己声音的材料。在您自己的材料中使用引号在语义上是不正确的，除非您引用您在其他地方说过/写过的演讲或文档。

(3) 我们在这个平台上没有足够好的编辑器，一般来说，我们确实关心这里的材料质量。他们希望材料能够被广泛的未来受众阅读。如果您不顾他们的指导继续复制相同的格式/演示错误，那么您正在为他们创造新的工作。以这种方式浪费志愿者的时间（显然）是不友善的。

一般来说，作者倾向于过度使用突出显示功能。他们全大写（看起来像是在喊叫）或鼓励整个段落（看起来很糟糕）。一口气，您可以使用斜体，因为它对阅读的干扰较小，但我不会将它用于超过一个句子。上面的帖子现在很好，您想要突出显示的部分以标题结尾。我认为这是可读的，不需要额外的格式。

谢谢@halfer。感谢您在指导我方面投入的时间和精力。我会将这些答案留在脑海中，以便继续在 SO 中写出最佳答案。 :)