Flutter 输入框组件

已于 2022-07-08 15:43:13 修改
阅读量4.5k 收藏 4
点赞数 5
分类专栏： Flutter 文章标签： flutter 输入框 TextField 自定义样式
于 2022-06-20 17:35:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/125376119
版权

文章目录

Flutter 输入框组件

基本属性

autofocus：是否自动获取焦点。

obscureText：密码输入框。maxLines只能为1，否则出现异常。

showCursor & cursorWidth & cursorRadius & cursorColor：光标是否显示、光标宽度、圆角、颜色。

textAlign：文本水平对齐方式。

textAlignVertical：文本垂直对齐方式。

style：文本样式。

maxLength：输入框最大长度。

inputFormatters：设置输入框内容格式，值允许输入指定格式的数据。
	- FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]"))：只允许a-zA-Z。
	- FilteringTextInputFormatter.digitsOnly：仅数字1-9.

decoration：TextField组件的装饰，类型是InputDecoration，可以设置文本、提示文本、样式等。
	- labelText：label文本。
	- labelStyle：label文本样式
	- hintText：输入框为空时提示文本。
	- hintStyle：hint文本样式。
	- icon：输入框外前面的图标
	- prefixIcon：输入框内前面的图标。
	- prefix：输入框内前面的组件。
	- contentPadding：内边距。

controller：用于控制输入框，监听输入框内容变化、设置默认文本、选中输入框内容。

onChange：监听输入框内容变化。

onTap：点击输入框时回调。

onSubmitted：点击软键盘回车键时回调。

keyboardType：控制软键盘输入类型
    - text：通用键盘。
    - multiline：多行文本，支持换行，需要配合maxLines使用。
    - number：数字键盘。
    - phone：电话键盘，相比数字键盘多了“*”和“#”。
    - datetime：日期时间键盘。
    - emailAddress：邮件键盘。
    - url：url输入键盘。
    - visiblePassword：字母和数字键盘。

textInputAction：软键盘回车键图标。

自动换行

maxLines: null,
minLines: 1,

限制输入

maxLength虽然可以限制输入长度，但是右下角会出现输入计数，有些场景是不需要显示的，可以通过如下解决：

inputFormatters: [
    LengthLimitingTextInputFormatter(10),
]

只允许输入11手机号

inputFormatters: [
    LengthLimitingTextInputFormatter(11),
    FilteringTextInputFormatter.digitsOnly,
]

限制当行，会覆盖maxLines

inputFormatters: [
    FilteringTextInputFormatter.singleLineFormatter,
]

简单使用

在这里插入图片描述

final TextEditingController _usernameController = TextEditingController();
final TextEditingController _descController = TextEditingController();
var descriptionCount = "";

@override
void initState() {
    //监听内容变化
    _usernameController.addListener(() {
        print("内容监听1：${_usernameController.text}");
    });

    //设置默认值
    _descController.text = "helloworld";
    //设置选择文本
    _descController.selection = TextSelection(
        baseOffset: 0,
        extentOffset: _descController.text.length,
    );
    super.initState();
}

@override
void dispose() {
    _usernameController.dispose();
    _descController.dispose();
    super.dispose();
}

TextField(
    controller: _usernameController,
    inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]")),
    ],
    decoration: const InputDecoration(
        labelText: "用户名",
        hintText: "请输入用户名(仅允许输入英文字符)",
        prefixIcon: Icon(Icons.person),
    ),
    onChanged: (value) {
        print("内容监听2：$value");
    },
),
TextField(
    inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp("[a-zA-Z0-9.]")),
    ],
    decoration: const InputDecoration(
        labelText: "邮箱",
        hintText: "请输入邮箱账号",
        prefixIcon: Icon(Icons.mail),
    ),
    keyboardType: TextInputType.emailAddress,
),
TextField(
    inputFormatters: [
        FilteringTextInputFormatter.digitsOnly,
    ],
    decoration: const InputDecoration(
        labelText: "密码",
        hintText: "请输入密码（仅允许输入6位即以上的数字）",
        prefixIcon: Icon(Icons.lock),
    ),
    keyboardType: TextInputType.number,
    obscureText: true,
),
TextField(
    autofocus: true,
    maxLines: 3,
    maxLength: 32,
    controller: _descController,
    onChanged: (value) {
        setState(() {
            descriptionCount = value;
        });
    },
    decoration: InputDecoration(
        labelText: "描述",
        hintText: "请输入描述",
        prefixIcon: const Icon(Icons.description),
        counterText: "${descriptionCount.length}/32",
    ),
    keyboardType: TextInputType.multiline,
)

