如何在颤动中减小gridview.builder的gridview项之间的空间大小
Posted
技术标签:
【中文标题】如何在颤动中减小gridview.builder的gridview项之间的空间大小【英文标题】：How to reduce the size of space between gridview items of gridview.builder in flutter 【发布时间】：2021-11-24 21:36:48 【问题描述】：我在 Flutter 中使用 GridView.builder 制作了一个网格视图。我将crossAxisSpacing 和mainAxisSpacing 设为0。不过，我在项目之间和gridview 的前面之间发现了巨大的差距。检查图像以了解有关空间的确切信息。
图片 1 ->
图片2->
这是我的代码 -
import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_getx/colors.dart' as color;
class HomePage extends StatefulWidget
@override
_HomePageState createState() => _HomePageState();
class _HomePageState extends State<HomePage>
List info=[];
_initData()
DefaultAssetBundle.of(context).loadString("json/info.json").then((value)
info=json.decode(value);
);
@override
void initState()
// TODO: implement initState
super.initState();
_initData();
@override
Widget build(BuildContext context)
return Scaffold(
backgroundColor: color.AppColor.homePageBackground,
body: Container(
padding: const EdgeInsets.only(top: 50, left: 30, right: 30, bottom: 10.0),
child: Column(
children: [
Row(
children: [
Text(
'Training',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.07,
color: color.AppColor.homePageTitle,
fontWeight: FontWeight.w700,
),
),
Expanded(child: Container()),
Icon(
Icons.arrow_back_ios,
size: MediaQuery.of(context).size.width*0.05,
color: color.AppColor.homePageIcons,
),
SizedBox(
width: MediaQuery.of(context).size.width*0.01,
),
Icon(
Icons.calendar_today_outlined,
size: MediaQuery.of(context).size.width*0.05,
color: color.AppColor.homePageIcons,
),
SizedBox(
width: MediaQuery.of(context).size.width*0.015,
),
Icon(
Icons.arrow_forward_ios,
size: MediaQuery.of(context).size.width*0.05,
color: color.AppColor.homePageIcons,
),
],
),
SizedBox(
height: MediaQuery.of(context).size.height*0.03,
),
Row(
children: [
Text(
'Your Program',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.04,
color: color.AppColor.homePageSubtitle,
fontWeight: FontWeight.w700,
),
),
Expanded(child: Container()),
Text(
'Details',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.04,
color: color.AppColor.homePageDetail,
),
),
SizedBox(
width: MediaQuery.of(context).size.width*0.008,
),
Icon(
Icons.arrow_forward,
size: MediaQuery.of(context).size.width*0.05,
color: color.AppColor.homePageIcons,
),
],
),
SizedBox(
height: MediaQuery.of(context).size.height*0.025,
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width*0.47,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.centerRight,
colors: [
color.AppColor.gradientFirst.withOpacity(0.8),
color.AppColor.gradientSecond.withOpacity(0.9),
]
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
topLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
topRight: Radius.circular(80),
),
boxShadow: [
BoxShadow(
offset: Offset(5, 10),
blurRadius: 20,
color: color.AppColor.gradientSecond.withOpacity(0.2),
)
]
),
child: Container(
padding: EdgeInsets.only(left: 20, top: 21, right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Next Workout',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.035,
color: color.AppColor.homePageContainerTextSmall,
),
),
SizedBox(
height: MediaQuery.of(context).size.width*0.015,
),
Text(
'Legs Toning',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.053,
color: color.AppColor.homePageContainerTextSmall,
),
),
SizedBox(
height: MediaQuery.of(context).size.width*0.015,
),
Text(
'and Glutes Workout',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.053,
color: color.AppColor.homePageContainerTextSmall,
),
),
SizedBox(
height: MediaQuery.of(context).size.width*0.06,
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
children: [
Icon(
Icons.timer,
size: MediaQuery.of(context).size.width*0.05,
color: color.AppColor.homePageContainerTextSmall,
),
SizedBox(
width: MediaQuery.of(context).size.width*0.02,
),
Text(
'60 sec',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.035,
color: color.AppColor.homePageContainerTextSmall,
),
),
],
),
Expanded(child: Container()),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60.0),
boxShadow: [
BoxShadow(
color: color.AppColor.gradientFirst,
blurRadius: 10,
offset: Offset(4, 8),
),
],
),
child: Icon(
Icons.play_circle_fill,
color: Colors.white,
size: MediaQuery.of(context).size.width*0.12,
),
),
],
),
],
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height*0.01,
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width*0.43,
child: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 120,
margin: EdgeInsets.only(top: 25.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage(
"assets/card.jpg",
),
fit: BoxFit.fill,
),
boxShadow: [
BoxShadow(
blurRadius: 30,
offset: Offset(8, 10),
color: color.AppColor.gradientSecond.withOpacity(0.4),
),
BoxShadow(
blurRadius: 10,
offset: Offset(-1, -5),
color: color.AppColor.gradientSecond.withOpacity(0.4),
),
]
),
),
Container(
height: MediaQuery.of(context).size.width*0.3,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.only(right: MediaQuery.of(context).size.width*0.5, left: MediaQuery.of(context).size.width*0.077),
decoration: BoxDecoration(
//color: Colors.redAccent.withOpacity(0.2),
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage(
"assets/figure.png",
),
fit: BoxFit.fill,
),
),
),
Container(
width: double.maxFinite,
height: 100,
margin: EdgeInsets.only(left: MediaQuery.of(context).size.width*0.36, top: MediaQuery.of(context).size.width*0.115),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"You are doing great",
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: color.AppColor.homePageDetail
),
),
SizedBox(
height: MediaQuery.of(context).size.width*0.03,
),
RichText(
text: TextSpan(
text: "Keep it up\n",
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.038,
fontWeight: FontWeight.bold,
color: color.AppColor.homePagePlanColor,
),
children: [
TextSpan(
text: "stick to your plan"
),
]
),
),
],
),
),
],
),
),
Row(
children: [
Text(
"Area of focus",
//textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w500,
color: color.AppColor.homePageTitle,
),
),
],
),
SizedBox(
height: 10,
),
Expanded(
child: OverflowBox(
maxWidth: MediaQuery.of(context).size.width,
child: GridView.builder(
shrinkWrap: true,
itemCount: info.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (_, i)
return Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Container(
width: MediaQuery.of(context).size.width*0.4,
height: MediaQuery.of(context).size.width*0.4,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage(
info[i]["img"],
),
),
boxShadow: [
BoxShadow(
blurRadius: 3,
offset: Offset(5, 5),
color: color.AppColor.gradientSecond.withOpacity(0.1),
),
]
),
child: Center(
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
info[i]["title"],
style: TextStyle(
fontSize: MediaQuery.of(context).size.width*0.05,
color: color.AppColor.homePageDetail,
),
),
),
),
),
),
],
);
,
),
),
),
],
),
),
);
您可以从第 317 行开始检查此问题
编辑：我能够使用MediaQuery.removePadding 删除一些顶部空间并将removeTop 设置为true，但仍然有一些空间。
【问题讨论】：
padding: const EdgeInsets.only(left: 20.0), 可能在您的 GridView 孩子中？
【参考方案1】：
删除只有 1 个孩子的行：
GridView.builder(
shrinkWrap: true,
itemCount: info.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (_, i)
return Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Container(
alignment: Alignment.topLeft,
width: MediaQuery.of(context).size.width * 0.4,
height: MediaQuery.of(context).size.width * 0.4,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage(
info[i]["img"]!,
),
),
boxShadow: [
BoxShadow(
blurRadius: 3,
offset: Offset(5, 5),
),
]),
child: Center(
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
info[i]["title"]!,
style: TextStyle(
fontSize: MediaQuery.of(context).size.width * 0.05,
),
),
),
),
),
);
,
),
不要问我为什么：D
【讨论】：
Bruh，我完全忘记了。这解决了一个问题。但是，我怎样才能减少它们之间的间距？顺便说一句，顶部还留有一些空间 正如@Tanguy 指出的那样，中间的间距是由于您使用padding: const EdgeInsets.only(left: 20.0) 的填充（GridView 中的第一个孩子）【参考方案2】：
对于 Gridview 中的子项间距，请始终使用 mainAxisSpacing 和 crossAxisSpacing：
GridView.builder(
shrinkWrap: true,
itemCount: info.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 5.0,
crossAxisSpacing: 5.0,
),
【讨论】：
以上是关于如何在颤动中减小gridview.builder的gridview项之间的空间大小的主要内容，如果未能解决你的问题，请参考以下文章
如何阻止 Gridview.builder 的滚动条在颤动中显示
在flutter中设置childAspectRatio的正确方法
带有 Firebase 实时数据库和 futurebuilder 的 Gridview.builder
为啥 GridView.builder 返回高度扩展的元素，而 ListView.Seperated 返回具有正常高度的元素？