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

思路：

1、通过路由跳转实现page之间导航

2、关闭page传递返回值，通过setState()来触发编辑框文本值清空

3、在State  函数 Widget build(BuildContext context) 执行编辑框清空

import ‘package:flutter/material.dart’;

import ‘package:flutter/services.dart’;

///自带删除的ITextField

typedef void ITextFieldCallBack(String content);

enum ITextInputType {

text,

multiline,

number,

phone,

datetime,

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;

final String inputText;

BindCardTextFiled({

…

this.inputText,

总结

找工作是个很辛苦的事情，而且一般周期都比较长，有时候既看个人技术，也看运气。第一次找工作，最后的结果虽然不尽如人意，不过收获远比offer大。接下来就是针对自己的不足，好好努力了。

最后为了节约大家的时间，我把我学习所用的资料和面试遇到的问题和答案都整理成了PDF文档

喜欢文章的话请关注、点赞、转发 谢谢！

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
ldCallBack;

final String inputText;

BindCardTextFiled({

…

this.inputText,

总结

找工作是个很辛苦的事情，而且一般周期都比较长，有时候既看个人技术，也看运气。第一次找工作，最后的结果虽然不尽如人意，不过收获远比offer大。接下来就是针对自己的不足，好好努力了。

最后为了节约大家的时间，我把我学习所用的资料和面试遇到的问题和答案都整理成了PDF文档

喜欢文章的话请关注、点赞、转发 谢谢！

[外链图片转存中…(img-di2ScdMq-1714702415201)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！