Flutter TextField 输入框 简单使用

这篇具有很好参考价值的文章主要介绍了Flutter TextField 输入框 简单使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

创建方式一:

///用于文本输入框
TextEditingController controller = new TextEditingController();

/// 设置TextField中显示的内容
  void setEditeInputTextFunction(String flagText) {
    controller .text = flagText;
  }

  /// 清除TextField中显示的内容
  void clearEditeInputTextFunction() {
    controller .text = "";

    ///或者使用clear方法
    controller .clear();
  }

  TextField(
    controller: controller,
    ///当TextField中输入的内容发生改变时回调
    onChanged: (value) {
      print("TextField 中输入的内容 $value");
    },
    decoration: InputDecoration(
      hintText: "提示的内容",
      helperStyle:TextStyle(
        color: Colors.red,
      ),
    ),
  ),

创建方式二:

///初始化控制器
TextEditingController controller = new TextEditingController(text: "初始化的内容");


 ///预设输入框的内容
String preText = "";


///控制 初始化的时候光标保持在文字最后
    controller = TextEditingController.fromValue(
      ///用来设置初始化时显示
      TextEditingValue(
        ///用来设置文本 controller.text = "0000"
        text: preText,

        ///设置光标的位置
        selection: TextSelection.fromPosition(
          ///用来设置文本的位置
          TextPosition(
              affinity: TextAffinity.downstream,
              /// 光标向后移动的长度
              offset: preText.length),
        ),
      ),
    );



///文本输入框
  child: TextField(
    controller: controller,
    ///当TextField中输入的内容发生改变时回调
    onChanged: (value) {
      print("TextField 中输入的内容 $value");
    },

    decoration: InputDecoration(
      hintText: "提示的内容",
      helperStyle:TextStyle(
        color: Colors.red,
      ),
    ),
  ),
TextFiel属性详解:

TextField是一个material design风格的输入框,本身有多种属性,除此之外装饰器InputDecoration也有多种属性,但都比较简单,所以不必担心,且听我娓娓道来。

flutter 输入框,flutter,前端,android

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,//对齐方式
    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,//输入完成时,配合TextInputAction.done使用
    this.onSubmitted,//提交时,配合TextInputAction
    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,
  }) 

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,
  })。
图标

图标有3种:

  • 左侧外的图标
              TextField(
                decoration: InputDecoration(
                  icon: Icon(Icons.person),
                ),
              ),

flutter 输入框,flutter,前端,android

  • 左侧内图标
            TextField(
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.phone_android),
                ),
              ),

flutter 输入框,flutter,前端,android

  • 右侧内图标
             TextField(
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      controller.clear();
                    },
                  ),
                ),
              ),

flutter 输入框,flutter,前端,android

在右侧图标加了一个IconButton,因为带有点击事件,我们可以在点击的时候清除TextField中的内容。

以上就是图标的介绍,其实除了图标之外,对应的位置也可以显示文字或者自定义显示其他widget 比如出了prefixIcon之外还有其他3个属性,用法跟上面介绍到的自定义计数器是一样的。

   this.prefix,
   this.prefixText,
   this.prefixStyle,
提示文字

提示文字有4种:

  • 输入提示文字
            TextField(
                controller: controller,
                decoration: InputDecoration(
                  hintText: '提示内容(请输入....)',
                ),
              ),

flutter 输入框,flutter,前端,android

  • 悬浮提示文字
            TextField(
                controller: controller,
                decoration: InputDecoration(
                  hintText: '请输入...',
                ),
              ),

可以看到,默认显示labelText,聚焦之后才显示hintText,所以labelText是可以取代hintText的。

  • 帮助提示文字
   TextField( 
    controller: controller, 
    decoration: InputDecoration(
    helperText: "帮助文字", 
    helperStyle: TextStyle(color: Colors.blue),
    ), 
),

flutter 输入框,flutter,前端,android

一直显示在左下方

  • 错误提示文字
            TextField(
                decoration: InputDecoration.collapsed(hintText: "无下划线的输入框"),
              ),

flutter 输入框,flutter,前端,android

去除下划线
            TextField(
                decoration: InputDecoration.collapsed(hintText: "无下划线的输入框"),
              ),

flutter 输入框,flutter,前端,android

也可以decoration: null, 差别就是没有hintText了

边框:
               TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                  ),
                ),
              ),

flutter 输入框,flutter,前端,android

圆角:

               TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                  ),
                ),
              ),

flutter 输入框,flutter,前端,android文章来源地址https://www.toymoban.com/news/detail-719343.html

