这是一个很常见的登录页面,自然想到了Flutter的表单组件Form。
想使用Form 组件,就要修改TextFormField的样式了。
TextFormField是TextField的一个包装类,除了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:
InputBorder.none: 无边框。
UnderlineInputBorder:带下划线的边框。没有设置默认是此值。
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].
也就是errorBorder,focusedBorder,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 : "用户名不能为空";
},
),
最终的效果就是:
还有的思路是在TextField外面套一层DecoratedBox来设置背景色和圆角,但是这种设置背景色和圆角会把错误提醒信息包裹在里面。文章来源:https://www.toymoban.com/news/detail-416994.html
以上就是我设置背景色和圆角的一种方式吧,希望如果有更好的实现方式的童鞋可以分享!文章来源地址https://www.toymoban.com/news/detail-416994.html
到了这里,关于Flutter TextField设置背景色和圆角的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!