浅识Flutter 基本组件之TextField组件 输入框

最新推荐文章于 2024-06-22 18:48:32 发布
最新推荐文章于 2024-06-22 18:48:32 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： 浅识Flutter笔记 文章标签： flutter android 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43336158/article/details/123746162
版权
本文介绍了Flutter的TextField组件，用于创建输入框，如用户名、密码等。讨论了maxLength限制输入字符长度，maxLines允许的行数，obscureText是否隐藏输入内容，enableInteractiveSelection是否启用复制粘贴功能，以及textCapitalization设置字符大小写和keyboardType定制键盘类型。
摘要由CSDN通过智能技术生成

浅识Flutter 基本组件之TextField组件 输入框

TextField组件(输入框组件)用于在应用程序中输入用户名、密码、查找内容等。

  body: TextField(  ),

在这里插入图片描述

maxLength

maxLength属性用于设置输入框中可以输入的最大字符长度，并在输入框的右下角有当前输入长度与最大长度的对比显示。
例如maxLength的值为 8时，最长只能输入8位，多了就输入不进去了

  body: TextField(maxLength: 8),

在这里插入图片描述
如果想超过设定的长度，可以更改maxLengthEnforced的属性值，默认为打开，不允许超过设定值。把它关掉就可以随便输入了；

maxLengthEnforced: false

在这里插入图片描述

maxLines

输入太多时一行写不下，这时候就要换行
在这里插入图片描述
maxLines属性用于设置允许展现的最大行数
例如。在页面上最多可以输入多个字符，并且可以自动换2行或任意行

 TextField(maxLength: 8,maxLengthEnforced: false,maxLines: null)//自动换任意行
 TextField(maxLength: 8,maxLengthEnforced: false,maxLines: 2)//自动换任意行

最低0.47元/天 解锁文章
阿大豆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter文本输入框TextField属性（InputDecoration、textInputAction、inputFormatters等等）详解
喻志强的博客
03-06 11万+
TextField 构造方法：
Flutter TextField
m0_55721894的博客
11-28 2650
TextField textField用于文本输入，它提供了很多属性： const TextField({ ... TextEditingController controller, FocusNode focusNode, InputDecoration decoration = const InputDecoration(), TextInputType keyboardType, TextInputAction textInputAction, Tex...
Flutter 基础篇（九）—— 输入框
最新发布
2401_85729780的博客
06-22 1263
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！资料⬅专栏获取Text(‘隐藏键盘’),
flutter中的TextField
wgefcelgu的专栏
07-11 768
Flutter中的TextField是一个常用的文本输入框控件，用于接收用户输入的文本。它提供了多种属性和回调函数来控制和监听输入过程。
Flutter - TextField
a136447572的专栏
12-08 1284
TextField用于文本输入
Flutter 中TextField详解
的博客
11-06 1479
在Flutter中TextField是一个文本输入组件。 这篇文章中会讲解出现部分属性，获取文本输入框中的文本，下划线改变颜色
flutter 输入框组件TextField的实现代码
08-25
Flutter 输入框组件TextField 的实现代码详解 在 Flutter 中，TextField 是一个非常重要的组件，用于用户输入文本信息。这篇文章将详细介绍 Flutter 中 TextField 的实现代码，包括其构造方法、基本使用方式、属性...
flutter TextField换行自适应的实现
08-25
在Flutter开发中，TextField是用于用户输入文本的基本组件，它提供了丰富的自定义功能。本文将详细探讨如何在Flutter中实现TextField的换行自适应效果，包括自动调整高度以适应输入内容的增长，同时保持预设的内外...
flutter实现输入框撤销、重写功能
06-16
- Flutter中的TextField组件是用于接收用户输入的控件。我们需要监听其`onChanged`事件，当用户输入时触发相应的逻辑，更新栈的状态。 3. **实现撤销（Undo）**： - 在撤销操作中，我们需要从undoStack弹出最后一...
Flutter入门与实战：带有【添加】按钮的圆角输入框
09-18
首先，让我们了解在Flutter中创建基本输入框的基本步骤。Flutter 提供了一个名为`TextField`的widget，可以轻松创建文本输入字段。要创建一个圆角输入框，我们需要对`TextField`进行一些定制。这可以通过使用`...
flutter-password-field:密码字段-Flutter教程
04-02
密码栏位 指示的源代码 套餐使用
深入Flutter TextField
2401_84149743的博客
04-21 368
分享一份NDK基础开发资料分享内容包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
Flutter TextField详解
大灰狼的小绵羊哥哥的博客
06-02 2390
实现TextField说简单也简单，说有坑，坑也不小，下面从易到难介绍一下使用 1.最简单的就是无参数调用构造方法： TextField() 2.光有输入框还不行，还得获取其中的内容，所以需要传递controller： import 'package:flutter/material.dart'; class TextFieldPage extends StatelessWidget { Widget buildTextField(TextEditin..
【Flutter】五、Flutter之表单输入框——TextField
MAXLZ的博客
08-24 4916
【Flutter】五、Flutter之表单输入框——TextFieldTextField1.1 TextField构造器1.2 TextFiled属性说明1.2.1 InputDecoration属性说明1.2.2 TextInputAction1.2.3 inputFormatters的使用1.2.4 buildCounter的使用 Flutter中关于表单的相关控件有：TextField、C...
flutter 实现一个 两行两列输入框的组件，每个输入框都带有标题
06-01
好的，可以通过 `GridView` 和 `Card` 实现一个两行两列输入框的组件，每个输入框都带有标题。以下是实现的代码示例： ``` import 'package:flutter/material.dart'; class TwoByTwoInput extends StatelessWidget { final List<String> titles; final List<TextEditingController> controllers; TwoByTwoInput({required this.titles, required this.controllers}); @override Widget build(BuildContext context) { return GridView.count( crossAxisCount: 2, children: List.generate(4, (index) { return Card( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( titles[index], style: TextStyle(fontWeight: FontWeight.bold), ), SizedBox(height: 8), TextField( controller: controllers[index], decoration: InputDecoration( hintText: 'Enter ${titles[index]}', border: OutlineInputBorder(), ), ), ], ), ), ); }), ); } } ``` 在使用时，需要提供两个参数：`titles` 和 `controllers`。`titles` 是一个包含四个字符串的列表，分别对应四个输入框的标题；`controllers` 是一个包含四个 `TextEditingController` 对象的列表，分别对应四个输入框的文本控制器。 示例用法： ``` class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final List<String> titles = ['Title 1', 'Title 2', 'Title 3', 'Title 4']; final List<TextEditingController> controllers = [ TextEditingController(), TextEditingController(), TextEditingController(), TextEditingController(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Two by Two Input'), ), body: Center( child: TwoByTwoInput(titles: titles, controllers: controllers), ), ); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值