第二百七十六回

最新推荐文章于 2025-11-23 18:41:31 发布

原创最新推荐文章于 2025-11-23 18:41:31 发布 · 1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #移动开发Flutter

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

本文详细介绍了如何在Flutter中调整TextField组件的填充颜色、高度以及添加圆角，包括使用fillColor和filled属性、通过子组件控制高度以及两种圆角添加方法。

文章目录

1. 概念介绍
2. 使用方法
3. 示例代码
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. 示例代码

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的细节"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!