Flutter TextField设置背景色和圆角

Flutter TextField设置背景色和圆角_第1张图片

这是一个很常见的登录页面,自然想到了Flutter的表单组件Form。 

想使用Form 组件,就要修改TextFormField的样式了。

TextFormFieldTextField的一个包装类,除了FormField定义的属性之外,它还包括TextField的属性。

TextField的decoration属性可以用于控制TextField的外观显示,如提示文本、背景颜色、边框等,它继承自InputDecoration。

TextField(
  decoration:InputDecoration(
    labelText:"请输入用户名",
    prefixIcon:Icon(Icons.person),// 未获得焦点下划线设为灰色
    enabledBorder:UnderlineInputBorder(
      borderSide:BorderSide(color:Colors.grey)),//获得焦点下划线设为蓝色
    focusedBorder:UnderlineInputBorder(
      borderSide:BorderSide(color:Colors.blue)),
  ),
)

设置背景色

设计图上要求灰色背景,通过查看InputDecoration的定义可以修改背景色的只有fillColor这个属性。但是只设置fillColor属性是不行的,还必须同时设置filled为 true。

TextField(
  decoration:InputDecoration(
    labelText:"请输入用户名",
    filled: true,
    fillColor: const Color(0xffF6F6F8),
   )
)

设置圆角

想要设置圆角,发现没有BorderRadius直接相关的属性设置,但是找到了border属性,border继承自InputBorder,想要设置圆角只能想办法在边框相关的属性里面去设置。

注意InputDecoration里面的border都是继承自InputBorder的。

/// Typically one of [UnderlineInputBorder] or [OutlineInputBorder].
/// If null, InputDecorator's default is `const UnderlineInputBorder()`.
///
/// See also:
///
///  * [InputBorder.none], which doesn't draw a border.
///  * [UnderlineInputBorder], which draws a horizontal line at the
///    bottom of the input decorator's container.
///  * [OutlineInputBorder], an [InputDecorator] border which draws a
///    rounded rectangle around the input decorator's container.
final InputBorder? border;

可以看到有3种方式设置border

  1. InputBorder.none: 无边框。

  1. UnderlineInputBorder:带下划线的边框。没有设置默认是此值。

  1. OutlineInputBorder:可以设置外边框。

1,2可以忽略。我们需要圆角,但不需要边框,还是可以选择OutlineInputBorder,配置OutlineInputBorder里面的边框属性:

OutlineInputBorder(
    borderRadius: BorderRadius.circular(24),
    borderSide: const BorderSide(style: BorderStyle.none)
)

borderRadius属性配置圆角,borderSide属性配置边框的样式为none既可。

还有个问题是我们只设置InputDecoration.border属性是不够的的。

InputDecoration还提供了不同场景下的边框,比如未获得焦点,获得了焦点,边框可用,出现错误的时候的几种情况需要设置:

/// This property is only used when the appropriate one of [errorBorder],
/// [focusedBorder], [focusedErrorBorder], [disabledBorder], or [enabledBorder]
/// is not specified. This border's [InputBorder.borderSide] property is
/// configured by the InputDecorator, depending on the values of
/// [InputDecoration.errorText], [InputDecoration.enabled],
/// [InputDecorator.isFocused] and the current [Theme].

也就是errorBorderfocusedBorder,focusedErrorBorder,disabledBorder,enabledBorder。

为了统一设置这些属性,定一个OutlineInputBorder变量分别赋值配置:

//统一定义一个圆角样式
var customBorder = OutlineInputBorder(
        borderRadius: BorderRadius.circular(24),
        borderSide: const BorderSide(style: BorderStyle.none));

TextFormField(
    autofocus: true,
    controller: _unameController,
    decoration: InputDecoration(
    border: customBorder,
    enabledBorder:customBorder,
    focusedBorder:customBorder,
    focusedErrorBorder: customBorder,
    errorBorder: customBorder,
    hintText: "请输入账号",
    filled: true,
    fillColor: const Color(0xffF6F6F8),
    //隐藏下划线
    //border: InputBorder.none,
    hintStyle: const TextStyle(fontSize: 15, color: Color(0xffAEAEAE)),
    contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 20),
    ),
    // 校验用户名,校验成功返回null,失败则返回错误信息
    validator: (value) {
        return value!.trim().isNotEmpty ? null : "用户名不能为空";
    },
),

最终的效果就是:

Flutter TextField设置背景色和圆角_第2张图片

还有的思路是在TextField外面套一层DecoratedBox来设置背景色和圆角,但是这种设置背景色和圆角会把错误提醒信息包裹在里面。

以上就是我设置背景色和圆角的一种方式吧,希望如果有更好的实现方式的童鞋可以分享!

你可能感兴趣的:(Flutter,flutter)