Flutter 之输入框TextField

2020-11-27 本文已影响0人 yanshihao

Material组件库中提供了输入框组件TextField

TextField

效果图

TextField用于文本输入，它提供了很多属性，我们先简单介绍一下主要属性的作用，然后通过几个示例来演示一下关键属性的用法。

 const 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, //水平方向对齐方式。  值为  left、  right  、center、  justify 、 start、  end
    this.textAlignVertical, // 文本垂直方向对齐方式 。 值为 top   、 center 、  bottom
    this.textDirection,   //文本方向  rtl（right to left）   ltr（left to right）
    this.readOnly = false,
    ToolbarOptions toolbarOptions,   //工具栏选项的配置
    this.showCursor,    //是否显示光标
    this.autofocus = false,   //自动获取焦点
    this.obscuringCharacter = '•',    //隐藏内容时，显示的文字
    this.obscureText = false,  //  是否隐藏内容，例如密码格式
    this.autocorrect = true,  //是否自动校正
    SmartDashesType smartDashesType,   //指示如何处理文本输入中破折号的智能替换
    SmartQuotesType smartQuotesType,  //指示如何处理文本输入中引号的智能替换。
    this.enableSuggestions = true,  //启用建议
    this.maxLines = 1,  //最大行数
    this.minLines, //最小行数
    this.expands = false, //
    this.maxLength,  // 最多输入数，有值后右下角就会有一个计数器
    this.maxLengthEnforced = true, //是否允许超过输入最大长度
    this.onChanged, // 文本内容变更时回调
    this.onEditingComplete,    // 输入完成回调 主要配合TextInputAction.done使用
    this.onSubmitted,  //提交 配合TextInputAction
    this.onAppPrivateCommand,
    this.inputFormatters,   //输入校验
    this.enabled,  //是否可用
    this.cursorWidth = 2.0, // 光标宽度
    this.cursorHeight, //光标高度
    this.cursorRadius, //光标圆角
    this.cursorColor, //光标颜色
    this.selectionHeightStyle = ui.BoxHeightStyle.tight,
    this.selectionWidthStyle = ui.BoxWidthStyle.tight,
    this.keyboardAppearance,   // 键盘亮度
    this.scrollPadding = const EdgeInsets.all(20.0),  // 滚动到视图中时，填充边距
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection = true,    // 长按是否展示 剪切/复制/粘贴菜单
    this.onTap,  //点击事件
    this.mouseCursor, // 鼠标指针进入或悬停在鼠标指针上时的光标
    this.buildCounter,
    this.scrollController,  //控制可滚动的小部件
    this.scrollPhysics, //确定[Scrollable]小部件的物理性质。
    this.autofillHints,//自动填充提示
    this.restorationId, //恢复ID以保存和恢复文本字段的状态。

属性详解

controller：编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller，则TextField内部会自动创建一个。

focusNode：用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个句柄（handle）

InputDecoration：用于控制TextField的外观显示，如提示文本、背景颜色、边框等。

keyboardType：用于设置该输入框默认的键盘输入类型

InputDecoration

  const InputDecoration({
    this.icon,//左侧外的图标
    this.labelText,//悬浮提示，可代替hintText
    this.labelStyle,//悬浮提示文字的样式
    this.helperText,//帮助文字
    this.helperStyle,
    this.hintText,//输入提示
    this.hintStyle,
    this.hintMaxLines,
    this.errorText,//错误提示
    this.errorStyle,
    this.errorMaxLines,
    this.hasFloatingPlaceholder = true,//是否显示悬浮提示文字
    this.isDense,
    this.contentPadding,//内填充
    this.prefixIcon,//左侧内的图标
    this.prefix, //左侧组件   
    this.prefixText,//左侧内的文字
    this.prefixStyle,
    this.suffixIcon,//右侧内图标
    this.suffix,  //右侧组件
    this.suffixText, 
    this.suffixStyle,
    this.counter,//自定义计数器
    this.counterText,//计数文字
    this.counterStyle,//计数样式
    this.filled,//是否填充
    this.fillColor,//填充颜色
    this.errorBorder,
    this.focusedBorder,
    this.focusedErrorBorder,
    this.disabledBorder,
    this.enabledBorder,
    this.border,//边框
    this.enabled = true,
    this.semanticCounterText,
    this.alignLabelWithHint,
  })

注意

prefix和prefixText 以及suffix和suffixText 不能同时存在

