Flutter 删除 GridView 行之间的 space
Flutter remove space between GridView row
我正在尝试创建一个凸起按钮的网格视图,但在网格的行之间有大量 space,如下图所示:
我正在使用页面底部的代码实现 GridView:
如你所见,我设置了:
SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4),
我原以为设置主轴间距和交叉轴间距应该会删除那些 spaces。
我还尝试将 gridview 返回到一个大小的框中并将其更改为 SliverGridWithFixedCount,但似乎没有任何改变。
我不确定我在布局中做错了什么?
感谢您的帮助
body: Column(
children: <Widget>[
Flexible(
child: filtersGridView(),
),
],
),
);
}
}
class filtersGridView extends StatefulWidget {
@override
_filtersGridViewState createState() => _filtersGridViewState();
}
class _filtersGridViewState extends State<filtersGridView> {
final List <DocumentSnapshot> documents;
_filtersGridViewState({this.documents});
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: Firestore.instance.collection('categories').snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(child: const Text('Loading events...'));
}
return GridView.builder(
gridDelegate:
SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4),
itemBuilder: (BuildContext context, int index) {
return Column(children: <Widget>[
InkWell(
onTap: () {
},
child: SizedBox(
height: 30,
child: RaisedButton(
color: Colors.white,
child: Row(
children: <Widget>[
Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.center, style: TextStyle(fontSize: 15, color: Colors.black,),),
],
),
试试这个希望它会起作用,
GridView.builder(
itemCount: 6,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Expanded(flex: 5, child: InkWell(
onTap: (){},
)),
Expanded(
flex: 5,
child: RaisedButton(
onPressed: () {},
child: Text('Bt'),
))
],
),
),
);
},
),
如果您担心按钮内部的填充 - 这是因为 material 按钮的最小宽度设置被设置为 88
。
此外,根据我的经验,我注意到 material 按钮周围有一些奇怪的边距。我用 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
.
解决了这个问题
ButtonTheme(
minWidth: 0,
height: 30,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
// ...
)
)
如果您希望按钮填充整个 maxCrossAxisExtent
高度 - 使用 RawMaterialButton
并分配自定义约束。
已更新
我以为问题出在按钮内,但我突然想到它实际上是关于 GridView Delegate 的。
SliverGridDelegateWithMaxCrossAxisExtent
如何根据 Flutter 文档工作:
This delegate creates grids with equally sized and spaced tiles.
代表的 childAspectRatio
属性 的默认值为 1.0
,即 - 一个正方形。您将获得一个完美的逻辑布局显示 - 1:1 块的网格。
要解决此问题,您需要提出正确的 childAspectRatio
值。
一些伪代码:cellHeight = cellWidth / childAspectRatio
.
例如
childAspectRatio: 2
将显示大小如下的单元格:
2
-----------------
| |
| | 1
| |
-----------------
如果有帮助,请告诉我。
将 childAspectRatio
值增加到 2,
primary: false,
scrollDirection: Axis.vertical,
// padding: const EdgeInsets.all(10),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 180.0,
shrinkWrap: true,
childAspectRatio: 2,
children: <Widget>[
container(),
container(),
container(),
])
我正在尝试创建一个凸起按钮的网格视图,但在网格的行之间有大量 space,如下图所示:
我正在使用页面底部的代码实现 GridView:
如你所见,我设置了:
SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4),
我原以为设置主轴间距和交叉轴间距应该会删除那些 spaces。
我还尝试将 gridview 返回到一个大小的框中并将其更改为 SliverGridWithFixedCount,但似乎没有任何改变。
我不确定我在布局中做错了什么?
感谢您的帮助
body: Column(
children: <Widget>[
Flexible(
child: filtersGridView(),
),
],
),
);
}
}
class filtersGridView extends StatefulWidget {
@override
_filtersGridViewState createState() => _filtersGridViewState();
}
class _filtersGridViewState extends State<filtersGridView> {
final List <DocumentSnapshot> documents;
_filtersGridViewState({this.documents});
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: Firestore.instance.collection('categories').snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(child: const Text('Loading events...'));
}
return GridView.builder(
gridDelegate:
SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4),
itemBuilder: (BuildContext context, int index) {
return Column(children: <Widget>[
InkWell(
onTap: () {
},
child: SizedBox(
height: 30,
child: RaisedButton(
color: Colors.white,
child: Row(
children: <Widget>[
Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.center, style: TextStyle(fontSize: 15, color: Colors.black,),),
],
),
试试这个希望它会起作用,
GridView.builder(
itemCount: 6,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Expanded(flex: 5, child: InkWell(
onTap: (){},
)),
Expanded(
flex: 5,
child: RaisedButton(
onPressed: () {},
child: Text('Bt'),
))
],
),
),
);
},
),
如果您担心按钮内部的填充 - 这是因为 material 按钮的最小宽度设置被设置为 88
。
此外,根据我的经验,我注意到 material 按钮周围有一些奇怪的边距。我用 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
.
ButtonTheme(
minWidth: 0,
height: 30,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
// ...
)
)
如果您希望按钮填充整个 maxCrossAxisExtent
高度 - 使用 RawMaterialButton
并分配自定义约束。
已更新
我以为问题出在按钮内,但我突然想到它实际上是关于 GridView Delegate 的。
SliverGridDelegateWithMaxCrossAxisExtent
如何根据 Flutter 文档工作:
This delegate creates grids with equally sized and spaced tiles.
代表的 childAspectRatio
属性 的默认值为 1.0
,即 - 一个正方形。您将获得一个完美的逻辑布局显示 - 1:1 块的网格。
要解决此问题,您需要提出正确的 childAspectRatio
值。
一些伪代码:cellHeight = cellWidth / childAspectRatio
.
例如
childAspectRatio: 2
将显示大小如下的单元格:
2
-----------------
| |
| | 1
| |
-----------------
如果有帮助,请告诉我。
将 childAspectRatio
值增加到 2,
primary: false,
scrollDirection: Axis.vertical,
// padding: const EdgeInsets.all(10),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 180.0,
shrinkWrap: true,
childAspectRatio: 2,
children: <Widget>[
container(),
container(),
container(),
])