Flutter ListView中的TextField上下滑动内容丢失

Posted 一叶飘舟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter ListView中的TextField上下滑动内容丢失相关的知识,希望对你有一定的参考价值。

场景:屏幕里有一个三个TextField,放在ListView里,如下图

 当输入内容后将ListVIew上滚动,三个TextField滚动滑出界面后,再把ListView滚动回顶部,只有焦点所在的TextField里的内容不会被清除,其他两个TextField的内容不见了,如下所示

原因及解决方案

造成此问题的原因,经过log验证,应该是TextField作为一个Widget,被滑出屏幕,又滑回来,没有焦点的Widget的initState和build方法会被重新执行,也就是Widget会被重建,重建时原有的状态不会自动恢复,里面的文字自然就消失了。

解决方法是把TextField封装成一个StatefulWidget,然后用AutomaticKeepAliveClientMixin来保证TextField不会被回收。

核心代码如下

class _TextFieldWidgetState extends State<TextFieldWidget> with AutomaticKeepAliveClientMixin  //关键代码:AutomaticKeepAliveClientMixin保存状态
  Function callback;
  String title;
 
  @override
  bool get wantKeepAlive => true; //关键代码:重写get wantKeepAlive并设置为true
 
  @override
  void initState() 
    // TODO: implement initState
    super.initState();
  
 
  @override
  Widget build(BuildContext context)  
 
    return TextField(
      inputFormatters: [PrecisionLimitFormatter(2)],
      keyboardType: TextInputType.numberWithOptions(),
      decoration: InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 10.0,horizontal: 10.0),
        labelText: widget.title, // 文字提示
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        filled: true, // 是否填充背景
        fillColor: Colors.white, // 填充颜色
      ),
      style: TextStyle(fontSize: ScreenUtil().setSp(TextStyleManager.TextEditSize),color: TextStyleManager.NumColor),//输入文本的样式
      onChanged: (value)
        widget.callback(value);
      , // 当点击确定时调用的函数2
    );
  

TextField关闭软键盘时会清除掉输入的内容


如上图所示,在TextField中输入内容后,关闭软键盘时都会清空掉输入框里的内容

代码如下

  @override
  Widget build(BuildContext context) 
    print('ChangePasswordForm  Widget build(BuildContext context)');
    TextEditingController controller = TextEditingController();
    return BlocListener<ChangePasswordBloc, ChangePasswordState>(
        listener: stateListener,
        child: Scaffold(
          backgroundColor: ThemeColors.normalBackground,
          body: SingleChildScrollView(
            child: Column(
              children: [
                ......
                Row(
                  children: [
                    Expanded(
                      child: TextField(
                          key: const Key('aaaaaaaaaaaa'),
                          controller: controller,
                          maxLines: 1,
                          cursorColor: ThemeColors.primaryValue,
                          style: AppTextStyle.mainText(),
                          decoration: InputDecoration(
                            hintStyle: AppTextStyle.promptText(),
                            contentPadding: EdgeInsets.only(left: 10,right: 10),
                            hintText: '请输入..',
                            border: InputBorder.none,
                          )),
                    ),
                    GestureDetector(
                      child: Text(
                        '搜索',
                        style: TextStyle(color: ThemeColors.primaryValue),
                      ),
                      onTap: () 
                        FocusScope.of(context).requestFocus(FocusNode());
                        print('搜索内容:$controller?.text');
                      ,
                    )
                  ],
                ),
              ],
            ),
          ),
        ));
  

我需要在点击搜索时,获取的输入的内容去搜索,所以就在TextField中传入了controller

后来观察打印的日志,发现每次弹出、收起软键盘时。build()方法都会调用,每次build的时候,controller都是个新的对象。之前输入的内容,新的controller不会持有。所以把TextEditingController的初始化放到了initState()方法里,如下所示

TextEditingController _controller;
@override
void initState() 
  print('ChangePasswordForm  initState()');
  _controller = TextEditingController();

然后TextField的controller参数传入这个_controller
运行后收起软键盘,之前输入的内容就不会被清空了

 

以上是关于Flutter ListView中的TextField上下滑动内容丢失的主要内容,如果未能解决你的问题,请参考以下文章

Flutter 中的 ListView 居中

Flutter:ListView.builder 中的自动垂直高度

如何使用 Flutter 从 Firestore 中的 ListView 获得无限滚动

在 Flutter 中的 ListView 中搜索(使用 Firebase 中的数据)

ListView 中的点指示器 Flutter 中的水平滚动

Flutter 如何遍历 ListView 中的每个项目?