英文:
Flutter- Stack takes a lot of height despite the children
问题
I'm using Listview.builder to show products.
I use mediaQuery to check if screen width is big enough then it would use GridView.builder() as shown in the image below. However, there is a problem with GridView.builder() only, which is that it exceeds the Stack Height. I checked with Flutter DevTools and found that the column inside the stack is just taking its minimum size. So, what causes the stack to be this big?
child: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
// Work Image
AspectRatio(
aspectRatio: 16.0 / 9.0,
child: Image.asset(
Constants.appLogo,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.only(
left: Sizes.PADDING_18,
bottom: Sizes.PADDING_8,
right: Sizes.PADDING_8,
),
// Work Title, Address
child: Row(
children: [
Flexible(
child: Text(
testAddress.length > 25
? '${testAddress.substring(0, 25)}...'
: testAddress,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: Sizes.TEXT_SIZE_22,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: Sizes.PADDING_18,
bottom: Sizes.PADDING_8,
right: Sizes.PADDING_8,
),
// Subtitle
child: Row(
children: [
Flexible(
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.bottomLeft,
child: Text(
testAddress.length > 34
? '${testAddress.substring(0, 34)}...'
: testAddress,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize: Sizes.TEXT_SIZE_14,
color: Colors.grey.withOpacity(0.8),
),
),
),
),
],
),
),
],
),
],
),
英文:
I'm using Listview.builder to show products.
I use mediaQuery to check if screen width is big enough then it would use Grideview.builder() as show in image below but there is a problem with Grideview.builder() only which is this excees Stack Height, i checked with flutter devTools and found the the column inside stack is just taking it min size so what causes stack to be this big?
child: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
// Work Image
AspectRatio(
aspectRatio: 16.0 / 9.0,
child: Image.asset(
Constants.appLogo,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.only(
left: Sizes.PADDING_18,
bottom: Sizes.PADDING_8,
right: Sizes.PADDING_8,
),
// Work Title, Adress
child: Row(
children: [
Flexible(
child: Text(
testAdress.length > 25
? '${testAdress.substring(0, 25)}...'
: testAdress,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: Sizes.TEXT_SIZE_22,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: Sizes.PADDING_18,
bottom: Sizes.PADDING_8,
right: Sizes.PADDING_8,
),
//SubTitle
child: Row(
children: [
Flexible(
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.bottomLeft,
child: Text(
testAdress.length > 34
? '${testAdress.substring(0, 34)}...'
: testAdress,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize: Sizes.TEXT_SIZE_14,
color: Colors.grey.withOpacity(0.8),
),
),
),
),
],
),
),
],
),
],
),
),
],
),
答案1
得分: 1
在GridView上，默认的childAspectRatio为1，你可以设置为childAspectRatio: 16.0 / 9.0。
childAspectRatio: 16.0 / 9.0,
英文:
Default childAspectRatio:1 on gridView, you can set childAspectRatio: 16.0 / 9.0
childAspectRatio: 16.0 / 9.0,
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论