Flutter 基于屏幕大小的网格高度
嗨,朋友们,我在根据屏幕设置视图的卡片高度时遇到问题,我尝试使用下面的代码动态设置屏幕。请找到屏幕,我需要文本下方的精确10页边距,没有这么多,我尝试使用动态媒体查询如果我不使用媒体查询,它会让我出错,比如屏幕下面有多余的空间,我也不能使用大小的框。请帮助朋友当我使用分段网格视图时,底部有空间Flutter 基于屏幕大小的网格高度,flutter,flutter-layout,flutter-sliver,Flutter,Flutter Layout,Flutter Sliver,嗨,朋友们,我在根据屏幕设置视图的卡片高度时遇到问题,我尝试使用下面的代码动态设置屏幕。请找到屏幕,我需要文本下方的精确10页边距,没有这么多,我尝试使用动态媒体查询如果我不使用媒体查询,它会让我出错,比如屏幕下面有多余的空间,我也不能使用大小的框。请帮助朋友当我使用分段网格视图时,底部有空间 @override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; final
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
final double itemHeight = (size.height - kToolbarHeight - 24) / 2.3;
final double itemWidth = size.width / 2;
return livevideolist != null
? new GridView.builder(
itemCount: livevideolist == null ? 0 : livevideolist.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: (itemWidth / itemHeight),
crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
onTap: () {
String youtubeid = livevideolist[index]['url'];
playYoutubeVideo(youtubeid);
},
child: new Card(
elevation: 4.0,
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
child: new Column(
children: <Widget>[
new Container(
height: 150.0,
width: double.infinity,
decoration: new BoxDecoration(
image: new DecorationImage(
image:
new NetworkImage(livevideolist[index]['image']),
fit: BoxFit.fill,
),
),
),
Expanded(
child: new Container(
child: new Text(livevideolist[index]['title']),
margin: EdgeInsets.only(left: 10.0, top: 10.0),
),
),
],
),
),
);
},
)
: new Center(
child: new CircularProgressIndicator(),
);
}
@覆盖
小部件构建(构建上下文){
var size=MediaQuery.of(context).size;
最终双项目高度=(size.height-kToolbarHeight-24)/2.3;
最终双项目宽度=size.width/2;
返回livevideolist!=null
?新建GridView.builder(
itemCount:livevideolist==null?0:livevideolist.length,
gridDelegate:新SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio:(项目宽度/项目高度),
交叉轴计数:2),
itemBuilder:(构建上下文,int索引){
返回新的手势检测器(
onTap:(){
字符串youtubeid=livevideolist[index]['url'];
播放YouTubevideo(youtubeid);
},
孩子:新卡(
标高:4.0,
边距:仅限边集(左:10.0,右:10.0,顶:5.0),
子:新列(
儿童:[
新容器(
高度:150.0,
宽度:double.infinity,
装饰:新盒子装饰(
图片:新装饰图片(
图片:
新网络图像(livevideolist[索引]['image']),
fit:BoxFit.fill,
),
),
),
扩大(
子容器:新容器(
子项:新文本(livevideolist[索引]['title']),
边距:仅限边集(左侧:10.0,顶部:10.0),
),
),
],
),
),
);
},
)
:新中心(
子项:新的CircularProgressIndicator(),
);
}
您可以使用此软件包,请检查此软件包: 以下是您可以使用的方法:
Widget build(BuildContext context) {
return livevideolist != null
? new StaggeredGridView.countBuilder(
crossAxisCount: 2,
itemCount: livevideolist == null ? 0 : livevideolist.length,
staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
onTap: () {},
child: new Card(
elevation: 4.0,
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Container(
height: 150.0,
width: double.infinity,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new NetworkImage(
"https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/ImageFight_arcadeflyer.png/256px-ImageFight_arcadeflyer.png"),
fit: BoxFit.cover,
),
),
),
new Padding(
child: new Text(
"Use a very long text here to see how it expands"),
padding: EdgeInsets.only(left: 10.0, top: 10.0),
),
],
),
),
);
},
)
: new Center(child: new CircularProgressIndicator());
}
为您的图像使用fit:BoxFit.cover,而不是fit:BoxFit.fill
因此,看起来您的文本有不同的大小,您可以强制父容器的高度:
new Container(
height: 80.0, //you can change this value
child: new Text(
"Use a very long text here to see how it expands"),
padding: EdgeInsets.only(left: 10.0, top: 10.0),
),
但是我需要所有标题的网格高度必须相同,对吗?哦,我想你想要一个动态高度取决于文本检查代码,项目的高度将根据你的文本描述确定我将按照你给出的方式尝试让你知道我已经按照你说的方式尝试了你的代码,但是第二个孩子的高度越来越大
new Container(
height: 80.0, //you can change this value
child: new Text(
"Use a very long text here to see how it expands"),
padding: EdgeInsets.only(left: 10.0, top: 10.0),
),