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

最新推荐文章于 2023-01-30 09:49:28 发布

️ 邪神

最新推荐文章于 2023-01-30 09:49:28 发布

阅读量2.4k

点赞数 55

本文链接：https://blog.csdn.net/u013491829/article/details/105211428

版权

只有把抱怨环境的心情，化为上进的力量，才是成功的保证。——罗曼·罗兰

最近在项目中遇到了一个问题，若用原生进行开发拿肯定很容易了，若用Flutter开发似乎尝试了很多次都徒劳无功。小小问题就会让你在程序的人生中产生了短暂的怀疑。半夜不能因为你有睡意就会去睡觉，心中始终有个bug在梦里跳动，向你发出呐喊声：快来帮我解救我吧；这似乎只是我的想象罢了。

具体什么问题呢？？？？

思路：

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

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

3、在State<T extends StatefulWidget> 函数 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<String> 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<StatefulWidget> createState() {
    return _ITextFieldState();
  }
}

class _ITextFieldState extends State<BindCardTextFiled> {
  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<TextInputFormatter> _getTextInputFormatter() {
    return _isNumber
        ? <TextInputFormatter>[
            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,
    this.fieldCallBack,
    ................................
  })  : assert(maxLines == null || maxLines > 0),
        assert(maxLength == null || maxLength > 0),
        keyboardType = maxLines == 1 ? keyboardType : ITextInputType.multiline,
        super(key: key);

每次触发setState函数后，去清空编辑框的值

 @override
  Widget build(BuildContext context) {
    ..................................

    if(widget.inputText==null){
      _inputText="";
    }

    ..................................
}

编辑的值进行手动清空或者输入后回传去改变变量

大概的意思就是：手动触发输入文本去改变值然后回传到固定的变量值中，自动触发删除编辑框的值时将固定值清空然后完成编辑框值的清空。

然后执行路由跳转：

注意事项：完成路由跳转，我们需要在入口函数中定义路由。

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '标题',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainTabBarWidget(),
routes: <String, WidgetBuilder>{
'自定义路由名称': (BuildContext context) => 要导航的page对象,

'/page': (BuildContext context) => new page(),
},
);
}
}

执行跳转：

执行跳转：
 static navigatorToRoutePage(
      BuildContext _buildContext, StatefulWidget _baseWidget, _routeName) async{
   return await Navigator.push(
      _buildContext,
      MaterialPageRoute(
        settings: RouteSettings(name: _routeName),
        builder: (context) => _baseWidget,
      ),
    );
  }

跳转的另一个页面触发关闭，根据回传参数进行文本编辑框清空的操作：

await NavUtils.navigatorToRoutePage(context, SelectAmountDateEvaPage(),"/SelectAmountDateEvaPage")
              .then((value) {
            if (value != null && "回传参数固定值" == value) {
              setState(() {
                文本固定变量值的操作（赋值或者清空）
              });
            }
          });

最后：

总结：使用了StatefulWidget有状态的特性进行操作编辑框的值；路由跳转可以进行回传值并通过调用setState(){}把界面重新绘制，完成了文本编辑的清空。

参考：

FlutterWidget框架介绍：https://flutterchina.club/widgets-intro/

setState：https://api.flutter.dev/flutter/widgets/State/setState.html、https://www.jianshu.com/p/f1df3f9177fa

Flutter的setState更新原理和流程：https://zhuanlan.zhihu.com/p/101054053?from_voters_page=true

路由管理：https://book.flutterchina.club/chapter2/flutter_router.html

️ 邪神

关注

55
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
22
评论
Flutter 实现返回上一页清空编辑框文本

只有把抱怨环境的心情，化为上进的力量，才是成功的保证。——罗曼·罗兰最近在项目中遇到了一个问题，若用原生进行开发拿肯定很容易了，若用Flutter开发似乎尝试了很多次都徒劳无功。小小问题就会让你在程序的人生中产生了短暂的怀疑。半夜不能因为你有睡意就会去睡觉，心中始终有个bug在梦里跳动，向你发出呐喊声：快来帮我解救我吧；这似乎只是我的想象罢了。具体什么问题呢？？？？ ...
复制链接

扫一扫