flutter - 如何在 Flutter 中将 Header 添加到 GridView?
问题描述
嗨,我想创建一个带有 crossAxisCount: 2 和 scrollDirection: Axis.horizontal 的 GridView.builder 并且每组 GridView 都需要一个标题,请检查图像
解决方案
您可以通过以下方式使用 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());
},
),
)
],
),
),
],
)),
);
}
推荐阅读
- android - 如何改进我的动画并使其均匀(Jetpack Compose)?
- nestjs - Nestjs:无法异步连接mongo
- python - Django 查询多对多
- node.js - 从另一个控制器调用控制器是一个坏主意吗?
- cakephp - 如何查询与特定联接表条目关联的数据?
- android - 房间更新不起作用(尝试了许多变化)
- maven - maven-dependency-plugin 复制的依赖项的 jar-s 未安装到本地存储库
- javascript - Kotlin - 将 JavaScript 注入 WebView 以填写表单
- angular - 来自角度的公共 API 调用中的 CORS 问题,但直接在浏览器中工作正常
- c - 另一个互斥锁内的互斥锁