Flutter基础widgets教程-TextField篇

简介: Flutter基础widgets教程-TextField篇

1 TextField

TextField 是一个文本输入组件,类似 Web 上的 Input。

2 构造函数

TextField({
    Key key,
    this.controller,
    this.focusNode,
    this.decoration = const InputDecoration(),
    TextInputType keyboardType,
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.strutStyle,
    this.textAlign = TextAlign.start,
    this.textDirection,
    this.autofocus = false,
    this.obscureText = false,
    this.autocorrect = true,
    this.maxLines = 1,
    this.minLines,
    this.expands = false,
    this.maxLength,
    this.maxLengthEnforced = true,
    this.onChanged,
    this.onEditingComplete,
    this.onSubmitted,
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection,
    this.onTap,
    this.buildCounter,
    this.scrollPhysics,
})

复制

3 常用属性

3.1 autocorrect:是否启用自动更正

autocorrect:true,

复制

3.2 autofocus:是否是自动获取焦点

autofocus: false,

复制

3.3 controller:控制正在编辑的文本

controller: new TextEditingController(text: this.id),

复制

3.4 decoration:TextField 的外形描述

decoration: const InputDecoration(
    hintText: '帐号/邮箱',
    contentPadding: const EdgeInsets.all(10.0),
),

复制

3.5 enabled:是否禁用

enabled:false,

复制

3.6 focusNode:是否具有键盘焦点

focusNode:false,

复制

3.7 keyboardType:键盘类型

keyboardType: TextInputType.number,

复制

3.8 maxLength:文本最大的字符串长度

maxLength: 8,

复制

3.9 maxLengthEnforced:如果为true,则防止字段允许超过 maxLength 字符

maxLengthEnforced:true,

复制

3.10 maxLines:文本最大行数,默认为 1。多行时应该设置为 > 1

maxLines:1,

复制

3.11 obscureText:是否是隐藏文本(密码形式)

obscureText: true,

复制

3.12 onChanged:当 value 改变时触发

onChanged: (text) {
    print("输入改变时" + text);
},

复制

3.13 onSubmitted:当用户点击键盘的提交时触发

onSubmitted: (text) {
    print("提交时触发" + text);
},

复制

3.14 style:文本样式,颜色,字体等

style:TextStyle(color: Colors.blue),

复制

3.15 textAlign:设置文本对齐方式

textAlign:TextAlign.start,
相关文章
|
1月前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
75 0
|
4月前
|
开发者 Windows
Flutter笔记:Widgets Easier组件库(9)使用弹窗
Flutter笔记:Widgets Easier组件库(9)使用弹窗
123 3
|
4月前
|
数据安全/隐私保护 Android开发 开发者
Flutter笔记:Widgets Easier组件库-使用隐私守卫
Flutter笔记:Widgets Easier组件库-使用隐私守卫
56 2
|
4月前
|
UED 开发者
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
92 2
|
4月前
|
开发者
Flutter笔记:Widgets Easier组件库(5)使用加减器
Flutter笔记:Widgets Easier组件库(5)使用加减器
117 2
|
4月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(4)使用按钮组
Flutter笔记:Widgets Easier组件库(4)使用按钮组
38 2
|
4月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
62 2
|
4月前
|
开发者
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
63 1
|
4月前
|
开发者
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
128 0
|
4月前
|
开发者
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
80 0