Flutter Bloc 不会更改 TextFormField 初始值

2023-11-25

我正在使用 Bloc 库,并在产生新状态后注意到我的TextFormField初始值不变。

我的应用程序比这更复杂,但我做了一个最小的例子。还跟踪推送事件后状态的变化。

Bloc 应该正确地重建整个小部件。我错过了什么吗?

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'dart:developer' as developer;

void main() {
  runApp(MyApp());
}

enum Event { first }

class ExampleBloc extends Bloc<Event, int> {
  ExampleBloc() : super(0);
  @override
  Stream<int> mapEventToState(Event event) async* {
    yield state + 1;
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => ExampleBloc(),
        child: Builder(
          builder: (contex) => SafeArea(
            child: BlocConsumer<ExampleBloc, int>(
                listener: (context, state) {},
                builder: (context, int state) {
                  developer.log(state.toString());
                  return Scaffold(
                    body: Form(
                      child: Column(
                        children: [
                          TextFormField(
                            autocorrect: false,
                            initialValue: state.toString(),
                          ),
                          RaisedButton(
                            child: Text('Press'),
                            onPressed: () {
                              context.bloc<ExampleBloc>().add(Event.first);
                            },
                          )
                        ],
                      ),
                    ),
                  );
                }),
          ),
        ),
      ),
    );
  }
}

pubspec.yaml

name: form
description: A new Flutter project.
version: 1.0.0+1
environment:
  sdk: ">=2.7.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  bloc: ^6.0.0
  flutter_bloc: ^6.0.0

Edit
正如 @chunhunghan 指出的,添加 UniqueKey 可以解决这个问题。我还应该提到我的情况。该应用程序从onChanged两种方法TextFormField。这会导致表单重置并删除键盘。自动对焦不起作用,因为有两个TextFormField发出事件。


您可以复制粘贴运行下面的完整代码 1 和 2
您可以提供UniqueKey() to Scaffold or TextFormField强制重新创建
您可以参考https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d详细信息

如果 Element 的 key 与相应 Widget 的 key 不匹配。这会导致 Flutter 停用这些元素并删除对元素树中元素的引用

解决方案一:

