Flutter-对齐和包装问题
Rac*_*hit 3 flutter flutter-layout
我正在尝试构建一个ListView，其中的磁贴如下所示：
但是，我在这里面临一些问题。所以项目布局是
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _onTap,
child: new Card(
elevation: 1.0,
color: Colors.white,
margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 15.0),
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(right: 15.0),
width: 100.0,
height: 130.0,
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 5.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
"https://image.tmdb.org/t/p/w500" +
widget.movie.posterPath
)
)
),
),
new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Expanded(
flex: 0,
child: new Container(
margin: const EdgeInsets.only(
top: 12.0, bottom: 10.0),
child: new Text(widget.movie.title,
style: new TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
new Expanded(
flex: 0,
child: new Text(
widget.movie.voteAverage.toString(),
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.grey[600]
),
),
),
],
),
new Container(
child: new Text(widget.movie.overview,
softWrap: true,
overflow: TextOverflow.ellipsis,
maxLines: 3,
),
),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Row(
children: <Widget>[
new Text("Released"),
new Container(
margin: const EdgeInsets.only(left: 5.0),
child: new Text(widget.movie.releaseDate)
),
],
),
),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Row(
children: <Widget>[
new Text("Rating"),
new Container(
margin: const EdgeInsets.only(left: 5.0),
child: new Text(widget.movie.voteAverage.toString())
),
],
),
),
],
)
],
),
),
),
);
}
如上图所示，布局层次结构是
行->图片，列->（行->（标题，等级）），说明，文本，文本
首要问题
第一个问题是我无法将“等级”与“标题”，“等级”行中的右侧对齐。因此，我希望标题保持左对齐，而评级则保持右对齐。为此，我尝试对两个小部件都进行弹性评级，但是一旦这样做，它们都会消失。我能想到的唯一方法是给标题加一个宽度，但这是一种很棘手的方法，并且会在大多数设备上损坏。
第二期
我希望“说明”适合卡片的范围。但是，除非为“描述容器”定义了特定的宽度，否则无法将其限制在屏幕范围内。我尝试将它封装在具有各种flex值的Expanded，Flex和Flexible中，但是没有运气。我尝试使用“文本”小部件的softWrap属性，但再次没有运气。一旦将文本包装在任何这些小部件中，它就会消失。在上面的代码中，我将文本包装在一个容器中，并为其设置了宽度。这可以工作，但是同样，它非常hacky，在不同的设备上看起来会有所不同，而且会在一些设备上损坏。
在这些问题上的任何帮助将是巨大的。
经过大量的反复试验，我终于设法得到了想要的东西。
我的布局是这样的：
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _onTap,
child: new Card(
elevation: 1.0,
color: Colors.white,
margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 14.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(right: 15.0),
width: 100.0,
height: 150.0,
child: new Image.network(
"https://image.tmdb.org/t/p/w500" +
widget.movie.posterPath),
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: const EdgeInsets.only(
top: 12.0, bottom: 10.0),
child: new Text(widget.movie.title,
style: new TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
new Container(
margin: const EdgeInsets.only(right: 10.0),
child: new Text(
widget.movie.voteAverage.toString(),
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.grey[600]
),
),
),
],
),
new Container(
margin: const EdgeInsets.only(right: 10.0),
child: new Text(widget.movie.overview,
style: new TextStyle(
fontSize: 16.0,
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
new Container(
margin: const EdgeInsets.only(top: 10.0),
child: new Row(
children: <Widget>[
new Text("RELEASED",
style: new TextStyle(
color: Colors.grey[500],
fontSize: 11.0,
),
),
new Container(
margin: const EdgeInsets.only(left: 5.0),
child: new Text(widget.movie.releaseDate)
),
],
),
),
],
),
),
],
),
),
);
}
我要做的是将顶层行的第二个孩子作为扩展小部件。因此，如您在代码中所见，我将列（在图像之后）放在Expanded中。
以前发生的问题是Row的边界是无限的，因此使我的文本在行的列内扩展不会对其产生任何影响。但是，当我将整个列放到扩展中时，它受到屏幕宽度的限制。那是需要做的。
带有上述代码的最终输出如下所示。
| 归档时间： |
|
| 查看次数： |
4985 次 |
| 最近记录： |