GridView.builder 放在 Flutter 的容器中时,如何从顶部构建?
How can I have the GridView.builder build from the top when placed in a container in Flutter?
当我将 GridView.builder 放入一个特定大小的容器中时(因此 GridView.builder 只占据了这个 parent 的大小),我似乎无法得到它 children 自上而下构建。
相反,在开始构建之前顶部有一个间隙,底部有 none。我已尝试使用对齐小部件和 GridView.builder 参数,但我无法对其进行调整。
如何更改此设置,以便 children 可以自上而下构建(或者甚至将 children 居中,顶部和底部的空白 space 相等)?
这里是简化的代码:
import 'package:flutter/material.dart';
class GridViewExample extends StatefulWidget {
const GridViewExample({Key? key}) : super(key: key);
@override
_GridViewExampleState createState() => _GridViewExampleState();
}
class _GridViewExampleState extends State<GridViewExample> {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
alignment: Alignment.topCenter,
color: Colors.blue,
width: 200,
height: 500,
child: GridView.builder(
itemCount: 50,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5,
),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.orange,
),
),
),
),
);
}
}
[![GridImage][1]][1]
[1]: https://i.stack.imgur.com/gjuRX.png
删除其默认填充:
GridView.builder(
itemCount: 50,
//add this line ---------<
padding: EdgeInsets.zero,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5,
),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.orange,
),
),
),
MediaQuery.removePadding(
context: context,
removeTop: true,
child: GridViewContainer(),
)
在 GridView 之前添加这个
当我将 GridView.builder 放入一个特定大小的容器中时(因此 GridView.builder 只占据了这个 parent 的大小),我似乎无法得到它 children 自上而下构建。
相反,在开始构建之前顶部有一个间隙,底部有 none。我已尝试使用对齐小部件和 GridView.builder 参数,但我无法对其进行调整。
如何更改此设置,以便 children 可以自上而下构建(或者甚至将 children 居中,顶部和底部的空白 space 相等)?
这里是简化的代码:
import 'package:flutter/material.dart';
class GridViewExample extends StatefulWidget {
const GridViewExample({Key? key}) : super(key: key);
@override
_GridViewExampleState createState() => _GridViewExampleState();
}
class _GridViewExampleState extends State<GridViewExample> {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
alignment: Alignment.topCenter,
color: Colors.blue,
width: 200,
height: 500,
child: GridView.builder(
itemCount: 50,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5,
),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.orange,
),
),
),
),
);
}
}
[![GridImage][1]][1]
[1]: https://i.stack.imgur.com/gjuRX.png
删除其默认填充:
GridView.builder(
itemCount: 50,
//add this line ---------<
padding: EdgeInsets.zero,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5,
),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.orange,
),
),
),
MediaQuery.removePadding(
context: context,
removeTop: true,
child: GridViewContainer(),
)
在 GridView 之前添加这个