使用Flutter创建带有图标提示的TextField

已于 2024-04-03 14:38:43 修改
阅读量697 收藏
点赞数
分类专栏： Flutter交互组件大全 文章标签： flutter android ios
于 2024-04-03 11:23:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42698421/article/details/137337358
版权
本教程介绍如何在Flutter应用中实现一个TextField，旁边带有图标提示，当TextField为空时显示提示，帮助用户理解输入要求。通过创建StatefulWidget和使用Stack、Visibility小部件，实现了提示文本的动态显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在移动应用开发中，TextField是一种常用的用户输入小部件。然而，有时向用户提供有关他们应该输入什么的提示或说明是很有帮助的。在本教程中，我们将创建一个Flutter应用程序，演示如何在TextField旁边包含一个图标提示。

编写代码

现在，让我们深入代码。

import 'package:flutter/material.dart';

void main() {
   
  runApp(const
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Flutter中的文本输入框组件TextField
越陌度阡
01-01 7498
Flutter中的文本输入框使用TextField 这个组件来表示。 主要的属性如下： 1.
Flutter TextField详解
yechaoa
06-05 5万+
文章目录基本属性TextFieldInputDecoration样式基础样式隐藏文本键盘类型键盘按钮大小写光标最多行数计数器图标提示文字去除下划线边框获取输入内容关闭软键盘校验异常总结github：https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/loginPage.dart 效果： 终于还是对TextFie...
Compose | UI组件(三) | TextField() 输入框组件
让 学习 成为一种 习惯 ( 谭祖爱 & 技术博客 )
01-27 1872
TextField表示默认的输入框组件，OutlinedTextField表示带有边框的输入框组件，BasicTextField表示底层输入框组件，可自定义
flutter 的TextField复杂使用和设置左右图标
senkai123的博客
11-20 1万+
效果： Expanded( child: Container( height: 32, margin: EdgeInsets.only(right: 10), decoration: BoxDecoration( color: Colours....
flutter TextField 位置居中，初始值（默认值），内容居中，设置圆角，前后加图标，监控输入值，输入限制，去掉下划线，自动换行等
python4_1的博客
09-01 1万+
flutter TextField位置居中，初始值（默认值），内容居中，设置圆角，前后加图标，监听 ，自动换行等操作
Flutter 中TextField提示语hintText不居中
ly410726的专栏
10-23 5894
解决办法两种 一种是单个修改 child: TextField( style: TextStyle(textBaseline: TextBaseline.alphabetic), ) 还有一种是全局修改 ThemeData( textTheme: TextTheme(subhead: TextStyle(textBaseline: TextBaseline.alphabe...
flutter中TextField关于decoration的前后Icon一些适用小功能
weixin_64482155的博客
10-20 637
这个麦克风样式的图标就是我想要实现的功能，在decoration有关于后置图标的功能，如属性suffix、suffixIcon。最近公司在开发flutter项目，从没学过flutter到慢慢上手还是有点难度的（毕竟换了语言和编写风格），在编写过程中也遇到很多问题，关于标题这个问题是我自己想到的解决方法，仅供参考。但此时还有最后一个问题，图标距离右侧太近了，整体不够美观，但是调试时发现加padding的方法不太尽人意（可以自行测试看看），所以最后，经过多种方法的试验下，发现可以调节。设置完后问题也就解决了。
2021年Flutter中的文本输入框组件TextField
码蝗的博客
03-24 836
Flutter中的文本输入框使用TextField 这个组件来表示。 主要的属性如下： 1.maxLines 最大输入行。默认为单行输入框，配置此参数后则为多行输入框； 2.onChanged 输入改变触发的事件。可以获取当前输入改变以后的值； 3.obscureText隐蔽的文本。主要用于密码输入框； 4.controller 文本控制器。当输入框有默认的输入值时就需要用到文本控制器； 5.decoration 装饰器。主要的属性如下： (1). hintText 占位提示符。类...
《Flutter 控件大全》第九十六：TextField、EditableText、TextInput
老孟Flutter
04-04 4083
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 EditableText EditableText是一个基本的文本输入组件，此组件和Text...
给UITextField设置图标
onlychengzhi的博客
07-24 452
注意的是 textField需要在前面进行  声明 或者 初始化。    self.pwsText.placeholder=@"请输入账号";     self.pwsText.leftView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"more.png"]];     self.pwsText.leftVie
Flutter中TextField和图标对齐
qq_34202054的博客
09-09 2118
Flutter中使用TextField输入框时，若是左右两边有图标的时候，经常会出现输入框内的文字和图标对不齐的情况。提示内容和搜索图标没有对齐。输入内容和图标没有对齐。当搜索框高度有限时，这种对不齐的情况会更加明显。
flutter的TextField如何提示验证错误
weixin_40763897的博客
08-24 5549
可以通过更新状态并传递一个新的InputDecoration对象来完成： class MyAppHome extends StatefulWidget { @override _MyAppHomeState createState() => _MyAppHomeState(); } class _MyAppHomeState extends State<MyAppHome> { String _errorText; @override Widget build(Bu
Flutter文本输入框TextField属性（InputDecoration、textInputAction、inputFormatters等等）详解
热门推荐
喻志强的博客
03-06 12万+
TextField 构造方法：
Flutter——最详细(TextField)使用教程
人生在世
05-04 8922
文本输入框，拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。监听输入框变动事件。
Flutter 中的 TextField 小部件：全面指南
最新发布
smileKH的博客
05-12 2721
TextField是 Flutter 中处理文本输入的核心小部件，它提供了丰富的 API 和定制选项，使得在 Flutter 应用中实现各种文本输入场景变得简单而高效。掌握TextField的使用，可以帮助你创建出既美观又实用的表单界面。
【Flutter从入门到实战】 ⑦、Flutter的基础Widget-Button、占位图、Icon、TextField、主题色的设置、布局Widget-Align、Padding、Container
慢慢来就很快。
03-13 2151
Flutter从入门到实战 一共分为23个系列 ①(Flutter、Dart环境搭建篇) 共3个内容 已更新 ②(Dart语法1 篇) 共4个内容 已更新 [③(Dart语法2 篇) 待更新 预计2022年03月13 更新] ④(Flutter案例开发篇) 共4个内容 已更新 ⑤(Flutter的StatelessWidget 共3个内容 已更新 ⑥(Flutter的基础Widget篇) 共2个内容 已更新 [⑦(布局Widget篇) 待更新 预计2022年03月13 更新] ...
【优快云软件工程师能力认证学习精选】flutter 输入框组件TextField
优快云高校俱乐部官方博客
02-26 740
优快云软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网优快云制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。 我们每天将都会精选优快云站内技术文章供大家学习，帮助大家系统化学习IT技术。 TextField 顾名思义文本输入框，类似于iOS中的UITextField..
Flutter TextField设置背景色和圆角
weixin_49427955的博客
02-14 5269
TextField设置背景色和圆角
关于flutter使用extended_text_field来让表情显示在输入框中
Wuxiaoming135的博客
05-08 1047
关于flutter使用extended_text_field来让表情显示在输入框中
flutter textfield decoration
05-17
Flutter中的TextField组件可以通过设置decoration属性来自定义外观。decoration属性是一个InputDecoration对象，它包含了TextField的样式、提示文字、边框等属性。 以下是一个最基本的TextField的decoration用法示例： ```dart TextField( decoration: InputDecoration( hintText: '请输入内容', border: OutlineInputBorder(), ), ) ``` 上述代码中，我们设置了一个提示文字为“请输入内容”的TextField，并设置了一个圆角边框。 InputDecoration对象包含了许多属性，可以根据自己的需求进行设置，例如： ```dart TextField( decoration: InputDecoration( hintText: '请输入内容', labelText: '文本框标题', prefixIcon: Icon(Icons.person), suffixText: '后缀文字', border: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: BorderSide( color: Colors.grey, width: 2, ), ), ), ) ``` 上述代码中，我们设置了一个带有标题、前缀图标、后缀文字和自定义边框的TextField。 更多关于InputDecoration的属性和用法，请参考官方文档：https://api.flutter.dev/flutter/material/InputDecoration-class.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zender Han

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值