欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

程序员文章站 2022-06-21 10:11:49
今天来学习下TextField文本框组件和Card卡片组件。 只要是应用程序就少不了交互,基本上所有的应用程序都会有用户名、密码输入框,搜索框等等,前面我们有写过一篇基于Form表单的输入功能,今天来看一下TextField文本框组件,文本输入是最常见的一种交互方式,TextField组件就是... ......

如需转载,请注明出处:flutter学习笔记(21)--textfield文本框组件和card卡片组件

今天来学习下textfield文本框组件和card卡片组件。

只要是应用程序就少不了交互,基本上所有的应用程序都会有用户名、密码输入框,搜索框等等,前面我们有写过一篇基于form表单的输入功能,今天来看一下textfield文本框组件,文本输入是最常见的一种交互方式,textfield组件就是用来做文本输入的组件。注意这个要和text组件区分开来,text组件主要用于显示文本,并不能接受输入文本。

  • textfield文本框组件

textfield组件构造方法:

const textfield({
key key,
// controller是textfield的控制器,当textfield在编辑时回调,
// 如果不设置则textfield默认创建自己的controller,重点是如果两个textfield使用一个controller,那么在一个中输入内容,另一个会同步
this.controller,
this.focusnode,//焦点控制
this.decoration = const inputdecoration(),//textfield装饰器,主要用于控制textfield的外观及提示等
textinputtype keyboardtype,//键盘类型,有number、phone、emailaddress、text等
this.textinputaction,//键盘事件类型,有send、search等
this.textcapitalization = textcapitalization.none,//
this.style,//输入文本的样式
this.strutstyle,
this.textalign = textalign.start,//对齐方式,默认开始位置对齐
this.textdirection,//文本方向,默认从左到右
this.autofocus = false,//是否自动获得焦点,默认false
this.obscuretext = false,//文本内容是否加密,默认false
this.autocorrect = true,//是否自动更正
this.maxlines = 1,//最大行数
this.minlines,//最小行数
this.expands = false,
this.maxlength,//最大长度
this.maxlengthenforced = true,//超过最大长度输入,是否提示错误,默认true,如果设置了false,可以继续输入但是会提示错误
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,
})

简单实现一个登陆的功能,限制用户名输入框输入的内容长度为10位,不到10位长度,给toast提示,demo示例:

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

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  final texteditingcontroller _usecontroller = new texteditingcontroller();
  final texteditingcontroller _pwdcontroller = new texteditingcontroller();
  @override
  widget build(buildcontext context) {
    _usecontroller.addlistener((){
      fluttertoast.showtoast(msg: '您输入的内容为:${_usecontroller.text}');
    });
    return new materialapp(
      title: 'textfield and card demo',
      debugshowcheckedmodebanner: false,
      home: new scaffold(
        appbar: appbar(
          title: new text('textfield and card demo'),
        ),
        body: new column(
          children: <widget>[
            padding(
              padding: edgeinsets.only(left: 20,top: 0,right: 20,bottom: 0),
              child: textfield(
                  controller: _usecontroller,//绑定controller
                  maxlines: 1,//最多一行
                  maxlength: 10,//最多输入10个字符
                  autofocus: true,//自动获取焦点
                  textalign: textalign.left,//从左到右对齐
                  style: new textstyle(color: colors.white,fontsize: 20.0),//输入内容颜色和字体大小
                  cursorcolor: colors.deeppurple,//光标颜色
                  keyboardtype: textinputtype.phone,
                  decoration: inputdecoration(
                    //添加装饰效果
                    filled: true,//背景是否填充
                    fillcolor: colors.redaccent,//添加黄色填充色(filled: true必须设置,否则单独设置填充色不会生效)
                    helpertext: '用户名',
                    prefixicon: icon(icons.person_add),//左侧图标
                    suffixtext: '用户名',//右侧文本提示
                    suffixstyle: new textstyle(fontsize: 20),//右侧提示文案字体大小
                    hinttext: 'input user name',//hint提示文案
                    hintstyle: new textstyle(color: colors.amber),//hint提示文案字体颜色
                    border: outlineinputborder(
                      borderradius: borderradius.circular(10.0),//添加圆角
                    ),
                  )
              ),
            ),
            padding(
              padding: edgeinsets.only(left: 20,top: 0,right: 20,bottom: 0),
              child: textfield(
                  controller: _pwdcontroller,//绑定controller
                  maxlines: 1,//最多一行
                  maxlength: 10,//最多输入10个字符
                  autofocus: true,//自动获取焦点
                  textalign: textalign.left,//从左到右对齐
                  style: new textstyle(color: colors.white,fontsize: 20.0),//输入内容颜色和字体大小
                  cursorcolor: colors.deeppurple,//光标颜色
                  keyboardtype: textinputtype.phone,
                  decoration: inputdecoration(
                    //添加装饰效果
                    filled: true,//背景是否填充
                    fillcolor: colors.redaccent,//添加黄色填充色(filled: true必须设置,否则单独设置填充色不会生效)
                    helpertext: '密  码',
                    prefixicon: icon(icons.person_add),//左侧图标
                    suffixtext: '密  码',//右侧文本提示
                    suffixstyle: new textstyle(fontsize: 20),//右侧提示文案字体大小
                    hinttext: 'input user pwd',//hint提示文案
                    hintstyle: new textstyle(color: colors.amber),//hint提示文案字体颜色
                    border: outlineinputborder(
                      borderradius: borderradius.circular(10.0),//添加圆角
                    ),
                  )
              ),
            ),
            raisedbutton(
                onpressed: _loginsubmit,
                child: new text('登陆'),
            )
          ],
        ),
      ),
    );
  }

  void _loginsubmit() {
    if(_usecontroller.text.length != 10){
      fluttertoast.showtoast(msg: '用户名长度为11位');
    }
  }
}

 