焦点控制

焦点控制可以通过FocusNode和FocusScopeNode来控制。一般情况下，简单由FoucusNode管理，它代表焦点控制范围，可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。

在这里插入图片描述

FocusNode focusNode1 = FocusNode();
FocusNode focusNode2 = FocusNode();
FocusScopeNode? focusScopeNode;

@override
void dispose() {
    focusNode1.dispose();
    focusNode2.dispose();
    focusScopeNode?.dispose();
    super.dispose();
}

TextField(
    autofocus: true,
    focusNode: focusNode1,
    decoration: const InputDecoration(
        labelText: "input1",
    ),
),
TextField(
    autofocus: true,
    focusNode: focusNode2,
    decoration: const InputDecoration(
        labelText: "input2",
    ),
),
ElevatedButton(
    onPressed: () {
        //方式一
        FocusScope.of(context).requestFocus(focusNode1);
    },
    child: const Text("input1获取焦点"),
),
ElevatedButton(
    onPressed: () {
        //方式二
        focusScopeNode ??= FocusScope.of(context);
        focusScopeNode?.requestFocus(focusNode2);
    },
    child: const Text("input2获取焦点"),
),
ElevatedButton(
    onPressed: () {
        //方式一
        focusNode1.unfocus();
        focusNode2.unfocus();
        //方式二
        // focusScopeNode?.unfocus();
    },
    child: const Text("隐藏键盘"),
),

自定义样式1

在这里插入图片描述

Padding(
    padding: EdgeInsets.all(10),
    child: TextField(
        textAlign: TextAlign.center,
        decoration: InputDecoration(
            fillColor: Color(0x30cccccc),
            filled: true,
            hintText: "QQ/邮箱/手机号",
            enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(100)),
                borderSide: BorderSide(color: Colors.grey),
            ),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(100)),
                borderSide: BorderSide(color: Colors.black),
            ),
        ),
    ),
)

自定义样式2

在这里插入图片描述

final FocusNode focusNode1 = FocusNode();
final FocusNode focusNode2 = FocusNode();
bool _hasFocus1 = false;
bool _hasFocus2 = false;

@override
void initState() {
    super.initState();
    focusNode1.addListener(() {
        if (_hasFocus1 != focusNode1.hasFocus) {
            setState(() {
                _hasFocus1 = focusNode1.hasFocus;
            });
        }
    });

    focusNode2.addListener(() {
        if (_hasFocus2 != focusNode2.hasFocus) {
            setState(() {
                _hasFocus2 = focusNode2.hasFocus;
            });
        }
    });
}

@override
void dispose() {
    focusNode1.dispose();
    focusNode2.dispose();
    super.dispose();
}

