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

6tr1vspr  于 2023-06-30  发布在  Flutter
关注(0)|答案(3)|浏览(148)

是可能有一个不同的边界颜色为每个状态的文本表单字段在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))),
  ),
);

}

xfb7svmp

xfb7svmp1#

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

  • [focusedBorder],当[InputDecorator.isFocused]为true且[InputDecorator.errorText]为null时显示。
  • [focusedErrorBorder],当[InputDecorator.isFocused]为true且[InputDecorator.errorText]为非空时显示。
  • [disabledBorder],当[InputDecoration.enabled]为false且[InputDecoration.errorText]为null时显示。
  • [enableledBorder],当[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),
  ),
);
hgncfbus

hgncfbus2#

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

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),
      ),
    ),
  ),
),

您的结果没有聚焦屏幕-> x1c 0d1x
您的结果与焦点屏幕->

nwlqm0z1

nwlqm0z13#

您可以设置一个controller并尝试在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))),
  ),
));

相关问题