Flutter布局问题：对齐与文本换行异常求助

嘿，我来帮你搞定这两个布局难题！咱们一步步调整代码，解决你的问题：

问题1：标题左对齐、评分右对齐的实现 #

你之前的问题出在标题和评分所在的Row没有被赋予足够的宽度空间，而且用了flex:0的Expanded，这等于没让组件发挥扩展作用。咱们可以这么改：

• 把右侧整个Column用Expanded包裹，让它占据Row里除图片外的全部可用宽度
• 标题所在的Row里，给标题套一个Expanded(flex:1)，让它占满Row的剩余空间，评分直接放在右侧就行，不用额外扩展

问题2：描述文本适配Card边界 #

之前的描述文本没被包裹在能自适应宽度的组件里，而且Column的mainAxisSize设为min，导致它不会拉伸到可用空间。解决办法：

• 给描述文本套一个Flexible，让它根据父容器宽度自动调整，不用固定宽度
• 把Column的mainAxisSize改成MainAxisSize.max，确保它能利用Row分配的全部高度

修改后的完整代码 #

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: _onTap,
    child: Card(
      elevation: 1.0,
      color: Colors.white,
      margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 15.0),
      child: Container(
        padding: const EdgeInsets.all(10.0), // 给Card内部加一点内边距，让布局更美观
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(right: 15.0),
              width: 100.0,
              height: 130.0,
              decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    "https://image.tmdb.org/t/p/w500" + widget.movie.posterPath
                  )
                )
              ),
            ),
            // 关键改动：用Expanded包裹右侧Column，占据剩余宽度
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max, // 改成max，利用全部可用高度
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      // 标题用Expanded占满剩余空间，实现左对齐
                      Expanded(
                        child: Container(
                          margin: const EdgeInsets.only(top: 2.0, bottom: 10.0),
                          child: Text(
                            widget.movie.title,
                            style: const TextStyle(
                              fontSize: 18.0,
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                      // 评分直接放在右侧，自动右对齐
                      Text(
                        widget.movie.voteAverage.toString(),
                        style: TextStyle(
                          fontSize: 16.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.grey[600]
                        ),
                      ),
                    ],
                  ),
                  // 描述文本用Flexible包裹，自适应宽度
                  Flexible(
                    child: Text(
                      widget.movie.overview,
                      softWrap: true,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 3,
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 8.0),
                    child: Row(
                      children: <Widget>[
                        const Text("Released"),
                        Container(
                          margin: const EdgeInsets.only(left: 5.0),
                          child: Text(widget.movie.releaseDate)
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 5.0),
                    child: Row(
                      children: <Widget>[
                        const Text("Rating"),
                        Container(
                          margin: const EdgeInsets.only(left: 5.0),
                          child: Text(widget.movie.voteAverage.toString())
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

关键改动说明 #

1. 右侧Column的Expanded包裹：让右侧内容占据Row里除图片外的全部宽度，解决了宽度不足的问题
2. 标题的Expanded设置：让标题自动占满Row的剩余空间，评分自然被挤到右侧，实现了左右对齐
3. 描述文本的Flexible包裹：让文本根据父容器宽度自动换行，无需固定宽度，同时保留了多行截断的效果
4. Column的mainAxisSize调整：从min改成max，确保Column能利用Row分配的全部高度，布局更舒展
5. 新增Card内边距：给Card内部加了padding，让内容不会紧贴Card边缘，视觉效果更好

内容的提问来源于stack exchange，提问作者Rachit