flutter - 单击时轮廓边框更改为单行 - flutter 错误

Question

我正在创建一个登录页面。当我单击电子邮件/用户名字段时，它变成一行而不是显示轮廓边框。如何克服这个问题。

TextFormField(
            controller: emailEditingController,
            enabled: true,
            decoration:  InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30.0),
                  borderSide: const BorderSide(color: Colors.blue,),
              ),
              //isDense: true,
              contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),

                hintText: "Email/ Username",
                hintStyle: TextStyle(
                    color: textblue, fontFamily: "Dubai", fontSize: 14),
            ),
            validator: (String? UserName) {
              if (UserName != null && UserName.isEmpty) {
                return "Email can't be empty";
              }
              return null;
            },
            onChanged: (String? text) {
              email = text!;
              // print(email);
            },
            onSaved: (value) {
              loginUserData['email'] = value!;
            },
          ),

Answer 1

聚焦时，它使用 focusedBorder。您可以将 focusedBorder 指定为与​​用于 enabledBorder 的相同。

decoration:  InputDecoration(
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(30.0),
    borderSide: const BorderSide(color: Colors.blue),
  ),
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(30.0),
    borderSide: const BorderSide(color: Colors.blue),
  ),
  // ...
),

您可能还必须指定 errorBorder、focusedErrorBorder 和 disabledBorder

• enabledBorder 在字段启用时使用。
• focusedBorder 在字段获得焦点时使用。
• errorBorder 当字段有错误时使用(来自您的表单验证)
• focusedErrorBorder 当字段出错并获得焦点时使用
• disabledBorder 在字段被禁用时使用