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

最新推荐文章于 2024-08-07 15:33:27 发布

2401_84132544

最新推荐文章于 2024-08-07 15:33:27 发布

阅读量710

点赞数 26

分类专栏：程序员文章标签： flutter javascript 开发语言

本文链接：https://blog.csdn.net/2401_84132544/article/details/138444750

版权

程序员专栏收录该内容

445 篇文章 0 订阅

订阅专栏

思路：

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({

…

最后说一下我的学习路线

其实很简单就下面这张图，含概了Android所有需要学的知识点，一共8大板块：

架构师筑基必备技能
Android框架体系架构（高级UI+FrameWork源码）
360°Androidapp全方位性能调优
设计思想解读开源框架
NDK模块开发
移动架构师专题项目实战环节
移动架构师不可不学习微信小程序
混合开发的flutter

Android学习的资料

我呢，把上面八大板块的分支都系统的做了一份学习系统的资料和视频，大概就下面这些，我就不全部写出来了，不然太长了影响大家的阅读。

330页PDF Android学习核心笔记（内含上面8大板块）

Android学习的系统对应视频

总结

我希望通过我自己的学习方法来帮助大家去提升技术：

1、多看书、看源码和做项目，平时多种总结
2、不能停留在一些基本api的使用上，应该往更深层次的方向去研究，比如activity、view的内部运行机制，比如Android内存优化，比如aidl，比如JNI等，并不仅仅停留在会用，而要通过阅读源码，理解其实现原理
3、同时对架构是有一定要求的，架构是抽象的，但是设计模式是具体的，所以一定要加强下设计模式的学习
4、android的方向也很多，高级UI，移动架构师，数据结构与算法和音视频FFMpeg解码，如果你对其中一项比较感兴趣，就大胆的进阶吧！

希望大家多多点赞，转发，评论加关注，你们的支持就是我继续下去的动力！加油！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
Android学习的系统对应视频**

总结

我希望通过我自己的学习方法来帮助大家去提升技术：

1、多看书、看源码和做项目，平时多种总结
2、不能停留在一些基本api的使用上，应该往更深层次的方向去研究，比如activity、view的内部运行机制，比如Android内存优化，比如aidl，比如JNI等，并不仅仅停留在会用，而要通过阅读源码，理解其实现原理
3、同时对架构是有一定要求的，架构是抽象的，但是设计模式是具体的，所以一定要加强下设计模式的学习
4、android的方向也很多，高级UI，移动架构师，数据结构与算法和音视频FFMpeg解码，如果你对其中一项比较感兴趣，就大胆的进阶吧！