如何发现 TextField 编辑被取消/键盘折叠/焦点丢失

Posted 2023-03-17

【中文标题】如何发现 TextField 编辑被取消/键盘折叠/焦点丢失

【英文标题】：How to discover TextField editing being cancelled / keyboard collaped / focus lost

【发布时间】：2022-01-02 04:52:32

【问题描述】：

下面的代码显示了 2 个文本字段。这是一个剥离的例子，只需忽略诸如 TextEditingController 之类的东西没有被处理。

如果用户编辑其中一个文本字段，并在键盘上按“完成”，则会将新值发送到肘位（已保存），一切都很好。

但是，当用户在编辑过程中单击另一个 TextField 或折叠键盘时，他的状态会非常不一致。 TextField - 他正在编辑的那个 - 显示了没有保存的值，而且他没有意识到这一点。

那么我该如何保存该值，或将其恢复为原始值，或者当用户只是没有确认更改并停止编辑时执行任何操作？

我尝试弄乱文本控制器、表单、TextField 和 TextFormField - 不走运。我不想要 Save 按钮，而且似乎 onSubmitted 出于某种原因在那里，但我想念 onCancelled 或某事。

更新：我更改了代码以引入两个字段之间的一些交互，这更符合我的真实场景。还添加了我得到的视频。

testpage.dart:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'some_cubit.dart';

class TestPage extends StatefulWidget 
  const TestPage(Key? key) : super(key: key);

  @override
  _TestPageState createState() => _TestPageState();


class _TestPageState extends State<TestPage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: const Text('Test')),
      body: BlocProvider(
        create: (context) => SomeCubit(),
        child: BlocBuilder<SomeCubit, SomeState>(
          builder: (context, state) 
            return Column(
              children: [
                Flexible(
                  child: TextField(
                    controller:
                        TextEditingController(text: state.min.toString()),
                    keyboardType: TextInputType.number,
                    onSubmitted: (s) 
                      BlocProvider.of<SomeCubit>(context).updateMin(s);
                    ,
                  ),
                ),
                Flexible(
                  child: TextField(
                    controller:
                        TextEditingController(text: state.max.toString()),
                    keyboardType: TextInputType.number,
                    onSubmitted: (s) 
                      BlocProvider.of<SomeCubit>(context).updateMax(s);
                    ,
                  ),
                ),
              ],
            );
          ,
        ),
      ),
    );
  

some_cubit.dart

import 'dart:math';

import 'package:bloc/bloc.dart';

class SomeCubit extends Cubit<SomeState> 
  SomeCubit() : super(SomeState(0, 10));

  void updateMin(String str) 
    final num = int.tryParse(str) ?? 0;
    emit(SomeState(num, max(num, state.max)));
  

  void updateMax(String str) 
    final num = int.tryParse(str) ?? 0;
    emit(SomeState(min(num, state.min), num));
  


class SomeState 
  final int min;
  final int max;

  SomeState(this.min, this.max);

这就是我得到的。一旦我停止点击键盘上的“完成”，而是直接在文本框之间切换，一切都处于不一致的状态。

【问题讨论】：

要知道如何在 TextFormField ***.com/questions/70024603/… 中使用焦点，只需查看答案

【参考方案1】：

textField 具有onChanged 函数，每次用户添加字符时都会触发该函数

【讨论】：

是的，但它有什么帮助呢？

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。