Flutter TextField设置背景色和圆角

这篇具有很好参考价值的文章主要介绍了Flutter TextField设置背景色和圆角。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Flutter TextField设置背景色和圆角

这是一个很常见的登录页面,自然想到了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设置背景色和圆角

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

以上就是我设置背景色和圆角的一种方式吧,希望如果有更好的实现方式的童鞋可以分享!文章来源地址https://www.toymoban.com/news/detail-416994.html

到了这里,关于Flutter TextField设置背景色和圆角的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android 12.0 原生SystemUI下拉通知栏UI背景设置为圆角背景的定制(一)

     在12.0的系统rom定制化开发中,在原生系统SystemUI下拉状态栏的通知栏的背景是白色四角的背景,由于在产品设计中,需要把四角背景默认改成圆角背景,所以就需要分析系统原生下拉通知栏的每条通知的默认背景,然后通过systemui的通知流程,设置默认下拉状态栏UI中的通知

    2024年02月05日
    浏览(67)
  • Android 9.0 原生SystemUI下拉通知栏UI背景设置为圆角背景的定制(一)

     在9.0的系统rom产品定制化开发中,在原生系统SystemUI下拉状态栏的通知栏的通知背景默认是白色四角的背景, 由于在产品设计中,需要把四角背景默认改成圆角背景,所以就需要分析系统原生下拉通知栏的每条通知的默认背景, 然后通知显示流程,设置默认下拉状态栏UI中

    2024年02月01日
    浏览(47)
  • Android 9.0 原生SystemUI下拉通知栏UI背景设置为圆角背景的定制(二)

     在9.0的系统rom定制化开发中,在原生系统SystemUI下拉状态栏的通知栏的背景是默认白色四角的背景,由于在产品设计中,需要把四角背景默认改成圆角背景,所以就需要分析系统原生下拉通知栏的每条通知的默认背景,然后通过熟悉systemui的通知栏流程,设置默认下拉状态栏

    2024年02月05日
    浏览(51)
  • Android 12.0 原生SystemUI下拉通知栏UI背景设置为圆角背景的定制(二)

     在12.0的系统rom定制化开发中,在原生系统SystemUI下拉状态栏的下拉通知栏的背景默认是白色四角的背景, 由于在产品设计中,在对下拉通知栏通知的背景需要把四角背景默认改成圆角背景,所以就需要分析系统原生下拉通知栏的每条通知的默认背景, 然后通过systemui的通知

    2024年02月08日
    浏览(50)
  • flutter背景图片设置

    1、在配置文件pubspec.yaml中,设置以下代码 2、如果目录中没有assets文件夹,则创建一个文件夹,并且取名为assets,在此文件夹中存放图片资源即可,如果想分文件夹管理,在assets目录下创建文件夹,并且在配置文件pubspec.yaml中加入路径即可 3、图片的使用、在界面文件中,有

    2024年02月04日
    浏览(49)
  • C语言——修改控制台背景色和字体颜色

    可以用库函数system(“color NUM1NUM2”)实现 需要头文件 stdlib.h NUM1,NUM2均为16进制数 NUM1控制控制台背景色,NUM2控制前景色(即打印的字符的颜色) NUM1,NUM2之间 不能有空格 注:整个程序中, 只有最后一个system(“color ”)生效,因此不能多处局部变色。 NUM1, NUM2可以为以下任何值

    2024年01月17日
    浏览(56)
  • element ui修改时间框背景色和边框色

    一、修改时间输入框的背景和边框字体颜色

    2024年02月04日
    浏览(37)
  • Flutter——最详细(TextField)使用教程

    文本输入框,拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。监听输入框变动事件。 搜索框,输入账号密码等 属性 作用 controller 输入框监听器 decoration 输入框装饰属性 textAlign 内容对齐方式 textAlignVertical 文本垂直对齐 textDirection 文字方向 ma

    2024年02月13日
    浏览(42)
  • Flutter TextField 交互实例 —— 新手礼包

    大家好,我是 17。 新手礼包一共 3 篇文章,每篇都是描述尽量详细,实例讲解,包会! Flutter Row 实例 —— 新手礼包 Flutter TextField UI 实例 —— 新手礼包 Flutter TextField 交互实例 —— 新手礼包 本篇包含所有常见 TextField 交互示例。 在上一篇 Flutter TextField UI 实例 中第一个示例

    2023年04月09日
    浏览(40)
  • Flutter TextField 输入框 简单使用

    创建方式一: 创建方式二: TextField 是一个 material design 风格的输入框,本身有多种属性,除此之外装饰器 InputDecoration 也有多种属性,但都比较简单,所以不必担心,且听我娓娓道来。 InputDecoration 属性 图标 图标有3种: 左侧外的图标 左侧内图标 右侧内图标 在右侧图标加了

    2024年02月08日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包