网格视图中的列在网格视图的每一项中都溢出了,我不明白这里发生了什么。
Expanded(
child: GridView.builder(
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, mainAxisExtent: 150, mainAxisSpacing: 20),
itemBuilder: (context, int index) {
return Recommendations();
},
))
// Recommendations Section
class Recommendations extends StatelessWidget {
const Recommendations({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 180,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 2,
spreadRadius: 1,
)
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
decoration: BoxDecoration(
color: Colors.red, borderRadius: BorderRadius.circular(15)),
width: 180,
height: 180,
child: Text(""),
)
],
),
Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Powerfule am",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Rs. 24,000",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: ElevatedButton(
onPressed: () {},
child: Text("Learn More", style: TextStyle(fontSize: 10)),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey.shade800,
minimumSize: Size.zero,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
)
],
),
);
}
}
我可以在使用列表视图和行的时候做到这一点,但这不是最佳的,我认为会有比这更好的解决方案。
我希望你能帮我这个忙。
谢谢你的阅读。
1条答案
按热度按时间wyyhbhjk1#
要解决此问题,您可以将列 Package 在一个展开的小部件中。这将允许Column占据Container内的可用高度