第二百七十五回

文章目录

  • [1. 概念介绍](#1. 概念介绍)
  • [2. 使用方法](#2. 使用方法)
    • [2.1 修改组件的填充颜色](#2.1 修改组件的填充颜色)
    • [2.2 修改组件的高度](#2.2 修改组件的高度)
    • [2.3 给组件添加圆角](#2.3 给组件添加圆角)
  • [3. 示例代码](#3. 示例代码)
  • [4. 内容总结](#4. 内容总结)

我们在上一章回中介绍了"DropdownButton组件"相关的内容,本章回中将介绍TextField组件的细节.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的TextFiled组件主要用来实现文本输入功能,我们在前面章回中介绍过该组件的基本用法,本章回中主要分享与该组件相关的三个细节知识:

修改组件的填充颜色,修改组件的高度,给组件添加圆角。

2. 使用方法

2.1 修改组件的填充颜色

使用TextField组件实现输入框时,输入框中默认的背景颜色是白色,如果想把背景颜色从白色修改成其它颜色,可以使用fillColor属性,不过只设置该属性没有效

果,还需要设置filled属性,该属性是布尔类型,默认值是false,把它设置成true后才会使用fillColor属性中的颜色来填充输入框的背景。总之,fillColor和

filled这两个属性需要一起使用才能修改输入框的背景颜色。

2.2 修改组件的高度

有时候需要调整输入框的高度和宽度,这时候可以在输入框外层嵌套一个容器,比如SizedBox或者Container,但是我们实践后发现,这些容器只能调整输入框的宽度,

无法调整输入框的高度。TextFiled组件也没有类似height这样的属性来控制它的高度,怎么办?经过反复实践后发现,输入框的高度与它的子控件高度有关,可以通

过调整子控件的高度间接调整输入框的高度,比如prefixIcon属性用来控制输入框中显示的图标,我们可以调整该图标的高度,输入框的高度会自动与子控制的高度保持

一致,这样相当于间接地调整了输入框的高度。

2.3 给组件添加圆角

输入框默认没有边框,可以通过decoration属性来给输入框添加边框,在添加边框的同时可以控制边框的圆角。它的用法和Container组件中decoration属性的用法

相似,我们就不详细介绍了。还一种添加圆角的方法是使用ClipRRect组件,在输入框外层嵌套一个ClipRRect组件,通过该组件把输入框剪切成圆角形状。不过该方法

适用于无边框的输入框。大家可以依据项目需求任意选取一种方法来给输入框添加圆角。

3. 示例代码

dart 复制代码
ClipRRect(
  ///剪切圆角
  borderRadius: BorderRadius.circular(10),
  child: TextField(
    decoration: InputDecoration(
      // constraints: BoxConstraints(minHeight: 80,),
      ///间接调整输入框的高度
      prefixIcon: const Image(
        height: 64,
        image: AssetImage("images/mail.png"),),
      ///这两个一起使用才有填充颜色
      filled: true,
      fillColor: Colors.grey[200],
      border: InputBorder.none,
    ),
  ),
),

上面的示例代码中演示了使用输入框过程中的三个细节,大家注意一下,我们说的filled等属性都是InputDecoration组件中的属性,TextField本身没有这些属性。

我在这里就不演示程序的运行效果了图了,建议大家自己动手去实践。

4. 内容总结

我们在本章回中分享了使用输入框过程中的三个细节,在此对它们做一个全面的总结:

  • 修改输入框的背景填充颜色可以需要filled和fillColor两个属性一起使用才有效果;
  • 修改输入框的高度需要通过输入框子组件的高度来间接修改;
  • 给组件添加圆角有两种方法:通过边框添加,通过组件剪切成圆角;
    看官们,与"分享三个使用TextField的细节"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
相关推荐
paopaokaka_luck12 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js