图

keyboardType

TextInputType枚举值	含义
text	文本输入键盘
multiline	多行文本，需和maxLines配合使用(设为null或大于1)
number	数字；会弹出数字键盘
phone	优化后的电话号码输入键盘；会弹出数字键盘并显示“* #”
datetime	优化后的日期输入键盘；Android上会显示“: -”
emailAddress	优化后的电子邮件地址；会显示“@ .”
url	优化后的url输入键盘；会显示“/ .”

示例：登录输入框

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

main() {
  runApp(Myapp());
}

class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("基础组件"),
        ),
        body: YshContent(),
      ),
    );
  }
}

class YshContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: InputDecoration(
                labelText: "请输入用户名",
                icon: Icon(Icons.people),
                hintText: "请输入用户名",
                prefixIcon: Icon(Icons.people_alt_rounded)),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            obscureText: true,
            decoration: InputDecoration(
              labelText: "请输入密码",
              prefixIcon: Icon(Icons.lock),
              hintText: "请输入密码",
            ),
          ),
        ),
      ],
    );
  }
}

获取输入内容

获取输入内容有两种方式：
- 定义两个变量，用于保存用户名和密码，然后在onChange触发时，各自保存一下输入内容。
- 通过controller直接获取。

通过onChange获取
void onChanged(String value) {
print(value);
}

通过controller 获取
//定义一个controller
TextEditingController _controller = TextEditingController();
然后设置输入框controller：
TextField(
controller: _controller , //设置controller
...
)
通过controller获取输入框内容
print(_controller .text)

监听文本的变化

通过onChange回调
通过controller监听
_controller .addListener(() {
print(_controller .text);
});

两种方式相比，onChanged是专门用于监听文本变化，而controller的功能却多一些，除了能监听文本变化外，它还可以设置默认值、选择文本

文本选中

_controller .selection=TextSelection(
        baseOffset: 2,
        extentOffset: _controller .text.length
    );

控制焦点

这里我们就用到了focusNode

焦点可以通过FocusNode和FocusScopeNode来控制，默认情况下，焦点由FocusScope来管理，它代表焦点控制范围，可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。我们可以通过FocusScope.of(context) 来获取Widget树中默认的FocusScopeNode。

class FocusTestRoute extends StatefulWidget {
  @override
  _FocusTestRouteState createState() => new _FocusTestRouteState();
}

class _FocusTestRouteState extends State<FocusTestRoute> {
  FocusNode focusNode1 = new FocusNode();
  FocusNode focusNode2 = new FocusNode();
  FocusScopeNode focusScopeNode;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: <Widget>[
          TextField(
            autofocus: true, 
            focusNode: focusNode1,//关联focusNode1
            decoration: InputDecoration(
                labelText: "input1"
            ),
          ),
          TextField(
            focusNode: focusNode2,//关联focusNode2
            decoration: InputDecoration(
                labelText: "input2"
            ),
          ),
          Builder(builder: (ctx) {
            return Column(
              children: <Widget>[
                RaisedButton(
                  child: Text("移动焦点"),
                  onPressed: () {
                    //将焦点从第一个TextField移到第二个TextField
                    // 这是一种写法 FocusScope.of(context).requestFocus(focusNode2);
                    // 这是第二种写法
                    if(null == focusScopeNode){
                      focusScopeNode = FocusScope.of(context);
                    }
                    focusScopeNode.requestFocus(focusNode2);
                  },
                ),
                RaisedButton(
                  child: Text("隐藏键盘"),
                  onPressed: () {
                    // 当所有编辑框都失去焦点时键盘就会收起  
                    focusNode1.unfocus();
                    focusNode2.unfocus();
                  },
                ),
              ],
            );
          },
          ),
        ],
      ),
    );
  }

}


// 监听焦点变化    
focusNode.addListener((){
   print(focusNode.hasFocus);
});

参考

Flutter实战
 https://blog.csdn.net/yechaoa/article/details/90906689

Flutter 之输入框TextField

TextField

属性详解

InputDecoration

注意

keyboardType

示例：登录输入框

监听文本的变化

控制焦点

参考

猜你喜欢

热点阅读

Flutter 之 输入框TextField

TextField

属性详解

InputDecoration

注意

keyboardType

示例：登录输入框

监听文本的变化

控制焦点

参考

猜你喜欢

热点阅读

Flutter 之输入框TextField