Flutter/Dart：将Column改为Row并实现结果实时显示

1. 正确将Column布局改为Row #

直接替换Column为Row报错的核心原因是Row的子组件缺乏水平方向约束——Flutter中Row会让子组件尽可能占用水平空间，而TextField默认没有固定宽度，导致布局引擎无法确定组件尺寸，触发断言错误。

解决方法：

• 用Expanded包裹每个TextField，让它们平分Row的可用水平空间；
• 或者用SizedBox给TextField指定固定宽度；
• 如果父容器可能出现水平溢出，可在外层套SingleChildScrollView允许横向滚动。

示例代码：

Row(
  children: [
    // 第一个输入框，平分一半宽度
    Expanded(
      child: TextField(
        keyboardType: TextInputType.number,
        decoration: InputDecoration(labelText: "数字1"),
      ),
    ),
    SizedBox(width: 16), // 输入框间的间距
    // 第二个输入框，平分另一半宽度
    Expanded(
      child: TextField(
        keyboardType: TextInputType.number,
        decoration: InputDecoration(labelText: "数字2"),
      ),
    ),
  ],
)

2. 实时显示计算结果（无需点击按钮） #

通过监听TextField的输入变化，实时更新状态并计算结果即可实现：

步骤：

1. 使用StatefulWidget管理输入值和计算结果的状态；
2. 给每个TextField添加onChanged回调，输入变化时更新状态并触发计算；
3. 用tryParse处理无效输入，避免非数字输入导致崩溃。

示例代码：

class SubtractionCalculator extends StatefulWidget {
  @override
  _SubtractionCalculatorState createState() => _SubtractionCalculatorState();
}

class _SubtractionCalculatorState extends State<SubtractionCalculator> {
  String _input1 = "";
  String _input2 = "";
  double _result = 0.0;

  // 实时计算减法结果
  void _updateResult() {
    final num1 = double.tryParse(_input1);
    final num2 = double.tryParse(_input2);
    
    setState(() {
      _result = (num1 ?? 0) - (num2 ?? 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 替换后的Row布局
        Row(
          children: [
            Expanded(
              child: TextField(
                keyboardType: TextInputType.number,
                onChanged: (value) {
                  _input1 = value;
                  _updateResult();
                },
                decoration: InputDecoration(labelText: "被减数"),
              ),
            ),
            SizedBox(width: 16),
            Expanded(
              child: TextField(
                keyboardType: TextInputType.number,
                onChanged: (value) {
                  _input2 = value;
                  _updateResult();
                },
                decoration: InputDecoration(labelText: "减数"),
              ),
            ),
          ],
        ),
        // 实时显示结果
        Padding(
          padding: EdgeInsets.only(top: 20),
          child: Text("结果: $_result"),
        ),
      ],
    );
  }
}

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