如何在Flutter布局中创建可编辑的邮箱、密码输入框

直接用Flutter内置的TextField组件替换你写的下划线占位Text即可，组件自带的下划线装饰能完全匹配设计样式，同时支持用户输入，后续对接Node.js后端时直接取控制器里的输入值就能发请求。

首先在State类中定义两个文本编辑控制器，用来获取用户输入内容，记得在组件销毁时释放控制器避免内存泄漏：

final TextEditingController _emailController = TextEditingController();
final TextEditingController _pwdController = TextEditingController();

@override
void dispose() {
  _emailController.dispose();
  _pwdController.dispose();
  super.dispose();
}

把两处写着______________________________的Text组件替换为配置好样式的TextField即可，完整可运行代码如下：

class LogInEnterEmailPassword extends StatefulWidget {
  const LogInEnterEmailPassword({Key? key}) : super(key: key);

  @override
  State<LogInEnterEmailPassword> createState() => _LogInEnterEmailPasswordState();
}

class _LogInEnterEmailPasswordState extends State<LogInEnterEmailPassword> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _pwdController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF6F6F6),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text(
              "Enter email",
              style: TextStyle(
                fontSize: 20,
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.normal,
                color: Color(0xff3B3B3B),
              ),
            ),
            const SizedBox(height: 20,),
            // 替换原邮箱位置的下划线下占位文本
            SizedBox(
              width: 280, // 宽度和原下划线长度匹配，可自行调整
              child: TextField(
                controller: _emailController,
                keyboardType: TextInputType.emailAddress,
                style: const TextStyle(
                  fontSize: 20,
                  color: Color(0xff3B3B3B),
                ),
                decoration: const InputDecoration(
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xffD7D7D7), width: 1)
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xff7E7E7E), width: 1)
                  ),
                  contentPadding: EdgeInsets.zero,
                ),
              ),
            ),

            const SizedBox(height: 110,),
            const Text(
              "Enter password",
              style: TextStyle(
                fontSize: 20,
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.normal,
                color: Color(0xff3B3B3B),
              ),
            ),
            const SizedBox(height: 25,),
            // 替换原密码位置的下划线下占位文本
            SizedBox(
              width: 280,
              child: TextField(
                controller: _pwdController,
                obscureText: true, // 密码默认密文显示
                style: const TextStyle(
                  fontSize: 20,
                  color: Color(0xff3B3B3B),
                ),
                decoration: const InputDecoration(
                  enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffD7D7D7), width: 1)
                  ),
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xff7E7E7E), width: 1)
                  ),
                  contentPadding: EdgeInsets.zero,
                ),
              ),
            ),
            const SizedBox(height: 110,),
            const Icon(Icons.arrow_forward,
              size: 40,
              color: Color(0xff7E7E7E),
            )
          ],
        ),
      )
    );
  }
}

配置说明 #

• 输入框外层包固定宽度的SizedBox，和你原占位下划线的长度对齐，可根据实际显示效果调整width数值
• 未聚焦状态下的下划线颜色和你原占位符的浅灰#D7D7D7完全一致，聚焦时切换为和下方箭头按钮同色的深灰，交互反馈更自然
• 邮箱输入框指定键盘类型为邮箱地址，调起的输入法会自带邮箱输入快捷符号；密码框开启密文显示，符合登录场景常规交互
• 提前定义的控制器可直接用于后续接口请求，通过_emailController.text、_pwdController.text就能拿到用户输入的字符串，不需要额外改动现有结构
• 静态组件统一加了const修饰，减少不必要的组件重绘，优化渲染性能

内容的提问来源于stack exchange，提问作者pomoworko.com