如何在 Flutter 中将 Header 添加到 GridView?

Posted

技术标签:

【中文标题】如何在 Flutter 中将 Header 添加到 GridView?【英文标题】:How to add Header to GridView in flutter? 【发布时间】:2020-08-10 21:08:30 【问题描述】:

您好,我想创建一个带有 crossAxisCount: 2 和 scrollDirection: Axis.horizo​​ntal 的 GridView.builder 并且每组 GridView 都需要一个标题,请检查图片

Need to build something link this but

【问题讨论】:

分享你的代码和你尝试过的事情。 ***.com/help/how-to-ask 每组gridview是什么意思? @VirenVVarasadiya 你能检查一下链接吗? @JoãoSoares 我试图在 url 中创建一些看起来像图像的东西。你能帮帮我吗 @Thobio 如果您需要帮助,可以先查看我发送给您的链接并遵循问题指南。 【参考方案1】:

您可以通过以下方式使用 gridView.builder 和 Row 小部件进行构建。

@override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: Container(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Top"),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: GridView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemBuilder: (BuildContext context, int index) 
                      return Text(index.toString());
                    ,
                  ),
                )
              ],
            ),
          ),
          Text("Trending"),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: GridView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemBuilder: (BuildContext context, int index) 
                      return Text(index.toString());
                    ,
                  ),
                )
              ],
            ),
          ),
        ],
      )),
    );
  

【讨论】:

谢谢,列中的小部件 ("Top","Trending") 将是动态小部件可能会根据动态数据增加或减少,例如:("Top","Trending", “热门搜索” ....)请帮助 .... 我不知道更多的上下文,所以我无法帮助你。您可以使用变量动态更改值。

以上是关于如何在 Flutter 中将 Header 添加到 GridView?的主要内容,如果未能解决你的问题,请参考以下文章