Flutter 如何设置gridview子级的宽度以匹配屏幕宽度？
我有Flutter 如何设置gridview子级的宽度以匹配屏幕宽度？,flutter,gridview,flutter-layout,Flutter,Gridview,Flutter Layout,我有GridView，它的crossAxisCount是2。我希望我的GridView孩子的宽度与屏幕宽度的一半相同，同时保持正确的纵横比。 myGridView的代码 Container( child: GridView.builder( scrollDirection: Axis.vertical, gridDelegate: SliverGridDelegateWithFixedCrossA
GridViewcrossAxisCountGridViewGridView的代码
Container(
child: GridView.builder(
scrollDirection: Axis.vertical,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
shrinkWrap: true,
padding: EdgeInsets.all(8),
itemCount: albumsCovers.length,
itemBuilder: (BuildContext context, int index) {
return MyCard(
imageName: albumsCovers.elementAt(index),
text1: albumNames.elementAt(index),
text2: albumNames.elementAt(index),
);
},
),
),
我的自定义小部件的代码。我用行
包装了我的图像
，因为没有行
小部件图像
小部件不会扩展到GridView
子部件可用的最大宽度
class MyCard extends StatelessWidget {
final String imageName;
final String text1,text2;
MyCard({this.imageName,this.text1,this.text2});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
//without Row widget Image widget does not expand to the max available size to GridView child.
Row(
children: [
Expanded(
child: Image(image: AssetImage(this.imageName),),
),
],
),
SizedBox(height: 8),
Text(
this.text1,
overflow: TextOverflow.ellipsis,
softWrap: false,
maxLines: 1,
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
this.text2,
overflow: TextOverflow.ellipsis,
softWrap: false,
maxLines: 1,
style: TextStyle(
fontSize: 14,
color: Color(0xFF8E8E8E),
),
),
],
),
);
}
}
我希望我的GridView
看起来像这样。但是我的文本
下面的图像
被剪切，颤振
显示底部溢出。
注意：我已经有了纵横比为1:1的图像。
这就是一张MyCard
的样子。
这是GridView
的预期外观。
试试（固定纵横比，不需要行）
Try（修复纵横比，不需要行）
您应该删除展开的和行
，然后使用名为fit
的图像
属性，然后将其称为BoxFit
，代码如下
Container(
decoration: BoxDecoration(color: Colors.grey),
child: AspectRatio(
aspectRatio: 300 / 200,
child: Image.asset(
'${widget.imageP}',
fit: BoxFit.cover,
),
),
),
您应该删除展开的和行
，然后使用名为fit
的图像
属性，然后将其称为BoxFit
，代码如下
Container(
decoration: BoxDecoration(color: Colors.grey),
child: AspectRatio(
aspectRatio: 300 / 200,
child: Image.asset(
'${widget.imageP}',
fit: BoxFit.cover,
),
),
),
我刚刚计算了每个文本
小部件的高度，并设置了@刺客提到的childAspectRatio:itemWidth/itemHeight
。
计算文本的高度
final TextStyle textStyle14 = TextStyle(
fontSize: 14,
color: Colors.white,
);
final TextStyle textStyle16 = TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold,
);
Size _textSize(String text,TextStyle textStyle,BuildContext context)=> (TextPainter(
text: TextSpan(text: text, style: textStyle),
maxLines: 1,
textScaleFactor: MediaQuery.of(context).textScaleFactor,
textDirection: TextDirection.ltr)
..layout())
.size;
内部构建
功能：
var size = MediaQuery.of(context).size;
//subtracting margin value from screen width
final double itemWidth = size.width*(0.5)-8;
// height of image is same as width of image. so itemHeight = itemWidth + (height of 2 Text+8 margin)
final double itemHeight = itemWidth +(_textSize('Text', textStyle14,context).height.ceil() + _textSize('Text', textStyle16,context).height.ceil()+8);
网格视图的代码
：
Container(
child: GridView.builder(
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: (itemWidth / itemHeight),
),
shrinkWrap: true,
padding: EdgeInsets.all(8),
itemCount: albumsCovers.length,
itemBuilder: (BuildContext context, int index) {
return MadeForUCard(
imageName: albumsCovers.elementAt(index),
text1: albumNames.elementAt(index),
text2: albumNames.elementAt(index),
);
},
),
),
我刚刚计算了每个文本
小部件的高度，并设置了@刺客提到的childAspectRatio:itemWidth/itemHeight
。
计算文本的高度
final TextStyle textStyle14 = TextStyle(
fontSize: 14,
color: Colors.white,
);
final TextStyle textStyle16 = TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold,
);
Size _textSize(String text,TextStyle textStyle,BuildContext context)=> (TextPainter(
text: TextSpan(text: text, style: textStyle),
maxLines: 1,
textScaleFactor: MediaQuery.of(context).textScaleFactor,
textDirection: TextDirection.ltr)
..layout())
.size;
内部构建
功能：
var size = MediaQuery.of(context).size;
//subtracting margin value from screen width
final double itemWidth = size.width*(0.5)-8;
// height of image is same as width of image. so itemHeight = itemWidth + (height of 2 Text+8 margin)
final double itemHeight = itemWidth +(_textSize('Text', textStyle14,context).height.ceil() + _textSize('Text', textStyle16,context).height.ceil()+8);
网格视图的代码
：
Container(
child: GridView.builder(
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: (itemWidth / itemHeight),
),
shrinkWrap: true,
padding: EdgeInsets.all(8),
itemCount: albumsCovers.length,
itemBuilder: (BuildContext context, int index) {
return MadeForUCard(
imageName: albumsCovers.elementAt(index),
text1: albumNames.elementAt(index),
text2: albumNames.elementAt(index),
);
},
),
),
请尝试childAspectRatio:itemWidth/itemHeight
在内部使用SliverGridDelegateWithFixedCrossAxisCount
在中使用自定义itemWidth和itemHeightgridview@user11862325@刺客itemWidth
将始终是屏幕大小的一半，因此我可以轻松获得itemWidth
。但是如何获取itemHeight
？Text
将根据不同的手机大小和用户偏好而具有不同的大小。您是否尝试过MediaQuery
@user11862325@Assassin我读了你提到的那篇文章。但这仍然不能解决我的问题。我知道我可以通过计算（0.5）*MediaQuery.of（context.size.width
得到itemWidth
。而itemHeight
将是itemHeight=itemWidth+（2个文本小部件的高度+8）
这完全不取决于屏幕高度。请尝试childAspectRatio:itemWidth/itemHeight
在内部使用SliverGridDelegateWithFixedCrossAxisCount
在中使用自定义itemWidth和itemHeightgridview@user11862325@刺客itemWidth
将始终是屏幕大小的一半，因此我可以轻松获得itemWidth
。但是如何获取itemHeight
？Text
将根据不同的手机大小和用户偏好而具有不同的大小。您是否尝试过MediaQuery
@user11862325@Assassin我读了你提到的那篇文章。但这仍然不能解决我的问题。我知道我可以通过计算（0.5）*MediaQuery.of（context.size.width
得到itemWidth
。而itemHeight
将是itemHeight=itemWidth+（2个文本小部件的高度+8）
，这根本不取决于屏幕高度。我想你误解了我的问题。我有一些图像的纵横比已经是1:1了。所以我使用了图像小部件。我希望它们看起来像我上传的图片（图片的宽度是屏幕宽度的一半。）你试过了吗。它做你想做的。它不再在底部溢出，但是图像
大小减小了。（图像的宽度不是我要求的屏幕大小的一半。）我想你误解了我的问题。我有一些图像的纵横比已经是1:1了。所以我使用了图像小部件。我希望它们看起来像我上传的图片（图片的宽度是屏幕宽度的一半。）你试过了吗。它做你想要的。它不再在底部溢出，但图像
大小已减小。（图像的宽度
不是我需要的屏幕大小的一半。）