Padding(
    padding: const EdgeInsets.all(10),
    child: Column(
        children: [
            Container(
                child: TextField(
                    focusNode: focusNode1,
                    cursorColor: Colors.black,
                    decoration: InputDecoration(
                        labelText: "用户名",
                        labelStyle: TextStyle(
                            color: _hasFocus1 ? Colors.black : Colors.grey,
                        ),
                        hintText: "请输入用户名",
                        prefixIcon: Icon(
                            Icons.people,
                            color: _hasFocus1 ? Colors.red : Colors.grey,
                        ),
                        border: InputBorder.none,
                    ),
                ),
                decoration: BoxDecoration(
                    border: Border.all(
                        color: _hasFocus1 ? Colors.red : Colors.grey,
                        width: 1,
                    ),
                    borderRadius: const BorderRadius.all(Radius.circular(10)),
                ),
            ),
            const SizedBox(
                height: 5,
            ),
            Container(
                child: TextField(
                    focusNode: focusNode2,
                    cursorColor: Colors.black,
                    decoration: InputDecoration(
                        labelText: "密码",
                        labelStyle: TextStyle(
                            color: _hasFocus2 ? Colors.black : Colors.grey,
                        ),
                        hintText: "请输入密码",
                        prefixIcon: Icon(
                            Icons.lock,
                            color: _hasFocus2 ? Colors.red : Colors.grey,
                        ),
                        border: InputBorder.none,
                    ),
                    obscureText: true,
                ),
                decoration: BoxDecoration(
                    border: Border.all(
                        color: _hasFocus2 ? Colors.red : Colors.grey,
                        width: 1,
                    ),
                    borderRadius: BorderRadius.circular(10),
                ),
            ),
        ],
    ),
)
xiangxiongfly915
关注
专栏目录
Flutter中的文本输入框组件TextField
越陌度阡
01-01 7375
Flutter中的文本输入框使用TextField 这个组件来表示。 主要的属性如下： 1.
flutter获取验证码输入框组件
WoSNBBCSDN的博客
07-06 1877
代码 import 'package:flutter/material.dart'; class ValidataInputBoxWidget extends StatefulWidget { ValidataInputBoxWidget({Key key, this.onChange, this.icon,this.getValidata}) : super(key: key); final IconData icon; //输入框icon materialIcon final onCha
Flutter 基础篇（九）—— 输入框
一个写代码的废物
10-16 1573
在 Material 组件库中，提供了 TextField 和 Form 分别来表示输入框和表单。 TextField TextField 用于文本输入，它提供了很多属性，先来看它的定义： const TextField({ ... TextEditingController controller, FocusNode focusNode, InputDecoration dec...
Flutter 验证码输入框
唐僧的专栏
06-01 1287
验证码输入框很常见：处理不好 bug也会比较多 想实现方法很多，这里列举一种完美方式，完美兼容 软键盘粘贴方式效果如下：之前使用 uniapp 的方式实现过一次 两种方式（原理相同）：input 验证码 密码 输入框_input密码输入框-CSDN博客前言：uniapp 在做需求的时候，经常会遇到；验证码输入框 或者 密码输框 自定义样式输入框 或者 格式化显示 银行卡 手机号码等等：这里总结了两种 常用的实现方式；从这两种实现方式 其实也能延伸出其他的显示 方式；
flutter文本输入框使用
最新发布
且听真言
09-03 558
TextField 是 Material Design 文本字段。它允许用户使用硬件键盘或屏幕键盘输入文本。每当用户更改字段中的文本时，文本字段都会调用 onChanged 回调。如果用户表示他们已完成在字段中的输入（例如，通过按下软键盘上的按钮），文本字段将调用 onSubmitted 回调。
Flutter TextField 输入框 简单使用
qq_28845393的博客
07-02 3821
也有多种属性，但都比较简单，所以不必担心，且听我娓娓道来。风格的输入框，本身有多种属性，除此之外装饰器。
flutter TextField 输入框组件
热门推荐
卓原的进化之旅
09-08 11万+
TextField 顾名思义文本输入框，类似于Ios中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能，就不在做具体介绍了，接下来还是具体介绍下Flutter中TextField的用法。 TextField的构造方法： const TextField({ Key ...
Flutter入门：TextField（输入框）
Kristoffer的博客
10-24 1010
用 prefixIcon 替代 prefix。
flutter 输入框组件TextField的实现代码
08-25
Flutter 输入框组件TextField 的实现代码详解 在 Flutter 中，TextField 是一个非常重要的组件，用于用户输入文本信息。这篇文章将详细介绍 Flutter 中 TextField 的实现代码，包括其构造方法、基本使用方式、属性...
flutter实现输入框撤销、重写功能
06-16
2. **输入框组件（TextField）**： - Flutter中的TextField组件是用于接收用户输入的控件。我们需要监听其`onChanged`事件，当用户输入时触发相应的逻辑，更新栈的状态。 3. **实现撤销（Undo）**： - 在撤销操作...
flutter 边框_Flutter TextField 边框样式以及提示文本
weixin_39522103的博客
11-30 1899
题记—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。1 引言1.1 情景一一个文本框默认情况下 可编辑 (允许输入文本的情况)获取焦点(正在输入文本)下，会有默认的一个下划线，这个下划线的颜色是获取的MaterialApp 组件中 them 配置的 textTheme 主题中的样式。1.2 情景二当本框可编辑，但是并没有获取焦点时(也就是没在输入时)，也会有一个样式如下：与情景一不同的效...
Flutter组件-Input-TextField-文本输入框
亢少军的博客
01-28 2832
防采集标记：亢少军老师的课程和资料 示例代码 //文档地址:https://docs.flutter.io/flutter/material/TextField-class.html import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends State...
2021年Flutter中的文本输入框组件TextField
码蝗的博客
03-24 705
Flutter中的文本输入框使用TextField 这个组件来表示。 主要的属性如下： 1.maxLines 最大输入行。默认为单行输入框，配置此参数后则为多行输入框； 2.onChanged 输入改变触发的事件。可以获取当前输入改变以后的值； 3.obscureText隐蔽的文本。主要用于密码输入框； 4.controller 文本控制器。当输入框有默认的输入值时就需要用到文本控制器； 5.decoration 装饰器。主要的属性如下： (1). hintText 占位提示符。类...
Flutter 中的 InputDecorator 小部件：全面指南
smileKH的博客
05-23 581
是一个布局小部件，它将输入字段的装饰和行为抽象化，使得开发者可以轻松地为输入字段添加标签、边框、填充、图标和错误消息等元素。它通常与TextField和一起使用，以提供一致和可定制的外观。decoration：定义输入字段的装饰，如标签、边框、填充等。child：输入字段的实际内容，可以是TextFieldIcon或其他任何小部件。),),您可以将任何自定义的输入字段与一起使用，只需确保它们遵循的布局规则。
[Flurtter]输入框样式
weixin_42545230的博客
06-15 210
无外边线，无底边线 decoration: InputDecoration( border: OutlineInputBorder(borderSide: BorderSide.none), contentPadding: EdgeInsets.symmetric(vertical: 10.0), hintText: _.rate.text, hintStyle: TextStyle(color: Colors.grey,fontSize: 20), ), 弧形外边线 decoration: I
Flutter 封装输入框组件
weixin_43800535的博客
02-15 969
封装输入框基础组件
Flutter 完美的验证码输入框（2 种方法）
2401_83704218的博客
03-24 1220
这里我希望可以帮助到大家提升进阶。Android学习PDF+架构视频+面试文档+源码笔记高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这几块的内容。非常适合近期有面试和想在技术道路上继续精进的朋友。喜欢本文的话，不妨给我点个小赞、评论区留言或者转发支持一下呗~《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可免费领取！这里我希望可以帮助到大家提升进阶。Android学习PDF+架构视频+面试文档+源码笔记。
flutter 微信输入框 (第二版)
唐僧的专栏
04-26 854
微信的聊天输入框之前实现了一个版本，但是之前实现的不太优雅。这两天重写了一遍。
Flutter TextField组件详解与示例
"flutter 输入框组件TextField的实现代码" 在Flutter框架中，TextField是用于创建文本输入字段的组件，类似于其他平台上的输入控件。它提供了丰富的功能，如文本编辑、格式化、验证等，是构建用户界面时不可或缺的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值