You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter:如何让Row子组件对齐至行内最大元素

问题:实现固定尺寸+自适应高度宽度的Row布局

需要实现的布局条件:

  • 包含1个固定尺寸(200px×200px)的组件和3个自适应组件
  • 所有组件置于Row组件内
  • 任意组件可包含内容
  • 所有自适应组件需填充可用宽度
  • 所有自适应组件需自动适配固定尺寸组件或行内最大组件的高度
  • Row组件可嵌套在Column组件内

我的实现代码:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          decoration: BoxDecoration(color: Colors.orange),
          width: 200,
          height: 200,
        ),
        Expanded(
          flex: 1,
          child: Container(
            decoration: BoxDecoration(color: Colors.red),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            decoration: BoxDecoration(color: Colors.green),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            decoration: BoxDecoration(color: Colors.black),
          ),
        )
      ],
    ),
  );
}

当前显示效果:橙色固定尺寸容器正常显示为200×200的方块,但三个Expanded容器高度为0,仅能看到顶部的一条颜色线。

遇到的问题:尝试用LayoutBuilder获取高度时,返回的maxHeight为double.infinity,如果给Container设置height: double.infinity会抛出以下渲染异常:

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFlex#02e31 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
box.dart:1
Failed assertion: line 2009 pos 12: 'hasSize'

内容的提问来源于stack exchange,提问作者Aliaksei

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 20:44:57