Flutter TextField组件Material Design颜色配置及显示异常问题咨询

1. TextField边框始终显示白色的修复 #

你当前的代码存在两个问题导致失焦边框消失：

• 用户名输入框的enabledBorder的width属性设置为0.0，宽度为0自然不可见
• 两个输入框都没有完整配置所有状态下的边框样式，仅配置了border和用户名的enabledBorder，缺失focusedBorder、密码框的enabledBorder属性
  需要给每个TextField的InputDecoration补充以下配置：

enabledBorder: OutlineInputBorder(
  borderSide: BorderSide(color: Colors.white, width: 1.0),
),
focusedBorder: OutlineInputBorder(
  borderSide: BorderSide(color: Colors.white, width: 1.0),
),

如果需要禁用状态下也显示白色边框，额外补充disabledBorder配置即可。

2. 用户名label文本消失的修复 #

这个问题是因为你没有指定label的样式颜色，默认label颜色会和主题的primary色或背景色冲突（你当前输入框文字设为白色，大概率页面背景是深色，默认label颜色为深色导致和背景融为一体），在InputDecoration中添加labelStyle配置即可：

labelStyle: TextStyle(color: Colors.white),

同时建议你给Scaffold添加backgroundColor: Colors.black配置，和你当前的深色风格统一，避免文字和背景撞色。

3. 占位文字颜色设置方法 #

Flutter完全支持自定义占位文字颜色，在InputDecoration中设置hintText为占位内容，再通过hintStyle指定颜色即可：

hintText: "请输入用户名",
hintStyle: TextStyle(color: Colors.grey),

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 补充深色背景配置
    backgroundColor: Colors.black,
    appBar: AppBar(
      backgroundColor: Colors.black,
      foregroundColor: Colors.white,
      title: Text('Login Page '),
    ),
    body: Padding(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(10),
            child: Text(
              'The Hockey Lab',
              style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.w500,
                fontSize: 30
              ),
            )
          ),
          Container(
            padding: EdgeInsets.all(10),
            child: TextField(
              controller: nameController,
              style: TextStyle(color: Colors.white),
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 1.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 1.0),
                ),
                border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white)
                ),
                labelText: 'User Name',
                labelStyle: TextStyle(color: Colors.white),
                hintText: '请输入用户名',
                hintStyle: TextStyle(color: Colors.grey),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
            child: TextField(
              style: TextStyle(color: Colors.white),
              obscureText: true,
              controller: passwordController,
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 1.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 1.0),
                ),
                border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white)
                ),
                labelText: 'Password',
                labelStyle: TextStyle(color: Colors.white),
                hintText: '请输入密码',
                hintStyle: TextStyle(color: Colors.grey),
              ),
            ),
          ),
          TextButton(
            onPressed: () {
              //forgot password screen
            },
            style: TextButton.styleFrom(foregroundColor: Colors.blue),
            child: Text('Forgot Password'),
          ),
          Container(
            height: 50,
            padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                foregroundColor: Colors.white,
                backgroundColor: Colors.blue
              ),
              child: Text('Login'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => AdminMenuPage()),
                );
                print(passwordController.text);
              },
            )
          ),
          Container(
            child: Row(
              children: <Widget>[
                Text('Does not have account?', style: TextStyle(color: Colors.white),),
                TextButton(
                  style: TextButton.styleFrom(foregroundColor: Colors.blue),
                  child: Text(
                    'Sign in',
                    style: TextStyle(fontSize: 20),
                  ),
                  onPressed: () {
                    //signup screen
                  },
                )
              ],
              mainAxisAlignment: MainAxisAlignment.center,
            )
          )
        ],
      )
    )
  );
}

注：代码中已将废弃的FlatButton、RaisedButton替换为Flutter 2.0+推荐使用的TextButton、ElevatedButton，避免版本兼容问题

针对跨端应用开发的耗时评估：

• 新手入门阶段：掌握Dart基础语法+Flutter常用UI组件的周期约1-2周，即可独立开发常规业务页面
• 中小型应用（含用户体系、CRUD交互、基础原生能力调用）：单人开发周期约1-2个月，比原生双端开发节省至少50%的时间，同复杂度下比MAUI开发耗时低30%左右，生态成熟度、社区问题覆盖率远高于MAUI，适合作为跨端开发的优先选择。

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