Flutter 实现返回上一页清空编辑框文本(2)

最新推荐文章于 2024-11-14 19:50:17 发布

2301_77595001

最新推荐文章于 2024-11-14 19:50:17 发布

阅读量759

点赞数 26

分类专栏：程序员文章标签： flutter java 算法

本文链接：https://blog.csdn.net/2301_77595001/article/details/137853375

版权

程序员专栏收录该内容

490 篇文章 0 订阅

订阅专栏

文章详细介绍了Flutter中的自定义编辑框组件BindCardTextFiled，涉及其构造函数参数、输入类型判断、文本格式化以及文本框状态管理，重点展示了如何根据用户输入触发回调和状态更新。

摘要由CSDN通过智能技术生成

emailAddress,

url,

password

}

class BindCardTextFiled extends StatefulWidget {

final ITextInputType keyboardType;

final int maxLines;

final int maxLength;

final String hintText;

final TextStyle hintStyle;

final ITextFieldCallBack fieldCallBack;

final Icon deleteIcon;

final InputBorder inputBorder;

final Widget prefixIcon;

final TextStyle textStyle;

final FormFieldValidator validator;

final TextAlign textAlignP;

final String inputText;

BindCardTextFiled({

Key key,

ITextInputType keyboardType: ITextInputType.text,

this.maxLines = 1,

this.maxLength,

this.hintText,

this.hintStyle,

this.fieldCallBack,

this.deleteIcon,

this.inputBorder,

this.textStyle,

this.prefixIcon,

this.validator,

this.textAlignP,

this.inputText,

}) : assert(maxLines == null || maxLines > 0),

assert(maxLength == null || maxLength > 0),

keyboardType = maxLines == 1 ? keyboardType : ITextInputType.multiline,

super(key: key);

@override

State createState() {

return _ITextFieldState();

}

class _ITextFieldState extends State {

String _inputText = “”;

bool _deleteIcon = false;

bool _isNumber = false;

bool _isPassword = false;

///输入类型

TextInputType _getTextInputType() {

switch (widget.keyboardType) {

case ITextInputType.text:

return TextInputType.text;

case ITextInputType.multiline:

return TextInputType.multiline;

case ITextInputType.number:

_isNumber = true;

return TextInputType.number;

case ITextInputType.phone:

_isNumber = true;

return TextInputType.phone;

case ITextInputType.datetime:

return TextInputType.datetime;

case ITextInputType.emailAddress:

return TextInputType.emailAddress;

case ITextInputType.url:

return TextInputType.url;

case ITextInputType.password:

_isPassword = true;

return TextInputType.text;

}

return TextInputType.text;

}

///输入范围

List _getTextInputFormatter() {

return _isNumber

? [

WhitelistingTextInputFormatter.digitsOnly,

]

null;

}

@override

Widget build(BuildContext context) {

if(widget.inputText==null){

_inputText=“”;

}

TextEditingController _controller = new TextEditingController.fromValue(

TextEditingValue(

text: _inputText,

selection: new TextSelection.fromPosition(TextPosition(

affinity: TextAffinity.downstream,

offset: _inputText.length))));

TextField textField = new TextField(

controller: _controller,

decoration: InputDecoration(

hintStyle: widget.hintStyle,

counterStyle: TextStyle(color: Colors.white),

hintText: widget.hintText,

border: widget.inputBorder != null

? widget.inputBorder

UnderlineInputBorder(),

fillColor: Colors.transparent,

filled: true,

prefixIcon: widget.prefixIcon,

suffixIcon: _deleteIcon

? new Container(

width: 20.0,

height: 20.0,

child: new IconButton(

alignment: Alignment.center,

padding: const EdgeInsets.all(0.0),

iconSize: 18.0,

icon: widget.deleteIcon != null

? widget.deleteIcon

Icon(Icons.cancel),

onPressed: () {

setState(() {

_inputText = “”;

_deleteIcon = (_inputText.isNotEmpty);

widget.fieldCallBack(_inputText);

});

)

new Text(“”),

onChanged: (str) {

setState(() {

_inputText = str;

_deleteIcon = (_inputText.isNotEmpty);

widget.fieldCallBack(_inputText);

});

keyboardType: _getTextInputType(),

maxLength: widget.maxLength,

maxLines: widget.maxLines,

inputFormatters: _getTextInputFormatter(),

style: widget.textStyle,

obscureText: _isPassword,

textAlign: widget.textAlignP,

);

return textField;

}

首先：首先要对自定义编辑框进行粗略的介绍：

1、自定义编辑框是继承自StatefulWidget，与StatelessWidget的区别在于，参考https://flutterchina.club/widgets-intro/。

Flutter中文官网的原话是：

在编写应用程序时，通常会创建新的widget，这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget，具体的选择取决于您的widget是否需要管理一些状态。widget的主要工作是实现一个build函数，用以构建自身。一个widget通常由一些较低级别widget组成。Flutter框架将依次构建这些widget，直到构建到最底层的子widget时，这些最低层的widget通常为RenderObject，它会计算并描述widget的几何形状。

例如：基础的基础 Widget（Text 、Row、Column、Stack、Container等）在build中实现继承自StatelessWidget。

例如：使用 Material 组件，在build中构建布局，build函数的类可以继承自StatelessWidget

例如：处理手势操作，在build中构建手势操作布局，build函数的类可以继承自StatelessWidget

今天我遇到的问题就是与根据用户输入改变widget有关。

2、每次手动触发，一旦调用就会触发函数build，随便完成了情况文本的操作：

setState(() {

进行文本数据改变操作

});

3、自定义编辑框BindCardTextFiled代码块：

inputText 用来清空文本

fieldCallBack 用来回传文本框变化后最终的值

final ITextFieldCallBack fieldCallBack;