Ege*_*Ege 6 dart flutter flutter-layout
我试图通过在彼此之间使用偶数空格将元素放在红色框中的问题的屏幕截图.(就像给每个人增加重量1).为此,我将"mainAxisAlignment:MainAxisAlignment.spaceEvenly"放在父列中,但它不起作用.
Container(
margin: EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CachedNetworkImage(
imageUrl:
"https://image.tmdb.org/t/p/w500/${movieDetails
.posterPath}",
height: 120.0,
fit: BoxFit.fill),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
children: <Widget>[
generateRow(
Strings.released, movieDetails.releaseDate),
generateRow(Strings.runtime,
movieDetails.runtime.toString()),
generateRow(Strings.budget,
movieDetails.budget.toString())
],
)))
],
)),
Run Code Online (Sandbox Code Playgroud)
这是电影图像和红框的代码.我创建了一个包含2个元素的Row.第一个是图像,第二个是红色框.
Row generateRow(String key, String value) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text(key), Text(value)],
); }
Run Code Online (Sandbox Code Playgroud)
我的generateRow方法
我怎么解决这个问题?
正如你所给予的高度的image就是120.0,你可以做其他同Container孩子.通过这个,我能够实现你想要的.
代码段:
Container(
margin: EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CachedNetworkImage(
imageUrl:
"https://image.tmdb.org/t/p/w500/${movieDetails
.posterPath}",
height: 120.0,
fit: BoxFit.fill),
Expanded(
child: Container(
height: 120.0 //added to fix
margin: EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
children: <Widget>[
generateRow(
Strings.released, movieDetails.releaseDate),
generateRow(Strings.runtime,
movieDetails.runtime.toString()),
generateRow(Strings.budget,
movieDetails.budget.toString())
],
)))
],
)),
Run Code Online (Sandbox Code Playgroud)
调试提示:
Flutter Inspector发现问题.参考Expanded它,它只占图像大小的一半.这里的大小Expanded由孩子的大小决定(几乎是图像大小的一半).
| 归档时间: |
|
| 查看次数: |
2425 次 |
| 最近记录: |