效果截图:

Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

上面的各类属性设置都有很详细的注释,这里就挑几个容易踩的坑来讲一下吧!

1.多个textfield一定要对应多个controller,不然多个textfield用同一个controller的话,会导致一个输入框的内容会同步到其他输入框内:

  final texteditingcontroller _usecontroller = new texteditingcontroller();
  final texteditingcontroller _pwdcontroller = new texteditingcontroller();

 

2.如果要给textfield设置背景填充色,filled和fillcolor这两个属性一定要成对出现,不然你会发现设置不生效:

filled: true,//背景是否填充
fillcolor: colors.redaccent,//添加黄色填充色(filled: true必须设置,否则单独设置填充色不会生效)

 

3.通过controller获取输入框内输入的内容:

_usecontroller.text

 

4.textfield内容变化监听,一般可用作金额输入进行动态计算操作:

onchanged: (value){
    fluttertoast.showtoast(msg: value);
},

 

 5.textfield装饰器构造方法

inputdecoration({
    this.icon,    //位于装饰器外部和输入框前面的图片
    this.labeltext,  //用于描述输入框,例如这个输入框是用来输入用户名还是密码的,当输入框获取焦点时默认会浮动到上方,
    this.labelstyle,  // 控制labeltext的样式,接收一个textstyle类型的值
    this.helpertext, //辅助文本,位于输入框下方,如果errortext不为空的话,则helpertext不会显示
    this.helperstyle, //helpertext的样式
    this.hinttext,  //提示文本,位于输入框内部
    this.hintstyle, //hinttext的样式
    this.hintmaxlines, //提示信息最大行数
    this.errortext,  //错误信息提示
    this.errorstyle, //errortext的样式
    this.errormaxlines,   //errortext最大行数
    this.hasfloatingplaceholder = true,  //labeltext是否浮动,默认为true,修改为false则labeltext在输入框获取焦点时不会浮动且不显示
    this.isdense,   //改变输入框是否为密集型,默认为false,修改为true时,图标及间距会变小
    this.contentpadding, //内间距
    this.prefixicon,  //位于输入框内部起始位置的图标。
    this.prefix,   //预先填充的widget,跟prefixtext同时只能出现一个
    this.prefixtext,  //预填充的文本,例如手机号前面预先加上区号等
    this.prefixstyle,  //prefixtext的样式
    this.suffixicon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛,控制输入内容是否明文
    this.suffix,  //位于输入框尾部的控件,同样的不能和suffixtext同时使用
    this.suffixtext,//位于尾部的填充文字
    this.suffixstyle,  //suffixtext的样式
    this.counter,//位于输入框右下方的小控件,不能和countertext同时使用
    this.countertext,//位于右下方显示的文本,常用于显示输入的字符数量
    this.counterstyle, //countertext的样式
    this.filled,  //如果为true,则输入使用fillcolor指定的颜色填充
    this.fillcolor,  //相当于输入框的背景颜色
    this.errorborder,   //errortext不为空,输入框没有焦点时要显示的边框
    this.focusedborder,  //输入框有焦点时的边框,如果errortext不为空的话,该属性无效
    this.focusederrorborder,  //errortext不为空时,输入框有焦点时的边框
    this.disabledborder,  //输入框禁用时显示的边框,如果errortext不为空的话,该属性无效
    this.enabledborder,  //输入框可用时显示的边框,如果errortext不为空的话,该属性无效
    this.border, //正常情况下的border
    this.enabled = true,  //输入框是否可用
    this.semanticcountertext,  
    this.alignlabelwithhint,
  })

 

  • card卡片组件

card即卡片组件块,内容可以由大多数类型的widget构成,但通常和listtitle一起使用,card有一个child,但它可以是支持多个child的列、行、网格或其他小部件。默认情况下,card将其大小缩小为0像素,你可以使用sizebox来限制card的大小,在flutter中,card具有圆角和阴影。

demo示例:

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

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    // todo: implement build
    return new materialapp(
      title: 'textfield and card demo',
      home: scaffold(
        appbar: appbar(
          title: new text('textfield and card demo'),
        ),
        body: center(
          child: new sizedbox(
            height: 360,
            child: card(
              color: colors.white,
              margin: edgeinsets.only(left: 20,top: 0,right: 20,bottom: 0),
              shape: roundedrectangleborder(borderradius: borderradius.circular(20)),//设置圆角
              child: column(
                children: <widget>[
                  new listtile(
                    leading: icon(icons.add_circle_outline),
                    title: new text('textfield and card demo1'),
                    subtitle: new text('副标题1'),
                  ),
                  new divider(),
                  new listtile(
                    leading: icon(icons.add_circle_outline),
                    title: new text('textfield and card demo2'),
                    subtitle: new text('副标题2'),
                    ontap: (){

                    },
                  ),
                  new divider(),
                  new listtile(
                    leading: icon(icons.add_circle_outline),
                    title: new text('textfield and card demo3'),
                    subtitle: new text('副标题3'),
                  ),
                  new divider(),
                  new listtile(
                    leading: icon(icons.add_circle_outline),
                    title: new text('textfield and card demo4'),
                    subtitle: new text('副标题4'),
                  ),
                  new divider(),
                ],
              ),
            ),
          ),
        )
      ),
    );
  }
}

 

效果截图:

Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

以上就是今天的学习内容啦!!!