到了这里,关于Flutter TextField 输入框 简单使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后,输入的内容中包含表情符号时,获取输入的内容数还是会超出限制的问题

    这是【Flutter 问题系列第 80 篇】,如果觉得有用的话,欢迎关注专栏。 博文当前所用 Flutter SDK:3.10.5、Dart SDK:3.0.5 一:问题描述 在输入用户名称、简介等内容时,一般我们都会限制输入框内最大可输入数(通过 TextField 组件的 maxLength 属性),如下图限制简介最多10个字 正常

    2024年01月21日
    浏览(59)
  • Flutter TextField 交互实例 —— 新手礼包

    大家好,我是 17。 新手礼包一共 3 篇文章,每篇都是描述尽量详细,实例讲解,包会! Flutter Row 实例 —— 新手礼包 Flutter TextField UI 实例 —— 新手礼包 Flutter TextField 交互实例 —— 新手礼包 本篇包含所有常见 TextField 交互示例。 在上一篇 Flutter TextField UI 实例 中第一个示例

    2023年04月09日
    浏览(40)
  • Flutter TextField UI 实例 —— 新手礼包

    大家好,我是17。 新手礼包一共 3 篇文章,每篇都是描述尽量详细,实例讲解,包会! Flutter Row 实例 —— 新手礼包 Flutter TextField UI 实例 —— 新手礼包 Flutter TextField 交互实例 —— 新手礼包 本篇介绍了 TextField UI 的常见写法,从TextField的尺寸,border,icon,文本到光标,无所

    2023年04月08日
    浏览(34)
  • Flutter TextField设置背景色和圆角

    这是一个很常见的登录页面,自然想到了Flutter的表单组件 Form。  想使用 Form  组件,就要修改 TextFormField 的样式了。 TextFormField 是 TextField 的一个包装类,除了 FormField 定义的属性之外,它还包括 TextField 的属性。 TextField的decoration 属性可以用于控制 TextField 的外观显示,如提

    2023年04月18日
    浏览(81)
  • Flutter TextField 组件的属性、监听、赋值等详细说明

    ①获取文本框内容: _use.text.toString(); ②给文本框赋值,有两种写法: String  mUserId=\\\"123\\\"; ③文本框的监听: _use .addListener(() {   print(\\\"你输入的内容为:\\\"+ mUserId );   }); return TextField( //改变事件 onChanged: (str) { print(\\\"你改变的内容为:\\\"+ str ); },); //使用 return TextField( focusNode: _focus

    2023年04月08日
    浏览(49)
  • flutter使用shared_preferences依赖库实现简单的本地数据存储,封装成一个简单的单例类,方便前端同学使用

    shared_preferences 仓库地址:shared_preferences | Flutter Package shared_preferences这个依赖库还是非常好用的,全平台支持,就像前端经常使用的localstorage一样方便,所以就想着封装成一个简单的类,方便前端同学使用。封装好的代码支持json或者数组等这种类型的存储和获取。 在utils里面

    2024年01月20日
    浏览(51)
  • flutter:webview_flutter的简单使用

    最近在研究如何在应用程序中嵌入Web视图,发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求,就使用了官方库,实现一些简单功能是完全ok的 不建议使用,因为效果不怎么样,当然也可能是我太菜不会用,下面这个问题就很难理解为什么会这样

    2024年02月12日
    浏览(49)
  • flutter:webview_flutter和flutter_inappwebview的简单使用

    最近在研究如何在应用程序中嵌入Web视图,发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求,就使用了官方库,实现一些简单功能是完全ok的 不建议使用,因为效果不怎么样,当然也可能是我太菜不会用,下面这个问题就很难理解为什么会这样

    2024年02月12日
    浏览(55)
  • 【Flutter】使用Android Studio 创建第一个flutter应用。

    首先下载好 flutter sdk和 Android Studio。 FlutterSDK下载 Android Studio官网 我的是 windows。 查看flutter安装环境。 如果没有,自己在环境变量的path添加下flutter安装路径。 在将 Path 变量更新后,打开一个新的控制台窗口,然后执行下面的命令。如果它提示有任何的平台相关依赖,那么

    2024年02月10日
    浏览(65)
  • flutter getx 简单使用教程

    所以Flutter使用GetX真的很不错 为什么说什么GetX好用呢? 1、依赖注入 GetX是通过依赖注入的方式,存储相应的XxxGetxController;已经脱离了InheritedWidget那一套玩法,自己手动去管理这些实例,使用场景被大大拓展 2、跨页面交互 这绝对是GetX的一个优点!对于复杂的生产环境,跨

    2024年02月08日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包