当 Textformfield 处于非活动状态、活动状态和已填充状态时具有不同的边框颜色

Question

当字段不活动时，当活动且不活跃时，在flutter中的每个状态都有不同的边框颜色，但在字段中具有文本

 TextFormField emailUserForm() {
return TextFormField(
  keyboardType: TextInputType.emailAddress,
  cursorColor: textBlack50Color,
  autocorrect: false,
  validator: (text) => validateEmail(text!),
  onSaved: (name) {
    _email = name!;
    print('on save called');
  },
  decoration: const  InputDecoration(
    fillColor: Colors.white,
    filled: true,
    border:  OutlineInputBorder(
        borderSide: BorderSide(color: textBlack50Color, width: 1.0),
        borderRadius: BorderRadius.all(Radius.circular(15.0))),
    labelStyle:  TextStyle(
        color: textBlack50Color,
        fontSize: 14,
        fontWeight: FontWeight.w500),
    hintStyle:  TextStyle(fontSize: 17),
    hintText: 'Your email address',
    focusedBorder:  OutlineInputBorder(
        borderSide: BorderSide(color: textBlackColor, width: 1.0),
        borderRadius: BorderRadius.all(Radius.circular(15.0))),
    enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color:  textBlackColor , width: 1.0),
        borderRadius:  BorderRadius.all(Radius.circular(15.0))),
  ),
);

}

Answer 1

是的，您应该在 InputDecoration 类中设置特定属性。根据文档，以下是不同的边框样式：

• [focusedBorder]，当[InputDecorator.isFocused]为true并且[InputDecoration.errorText]为null时显示。
• [focusedErrorBorder]，当[InputDecorator.isFocused]为true且[InputDecoration.errorText]非空时显示。
• [disabledBorder]，当[InputDecoration.enabled]为false且[InputDecoration.errorText]为null时显示。
• [enabledBorder]，当[InputDecoration.enabled]为true并且[InputDecoration.errorText]为null时显示。

代码：

InputDecoration(
  <...>
  enabledBorder: const OutlineInputBorder(
    borderSide: BorderSide(color: Colors.black),
  ),
  disabledBorder: const OutlineInputBorder(
    borderSide: BorderSide(color: Colors.grey),
  ),
  errorBorder: const OutlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
  ),
  focusedBorder: const OutlineInputBorder(
    borderSide: BorderSide(color: Colors.blue),
  ),
);

Answer 2

尝试下面的代码希望对您有帮助。

TextFormField(
  keyboardType: TextInputType.emailAddress,
  cursorColor: Colors.green,
  autocorrect: false,
  onSaved: (name) {
    print('on save called');
  },
  decoration: InputDecoration(
    fillColor: Colors.white,
    filled: true,
    border: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.green, width: 5.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
    labelStyle: TextStyle(
        color: Colors.brown, fontSize: 14, fontWeight: FontWeight.w500),
    hintStyle: TextStyle(fontSize: 17),
    hintText: 'Your email address',
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.purple, width: 1.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.pink, width: 1.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 1.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 1.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
  ),
),

没有对焦屏幕的结果->

焦点屏幕的结果 ->

Answer 3

您可以设置控制器，并在enabledborder属性中尝试一些内容。使用AnimatedBuilder来收听文本输入更改。

final TextEditingController _controller = TextEditingController();
final Color colorWhenFilled = Colors.amber;
...
AnimatedBuilder(
animation: _controller,
builder: (context, child) => TextFormField(
  keyboardType: TextInputType.emailAddress,
  cursorColor: textBlack50Color,
  autocorrect: false,
  validator: (text) => validateEmail(text!),
  onSaved: (name) {
    _email = name!;
    print('on save called');
  },
  decoration: const  InputDecoration(
    fillColor: Colors.white,
    filled: true,
    border:  OutlineInputBorder(
        borderSide: BorderSide(color: textBlack50Color, width: 1.0),
        borderRadius: BorderRadius.all(Radius.circular(15.0))),
    labelStyle:  TextStyle(
        color: textBlack50Color,
        fontSize: 14,
        fontWeight: FontWeight.w500),
    hintStyle:  TextStyle(fontSize: 17),
    hintText: 'Your email address',
    focusedBorder:  OutlineInputBorder(
        borderSide: BorderSide(color: textBlackColor, width: 1.0),
        borderRadius: BorderRadius.all(Radius.circular(15.0))),
    enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: _controller.text.isNotEmpty ? colorWhenFilled : textBlackColor , width: 1.0),
        borderRadius:  BorderRadius.all(Radius.circular(15.0))),
  ),
));