当前位置:首页>文章>edittext限制输入长度并且显示(edittext限制输入类型)

edittext限制输入长度并且显示(edittext限制输入类型)

技术刚刚好经历 近几年,移动端跨平台开发技术层出不穷,从Facebook家的ReactNative,到阿里家WEEX,前端技术在移动端跨平台开发中大展身手,技术刚刚好作为一名Android开发,经历了从Reactjs到Vuejs的不断学习。而在2018年,我们的主角变成了Flutter,这是Goolge开源的一个移动端跨平台解决方案,可以快速开发精美的移动App。希望跟大家一起学习,一起进步! 本...

技术刚刚好经历

近几年,移动端跨平台开发技术层出不穷,从Facebook家的ReactNative,到阿里家WEEX,前端技术在移动端跨平台开发中大展身手,技术刚刚好作为一名Android开发,经历了从Reactjs到Vuejs的不断学习。而在2018年,我们的主角变成了Flutter,这是Goolge开源的一个移动端跨平台解决方案,可以快速开发精美的移动App。希望跟大家一起学习,一起进步!

本文核心要点

顾名思义文本输入框,类似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下Flutter中TextField的用法。edittext限制输入长度并且显示(edittext限制输入类型)

TextField

TextField的构造方法:

 const TextField({
    Key key,
    this.controller,            //控制器,控制TextField文字
    this.focusNode,
    this.decoration: const InputDecoration(),      //输入器装饰
    TextInputType keyboardType: TextInputType.text, //输入的类型
    this.style,
    this.textAlign: TextAlign.start,
    this.autofocus: false,
    this.obscureText: false,  //是否隐藏输入
    this.autocorrect: true,
    this.maxLines: 1,
    this.maxLength,
    this.maxLengthEnforced: true,
    this.onChanged,            //文字改变触发
    this.onSubmitted,          //文字提交触发(键盘按键)
    this.onEditingComplete,  //当用户提交可编辑内容时调用
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
  })

main.dat文件


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

void main() {
  runApp(MaterialApp(
    home: MyEditText(),
  ));
}

class MyEditText extends StatefulWidget {
  @override
  MyEditTextState createState() => MyEditTextState();
}

class MyEditTextState extends State<MyEditText> {
  String results = \"\";

  final TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(\"Using EditText\"),
        backgroundColor: Colors.red,
      ),
      body: Container(
        padding: const EdgeInsets.all(10.0),
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(hintText: \"Enter text here...\"),
                onSubmitted: (String str) {
                  setState(() {
                    results = results + \"n\" + str;
                    controller.text = \"\";
                  });
                },
                controller: controller,
              ),
              Text(results)
            ],
          ),
        ),
      ),
    );
  }
}

总结

这篇文章主要介绍了flutter当中TextField控件介绍。

给TA打赏
共{{data.count}}人
人已打赏
文章

免费固定资产管理软件有哪些(详解财务软件排名)

2022-4-7 10:27:31

文章

饰品加盟店有什么牌子(高档小饰品连锁店加盟)

2022-4-11 9:50:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索