Flutter生成UPI支付二维码时仅显示1个TextField问题求助

问题排查与修复步骤： #

1. 布局容器错误
   你大概率是把这些TextField放在了Row组件里，Row是横向布局，默认不换行，后面的输入框会被挤出屏幕，看起来只显示第一个。必须把它们放在Column组件中，纵向排列才能全部显示。

2. 判断条件的空格问题
   代码里的判断selectedType == "UPI PAYMENT "末尾多了个空格，如果你的selectedType实际值是"UPI PAYMENT"（无空格），这个条件可能不会完全触发，导致部分输入框不渲染。把空格去掉，改成selectedType == "UPI PAYMENT"。

3. 金额输入框优化
   只设置keyboardType: TextInputType.number还不够，建议添加输入格式化器，强制只能输入数字，避免用户输入非数字内容。

修正后的完整代码示例： #

// 确保外层是Column容器
Column(
  children: [
    if (selectedType == "UPI PAYMENT") ...[
      TextField(
        controller: upiIDController,
        decoration: InputDecoration(
          labelText: "Enter your ID",
          border: OutlineInputBorder(),
        ),
      ),
      SizedBox(height: 10),
      TextField(
        controller: PayeeNameController,
        decoration: InputDecoration(
          labelText: "Payee name",
          border: OutlineInputBorder(),
        ),
      ),
      SizedBox(height: 20),
      TextField(
        controller: AmountController,
        keyboardType: TextInputType.number,
        inputFormatters: [FilteringTextInputFormatter.digitsOnly], // 强制只能输入数字
        decoration: InputDecoration(
          labelText: "Amount",
          border: OutlineInputBorder(),
        ),
      ),
      SizedBox(height: 20),
    ],
  ],
)

额外注意事项： #

• 别忘了导入输入格式化器的包：import 'package:flutter/services.dart';
• 如果你的页面内容较多，建议把Column放在SingleChildScrollView里，避免键盘弹出时布局溢出。

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