return Scaffold(
        key: UniqueKey(),
        body: Form(

解决方案2:

TextFormField(
               key: UniqueKey(),

工作演示

enter image description here

完整代码1Scaffold with UniqueKey

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'dart:developer' as developer;

void main() {
  runApp(MyApp());
}

enum Event { first }

class ExampleBloc extends Bloc<Event, int> {
  ExampleBloc() : super(0);
  @override
  Stream<int> mapEventToState(Event event) async* {
    yield state + 1;
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("build");
    return MaterialApp(
      home: BlocProvider(
        create: (_) => ExampleBloc(),
        child: Builder(
          builder: (contex) => SafeArea(
            child: BlocConsumer<ExampleBloc, int>(
                listener: (context, state) {},
                builder: (context, int state) {
                  print("state ${state.toString()}");
                  developer.log(state.toString());
                  return Scaffold(
                    key: UniqueKey(),
                    body: Form(
                      child: Column(
                        children: [
                          TextFormField(
                            autocorrect: false,
                            initialValue: state.toString(),
                          ),
                          RaisedButton(
                            child: Text('Press'),
                            onPressed: () {
                              context.bloc<ExampleBloc>().add(Event.first);
                            },
                          )
                        ],
                      ),
                    ),
                  );
                }),
          ),
        ),
      ),
    );
  }
}

完整代码2TextFormField with UniqueKey

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'dart:developer' as developer;

void main() {
  runApp(MyApp());
}

enum Event { first }

class ExampleBloc extends Bloc<Event, int> {
  ExampleBloc() : super(0);
  @override
  Stream<int> mapEventToState(Event event) async* {
    yield state + 1;
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("build");
    return MaterialApp(
      home: BlocProvider(
        create: (_) => ExampleBloc(),
        child: Builder(
          builder: (contex) => SafeArea(
            child: BlocConsumer<ExampleBloc, int>(
                listener: (context, state) {},
                builder: (context, int state) {
                  print("state ${state.toString()}");
                  developer.log(state.toString());
                  return Scaffold(
                    body: Form(
                      child: Column(
                        children: [
                          TextFormField(
                            key: UniqueKey(),
                            autocorrect: false,
                            initialValue: state.toString(),
                          ),
                          RaisedButton(
                            child: Text('Press'),
                            onPressed: () {
                              context.bloc<ExampleBloc>().add(Event.first);
                            },
                          )
                        ],
                      ),
                    ),
                  );
                }),
          ),
        ),
      ),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter Bloc 不会更改 TextFormField 初始值 的相关文章

  • Flutter:防止抽屉关闭

    Flutter 中是否可以防止关闭抽屉 我在用endDrawer作为网络应用程序中的表单 我已禁用滑动打开功能 并且我还希望只允许通过按钮关闭它 这样用户就不会通过单击外部意外地关闭它 但是我看不到任何布尔值 例如防止解雇或任何实施方式Wi
  • getApplicationDocumentsDirectory 在 flutter 桌面(Windows)上不起作用

    如何在 Windows 上的 flutter 桌面上保存和打开文件 getApplicationDocumentsDirectory 不适用于 Windows 应用程序的 flutter 桌面 Future
  • Flutter 扩展方法不起作用,它显示“未定义的类”和“需要扩展方法语言功能”

    我正在慢慢建立我的个人网站dlblack dev http dlblack dev 我正在尝试让它变得更有趣一点 例如 在计算机 而不是平板电脑或手机 因为它们没有鼠标指针 上 如果您将鼠标悬停在任何可单击项目上 它不会更改您的鼠标指针以指
  • Flutter Image Cropper Android 清单错误 - “com.yalantis.ucrop.UCropActivity,在项目或库中找不到”

    当我向 Android 清单文件添加活动时 出现错误 在项目或库中未找到清单 com yalantis ucrop UCropActivity 中引用的类 这是导致错误的代码
  • 连接 Flask Socket.IO Server 和 Flutter

    基本上 我有一个套接字 io 烧瓶代码 import cv2 import numpy as np from flask import Flask render template from flask socketio import Soc
  • 如何在 Flutter 创建的应用程序中隐藏 AppBar [重复]

    这个问题在这里已经有答案了 我有下面的代码 我想隐藏栏应用程序 可以吗 我已经尝试直接使用 Android 主题 但没有成功 override Widget build BuildContext context return Webview
  • Flutter NestedScrollView 标题与 TabBar 和 TabbarView 一起弹跳

    当我想向上拖动时 可以将标题拉到刷新 标签栏粘滞 ListView可以滑动到另一个页面 100 自定义小部件 它支持更改标题值并且支持滑动操作 它实际上不是一个 TabBar Widget 但它的工作原理与此完全相同 import pack
  • Flutter mysql1 数据包乱序

    我在建立 VPS 与图书馆的连接时遇到一些问题mysql1上颤动 我收到这个错误Unhandled Exception Error 1156 08S01 Got packets out of order当我执行查询时 MySQL服务器版本
  • 在 Flutter 中逐个更改多个按钮的颜色

    单击 Go 按钮后 我希望按钮 1 变为红色 然后转回白色 然后按钮 2 应变为红色 然后恢复为白色 然后是3 4等等 我可以设计我的回调按钮 使按钮 1 变成红色 我不确定如何在 2 秒后将其变回白色 然后将下一个按钮变为红色等等 主程序
  • 导航到新屏幕时状态栏颜色

    我在我的中使用以下build 第一个屏幕更改状态栏颜色的方法 效果很好 1st screen s build method SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle
  • Firebase云函数在Flutter中返回null,因为它仍在运行

    更新 我从我的 firebase 控制台得到这个 函数执行花费了 2906 毫秒 完成状态代码 200 15 秒后 我得到 console log DOC 确实存在 我正在运行这个云火库功能 它 有效 但我不断得到这样的回报 FLUTTER
  • 如何使用 SingleChildScrollView 使 Stacklayout 可滚动?

    我正在尝试使用 SingleChildScrollView 使堆栈布局可滚动 但它不滚动 这里应该使用SingleChildScrollView吗 我想我已经给出了足够的描述 可以让任何人理解我的问题 这里有更多文本以满足 StackOve
  • 颤振文本小部件仅显示最后一个条目

    我正在尝试在 flutter 中创建日历 目前我正在实施这些活动 为了测试这一点 我创建了一个方法来检查当前日期 即创建行的时间 是否有事件 如果是这种情况 则会在表示内容的容器中打印 x 整个事情只是第一次测试 看它是否在原则上有效 当我
  • 如何在 web 和 android 的 flutter 中使用 cloud_firestore ?

    我有一个 Flutter 应用程序 可以按预期在 Android 上运行 但如果我想将其编译为 Web 版 则会出现错误 它必须与依赖项 cloud firestore 做一些事情 如果我使用依赖项 firebase 它在网络上运行良好 但
  • 如何在 Flutter 移动端、网页端和窗口端添加条件导入?

    我有 flutter 应用程序 它为每个平台 移动 网络 窗口 使用不同的 webview 插件 虽然我有能力import平台基于web and mobile 我无法导入 Windows 版本 如果不是移动或网络 我尝试添加其他条件 但它需
  • flutter 中 Future.delayed 与 Timer 有什么区别

    我想知道延迟代码执行的 Future delayed 和 Timer 方法之间的区别 两者似乎都做同样的事情 未来 延迟 Future delayed const Duration milliseconds 500 code VS Time
  • MappedListIterable 不是子类型

    我是 flutter 和 dart 的新手 并尝试从 firestore 作为流获取数据并将其提供给我的 ListView 但我不断收到此错误 type MappedListIterable
  • 颤振动态形式无法正常工作

    在我的应用程序中 我想创建一组动态表单 用户可以在其中添加更多项目 在这种动态形式中 它由两个文本字段 1 电话字段 2 电子邮件字段和一个下拉字段组成 但我尝试的任何事情都无法正常工作 我已经要求修复我的代码 但没有得到答复 堆栈溢出问题
  • 带有 Firebase 通知的 Flutter Web - subscribeToTopic

    我想在我的 flutter web 应用程序中接收 firebase 通知 我知道 firebase messaging 包不可用于网络 但我已经管理配置我的应用程序以获取令牌 在网络应用程序位于后台时接收并显示消息 并在应用程序位于前台时
  • 带操作按钮的颤动本地通知

    我在我的 flutter 项目中尝试了 flutter 本地通知插件 它在简单通知上工作正常 但我需要带有操作按钮的通知功能 请帮助我或建议我实现此功能 不幸的是 flutter local notifications 插件尚不支持操作按钮

随机推荐

  • Delphi XE中占用大量内存的TStringList对象

    我正在开发一个模拟程序 该程序首先要做的事情之一是读取一个大文件 28 MB 大约 79 000 行 解析每一行 大约 150 个字段 为该对象创建一个类 并将其添加到 TStringList 它还读取另一个文件 该文件在运行期间添加更多对
  • Volley 库请求队列的最大大小是多少

    我在用VolleyAndroid 中的库 我想知道允许使用的队列的最大大小是多少Volley图书馆 我没有发现与此相关的任何内容 据我所知 您需要将网络请求添加到队列中 但我不知道可以将其并行队列的最大大小是多少 RequestQueue
  • MySQL 索引减慢查询速度

    MySQL Server version 5 0 95 Tables All InnoDB 我遇到 MySQL 数据库查询问题 基本上我发现如果我索引一个特定的 varchar 50 字段tag name 我的查询比不索引字段花费的时间更长
  • 如何限制python上的用户输入长度?

    amt float input Please enter the amount to make change for 我希望用户输入美元金额 因此允许 5 个字符 00 00 有没有办法限制它 以便不允许他们输入超过 5 个字符 我不想要这
  • 从 Java 字符串末尾删除行尾字符

    我有一个字符串 我想仅使用 Java 从字符串的最末尾删除行尾字符 foo r nbar r nhello r nworld r n 我想成为 foo r nbar r nhello r nworld 这个问题与问题类似 但不一样59367
  • 错误 C2797:成员初始值设定项列表内的列表初始化

    我当时正在看MVA 的 C 教程我下面提到的代码是由凯特而不是我编写的 然而 她似乎在编译时没有显示任何错误 但在我的例子中 我收到以下错误 错误 1 错误 C2797 NamedRectangle name 列表初始化 内部成员初始值设定
  • AttributeError:使用自定义生成器在 Keras 模型上调用 fit 时,“tuple”对象没有属性“rank”

    我想构建一个具有两个输入的神经网络 用于图像数据和数字数据 所以我为此编写了自定义数据生成器 这train and validation数据框包含 11 列 image name 图像的路径 9个数字特征 target 项目的类 最后一列
  • 如何在Golang中使用COM(组件对象模型)

    我有一个 Windows DLL XA Session dll 文件 但我不知道如何在 golang 中使用它 这是DLL Viewer图片 我想使用ConnectServerCOM 方法 这是我的代码 package main impor
  • 使用对象解构赋值时,为什么属性“name”会转换为字符串? [复制]

    这个问题在这里已经有答案了 Given let obj name 1 console log typeof obj name obj name number 1 Why is name使用时将标识符强制转换为字符串var在对象解构赋值时 l
  • 如何检查文件是否正在被其他应用程序使用?

    我需要处理一个视频文件 并且需要在打开该文件之前完成该文件 因此 我需要在处理文件之前检查文件是否已打开 但已被另一个进程打开 知道如何检查吗 我正在使用Linux 如果没有任何额外的宝石 一个稍微浪费的方法可能是 if x lsof F
  • 使用 DateTime.TryParse() 检查多种日期格式

    我正在使用一种方法来验证文本框 public bool ValidateDateTimeTextBoxes params TextBox textBoxes DateTime value DateTime Today string date
  • 如果该行中的第一列为 null,实体框架将返回 null

    我在实体框架模型中看到了奇怪的行为 我有一个如下所示的查询 var rows from alarm in context Alarms join temp in context ListDetails on alarm ListDetail
  • 如何使用 Azure 函数 Node.js 读取 Json 文件

    我创建了一个Azure时间触发器函数 我想和他一起读取一个Json文件 我确实安装了 read json 和 jsonfile 软件包并尝试了两者 但它不起作用 这是一个示例函数 module exports function contex
  • 如何在 Chef 中扩展轻量级提供程序

    我正在创建一堆不同的 Chef 提供程序来部署不同类型的应用程序 厨师的文档扩展轻量级提供程序表明这是可能的 但实际上并没有说明要做什么 该页面表明也许可以调用mixin是需要的 但我不知道我的代码在下面的文件中应该有什么结构 librar
  • Testcafe - 在测试用例之外测试命令行参数

    随着我逐渐熟悉 Testcafe 我尝试使用命令行参数为用户提供有关如何运行测试的更多信息 因此 我正在使用minimist包裹 但是 我无法打印或使用测试用例之外的任何变量 请在下面找到我的代码 import Selector from
  • 如何设置DOCKER_HOST?

    我正在从这个链接做 django shop 教程 https django shop readthedocs io en latest tutorial quickstart html 我对 docker docker compose 和
  • 设置多边形颜色 Matplotlib

    我有 10 000 多个 Matplotlib Polygon 对象的列表 每个多边形属于 20 个组中的一组 我想通过将每个唯一的组映射到唯一的颜色来区分多边形属于哪个组 以下是我发现的一些与我的问题类似的帖子 在 python matp
  • 如何在pyqt中播放视频

    我想根据此功能中选择的文件来播放视频文件 def abrir QFileDialog getOpenFileName None Selecciona los medios os getcwd Video Files avi mp4 flv
  • Python GTK 拖放 - 获取 URL

    我正在创建一个小应用程序 必须能够接收 URL 如果应用程序窗口打开 我应该能够从浏览器中拖动链接并将其放入应用程序中 并且应用程序会将 URL 保存到数据库中 我正在 Python GTk 中创建它 但我对其中的拖放功能有点困惑 那么 怎
  • Flutter Bloc 不会更改 TextFormField 初始值

    我正在使用 Bloc 库 并在产生新状态后注意到我的TextFormField初始值不变 我的应用程序比这更复杂 但我做了一个最小的例子 还跟踪推送事件后状态的变化 Bloc 应该正确地重建整个小部件 我错过了什么吗 import pack