Flutter添加TextField后屏幕全白问题求助

问题根源 #

你在进制转换器区域添加的TextField直接嵌套在Row的Column中，没有设置任何宽度约束。Flutter中Row内的无约束宽度组件会尝试占用无限水平空间，触发布局溢出错误，最终导致屏幕显示全白。

修复方案 #

1. 给TextField添加合理的宽度约束 #

用Expanded包裹TextField，让它在Row中自动分配可用空间，避免无限宽度问题：

2. 绑定控制器获取输入值 #

添加一个TextEditingController来管理TextField的输入内容，方便后续进制转换使用：

首先在_MyHomePageState类中添加控制器：

final TextEditingController _conversionInputController = TextEditingController(text: "42");

3. 修改updateResult方法 #

把原来硬编码的"42"改成从控制器获取输入值：

void updateResult() {
  setState(() {
    conversionResult = convertNumber(
      _conversionInputController.text.isEmpty ? "0" : _conversionInputController.text,
      selectedValue1, 
      selectedValue
    );
  });
}

完整修改后的进制转换器Row代码 #

Container(
  padding: const EdgeInsets.only(top: 20),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _conversionInputController,
              onChanged: (value) {
                // 可选：实时更新转换结果
                // updateResult();
              },
              style: const TextStyle(fontSize: 30.0),
              decoration: const InputDecoration(
                hintText: "输入数字",
                border: OutlineInputBorder(),
              ),
              inputFormatters: [
                FilteringTextInputFormatter.allow(
                  RegExp(
                    selectedValue1 == "2s" ? r'[01]' : 
                    selectedValue1 == "16s" ? r'[0-9a-fA-F]' : r'[0-9]'
                  ),
                ),
              ],
            ),
            const SizedBox(height: 8),
            DropdownButton<String>(
              value: selectedValue1,
              items: ["10s", "2s", "16s"]
                  .map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  selectedValue1 = newValue!;
                  // 切换进制后清空输入框，避免非法字符残留
                  _conversionInputController.text = "";
                });
              },
            ),
          ],
        ),
      ),
      const SizedBox(width: 25),
      Padding(
        padding: const EdgeInsets.only(top: 10),
        child: Container(
          width: 60.0,
          height: 50.0,
          child: ElevatedButton(
            onPressed: () {
              updateResult();
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color.fromRGBO(184, 243, 215, 100),
              foregroundColor: Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
            ),
            child: const Text(
              '=',
              style: TextStyle(
                fontSize: 25.0,
              ),
            ),
          ),
        ),
      ),
      const SizedBox(width: 25),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Res: $conversionResult',
              style: const TextStyle(fontSize: 30.0),
            ),
            const SizedBox(height: 8),
            DropdownButton<String>(
              value: selectedValue,
              items: ["10s", "2s", "16s"]
                  .map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  selectedValue = newValue!;
                  updateResult();
                });
              },
            ),
          ],
        ),
      ),
    ],
  ),
),

额外优化建议 #

• 切换进制下拉框时清空输入框，避免不符合当前进制的字符残留
• 添加输入框边框装饰，让布局更清晰
• 处理输入为空的情况，避免转换时抛出异常

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