Flutter布局求助：如何实现并排设计？插入Row组件后界面冻结

问题说明 #

需要将血压和心率组件改为并排布局，使用Row后出现布局失效、屏幕冻结的情况。

原代码片段：

const SizedBox(height: 20),
const Align(
  alignment: Alignment.centerLeft,
  child: Text(
    "My Vitals",
    textAlign: TextAlign.right,
    style: TextStyle(
        fontSize: 20,
        height: 1.4,
        fontWeight: FontWeight.w500),
  ),
),
SizedBox(
  height: 15,
),
_bloodPressureLatest.isNotEmpty
    ? bloodPressureLatest(    // 血压组件构建函数
        context,
        checkBloodPressureReadingStatus(
            double.parse(_bloodPressureLatest[0]
                ["bloodPressure"]["systolic"])),
        _bloodPressureLatest[0]["bloodPressure"]
                ["systolic"] ??
            "0",
        _bloodPressureLatest[0]["bloodPressure"]
                ["diastolic"] ??
            "0",
        _bloodPressureLatest[0]
                ["recordTimestamp"] ??
            _timestamp)
    : bloodPressureLatest(
        context, 0, "0", "0", _timestamp),
_heartRateLatest.isNotEmpty
    ? heartRateLatest(  // 心率组件构建函数
        context,
        _heartRateLatest,
        _heartRateLatest[0]["vitalValue"],
        _heartRateLatest[0]["recordTimestamp"])
    : heartRateLatest(
        context, [], "0"

核心修复点 #

1. 给Row子组件添加宽度约束 #

Row的子组件必须有明确的宽度约束，否则Flutter会进入无限布局计算流程，直接导致屏幕冻结。用Expanded让两个子组件均分宽度：

// 替换原血压、心率组件的代码块
Row(
  children: [
    Expanded(
      child: _bloodPressureLatest.isNotEmpty
          ? bloodPressureLatest(
              context,
              checkBloodPressureReadingStatus(double.parse(_bloodPressureLatest[0]["bloodPressure"]["systolic"])),
              _bloodPressureLatest[0]["bloodPressure"]["systolic"] ?? "0",
              _bloodPressureLatest[0]["bloodPressure"]["diastolic"] ?? "0",
              _bloodPressureLatest[0]["recordTimestamp"] ?? _timestamp)
          : bloodPressureLatest(context, 0, "0", "0", _timestamp),
    ),
    SizedBox(width: 12), // 组件间间距
    Expanded(
      child: _heartRateLatest.isNotEmpty
          ? heartRateLatest(
              context,
              _heartRateLatest,
              _heartRateLatest[0]["vitalValue"],
              _heartRateLatest[0]["recordTimestamp"])
          : heartRateLatest(context, [], "0", _timestamp), // 补全缺失的时间戳参数
    ),
  ],
)

2. 修复代码语法错误 #

原代码中heartRateLatest的默认分支参数不完整（缺少时间戳参数），这会引发编译/运行时异常，必须补全。

3. 排查子组件内部布局问题 #

如果修复后仍有异常，检查bloodPressureLatest和heartRateLatest内部是否存在无约束的组件（比如未包裹的ListView、Column），需在内部添加Expanded或固定宽度约束，确保能适配Row的空间。

4. 排除无限重渲染可能 #

若屏幕仍冻结，检查checkBloodPressureReadingStatus或组件内部是否在build方法中调用了会触发setState的逻辑，这会导致无限重渲染。

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