堆栈窗口小部件在gridview.builder（）中不起作用
我正在尝试进行以下设计：
我将firebase用作后端作为服务，而且我的代码工作遇到了麻烦。没有错误，但是UI Visual看起来很时髦。.我正在尝试创建一个gridview.builder（）并显示我的UI的网格（下面提供的设计），但是图像不应正常工作。您会看到浅蓝色是背景颜色，即使是带有文本窗口小部件的容器，图像也应覆盖整个单元格。查看代码：
return GridView.builder(
shrinkWrap: true,
itemCount: locations.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 37,
crossAxisSpacing: 37,
),
itemBuilder: (context, index) {
Location location = locations[index];
return MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
color: blue100,
borderRadius: BorderRadius.circular(
20,
),
),
child: Stack(
children: [
ClipRRect(
child: Image.network(
location.image,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(20),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: isLight
? Color(0xFFF2F2F2)
: Colors.black,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(
20,
),
bottomRight: Radius.circular(
20,
),
),
),
height: isSmall ? 44 : 67,
child: Center(
child: CustomText(
text: locations[index].street,
size: isSmall ? 12 : 15,
),
),
),
],
),
),
],
),
),
),
);
},
);
以下是此代码的原因：
您可以显然看到代码在那里，并且一般的事情正在起作用，尽管图像不想合作并以不同的方式进行调整。
为什么这是？是GridView的东西吗？
I am trying to make the following design:
I am using Firebase as my backend as a service, and I am having trouble having my code work. There are no errors, but the UI visual looks funky.. I'm trying to create a GridView.builder() and display a grid of my UI (Designs provided below), but the image isn't working as it should be.. You'll see that the light blue is the background color, and the image should be covering the entire cell, even behind the container with the text widget. Check out the code:
return GridView.builder(
shrinkWrap: true,
itemCount: locations.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 37,
crossAxisSpacing: 37,
),
itemBuilder: (context, index) {
Location location = locations[index];
return MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
color: blue100,
borderRadius: BorderRadius.circular(
20,
),
),
child: Stack(
children: [
ClipRRect(
child: Image.network(
location.image,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(20),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: isLight
? Color(0xFFF2F2F2)
: Colors.black,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(
20,
),
bottomRight: Radius.circular(
20,
),
),
),
height: isSmall ? 44 : 67,
child: Center(
child: CustomText(
text: locations[index].street,
size: isSmall ? 12 : 15,
),
),
),
],
),
),
],
),
),
),
);
},
);
Here is what this code causes:
You can obviously see that the code is there, and the general thing is working, although the image doesn't want to cooperate and resizes itself differently.
Why is this? Is it something with the GridView..?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我也没有堆栈尝试一下，请参阅下面的代码希望它对您的帮助。在“ nofollow noreferrer”>的
gridview.builder（）结果屏幕 - ＆gt;
I have try this without Stack also, refer below code hope its help to you. add some changes in my code with your code like image and text add below design code inside
GridView.builder()Result Screen->
我们可以在GridViewBuilder（）中使用这样的堆栈
we can use stack like this inside gridviewbuilder()