首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

单击按钮时Flutter searchable_dropdown Ui不更新,并且在按钮的onPressed()内调用setState()

在Flutter中,searchable_dropdown 是一个常用的第三方库,用于实现可搜索的下拉选择框。如果你遇到单击按钮时 searchable_dropdown UI 不更新的问题,并且在按钮的 onPressed() 内调用了 setState(),可能是由于以下几个原因导致的:

基础概念

  1. StatefulWidget: Flutter 中用于管理可变状态的组件。
  2. setState(): 用于通知框架某个 widget 的状态已经改变,需要重新构建 UI。

可能的原因及解决方法

1. StatefulWidget 生命周期问题

确保你的 searchable_dropdown 是在一个 StatefulWidget 中,并且 setState() 被正确调用。

代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String selectedValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SearchableDropdown<String>(
          items: [
            DropdownMenuItem(value: '1', child: Text('Option 1')),
            DropdownMenuItem(value: '2', child: Text('Option 2')),
          ],
          onChanged: (value) {
            setState(() {
              selectedValue = value;
            });
          },
        ),
        ElevatedButton(
          onPressed: () {
            // 模拟选择某个值
            setState(() {
              selectedValue = '1';
            });
          },
          child: Text('Select Option 1'),
        ),
      ],
    );
  }
}

2. DropdownMenuItem 的 key 问题

有时候,Flutter 可能会因为 DropdownMenuItem 的 key 重复而导致 UI 不更新。确保每个 DropdownMenuItem 都有一个唯一的 key。

代码语言:txt
复制
SearchableDropdown<String>(
  items: [
    DropdownMenuItem(value: '1', key: ValueKey('1'), child: Text('Option 1')),
    DropdownMenuItem(value: '2', key: ValueKey('2'), child: Text('Option 2')),
  ],
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

3. 异步操作问题

如果你的 onPressed() 方法中有异步操作,确保在异步操作完成后调用 setState()

代码语言:txt
复制
ElevatedButton(
  onPressed: () async {
    // 模拟异步操作
    await Future.delayed(Duration(seconds: 1));
    setState(() {
      selectedValue = '1';
    });
  },
  child: Text('Select Option 1'),
),

4. 库版本问题

确保你使用的 searchable_dropdown 库是最新版本,有时候库的 bug 可能会在新版本中被修复。

代码语言:txt
复制
dependencies:
  searchable_dropdown: ^1.1.3

应用场景

searchable_dropdown 常用于需要用户从多个选项中选择一个的场景,特别是在选项较多且需要快速搜索的情况下。例如:

  • 表单填写
  • 设置页面
  • 数据筛选

总结

通过以上方法,你应该能够解决 searchable_dropdown UI 不更新的问题。如果问题依然存在,建议查看 searchable_dropdown 库的文档或提交 issue 寻求帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在 Flutter 中创建可拖动的浮动操作按钮

本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围的任何位置。 创建可拖动的浮动操作按钮 我们将为这样的小部件创建一个类。...一个浮动的动作按钮通常可以在点击时执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 的参数作为参数。...通常,所需的行为是onPressed仅在点击按钮时调用回调,而不是在拖动结束时调用。然而,当拖动结束时,指针向上事件也会被触发。作为解决方案,我们需要跟踪按钮是否被拖动。...它应该更新到true指针移动时。所以,我们可以检查内部onPointerUpcallback 仅onPressed在值为_isDraggingis 时调用回调false。...下面是用于创建可拖动浮动操作按钮的类。它有一些参数,包括child(要设置为按钮的小部件)、initialOffset(移动前的初始偏移量)和onPressed(单击按钮时调用的回调)。

5.7K10

Flutter 状态管理之GetX库

Flutter 状态管理之GetX 前言 正文 一、创建项目 二、状态组件 三、状态更新UI 四、GetX库 ① 添加依赖 ② 局部刷新 ③ 全局刷新 五、源码 前言   Flutter使用的是声明式UI...有时候快捷键不生效则你可以手动的点击这个闪电按钮,如果也不生效就重新安装,总会生效的,做开发就要有一颗平常心。...StatelessWidget(无状态小部件): 它是一个不可变的小部件,意味着一旦创建就不能再更改它的状态。 它的属性(props)在创建时被设置,并且在整个生命周期中保持不变。...三、状态更新UI   下面我们通过状态来更新UI,比如我们将点击按钮将文本内容改成大写,再点击改成小写,下面我们修改_HomePageState类中的代码,如下所示: class _HomePageState...声明式UI基本上都是这种方式,了解了Flutter基本的状态更新UI,下面我们再来学习一下GetX这个库。

55001
  • Flutter 中 stateless 和 stateful widget 的区别

    出于这个原因,外观和属性在小部件的整个生命周期中保持不变。 当我们描述的 UI 部分不依赖于任何其他小部件时,无状态小部件会很有用。无状态小部件的示例是文本、图标、图标按钮和凸起按钮。...但是如果我们希望它在有动作时更新,我们必须制作一个有状态的小部件。 有状态的小部件 当 UI 的某些部分必须在运行时动态更改时,使用有状态小部件。有状态的小部件可以在应用程序运行时多次重绘自己。...当我们描述的 UI 部分动态变化时,有状态小部件很有用。如果我们创建一个按钮小部件,每次用户单击该按钮时都会更新自身,这就是一个有状态小部件。...一旦我们调用这个小部件并按下按钮,我们就会让文本字段的值自动改变。 在这种类型的应用程序中,我们可以通过实现. 是一种在有状态小部件类中调用的方法。每次调用时,此方法都会更改有状态小部件的值。...setState()``setState() 无状态和有状态的区别 回顾一下我们在上面的例子中所展示的内容,下表描述了无状态和有状态小部件之间的区别: 无状态小部件 有状态的小部件 仅在初始化时更新 动态变化

    2.3K10

    简单了解Flutter

    然后我们可以尝试修改它,比如把这个primarySwatch的颜色换掉:Colors.orange,然后只要我们按下Ctrl+S,修改分分钟在我们的设备上生效,主题颜色立马改变了,这就是Flutter宣传时吹爆的热加载的能力...而且Flutter是一个响应式的框架,我们通过setState方法去更新一些状态,每当setState方法被调用的时候,状态会被标记为dirty,然后Flutter会重新绘制。...也就是说,我们可以通过setState方法去通知界面更新。...在这里我们声明了点击调用_incrementCounter这个方法,这个方法里会通过setState去更新状态并通知系统重绘,那么所有依赖_counter这个变量的view都会重绘。...首先我们在FAB上方添加两个按钮来实现数字的加减,我们知道我们的UI整体在一个叫Column的widget里面,我们的按钮横向排列,当然得放在一个Row里面啦。

    88930

    小荷才露尖尖角,和Flutter应用说你好

    那么,如果类比Vue 对于Vue2 传入props来控制就是受控了 内部的数据有变化都可以理解为受控,并不需要像React去setState或者调用useStata去更新 对于...但是仔细一想,这样代码读起来对新手比较友好了 对新手来说,Flutter的样式控制应该更加容易理解 Flutter在构建页面时,会调用组件的build方法,widget的主要工作是提供一个...() { setState(() { _counter++; }); } 当按钮点击,就调用这个函数,改变状态会使用setState方法,这个和React的类组件汇总改变状态的方式很像...听说Flutter对这个方法做了优化,不需要去修改每个widget,源码还没有了解过 构建UI界面的build方法 当MyHomePage第一次创建时,\_MyHomePageState...+的按钮,它的onPressed属性接受一个回调函数,就是onClick,呵呵 所以逻辑是这样 点击按钮,调用自增函数 setState引起页面变化rebuild达到有状态!!!

    8710

    带你快速掌握Flutter的视图(Widgets)

    在Android中,View是屏幕上显示的所有内容的基础, 按钮、工具栏、输入框等一切都是View。 在 iOS 中,构建 UI 的过程中将大量使用 view 对象。...相比之下,Android/iOS视图被绘制一次,并且在调用invalidate/setNeedsDisplay之前不会重绘。...如果要根据HTTP网络请求或用户交互后收到的数据动态更改UI,则必须使用StatefulWidget并告诉Flutter框架Widget的状态已更新,以便更新该Widget。...可以通过将Text包装在StatefulWidget中并在点击按钮时更新它来实现,如: import 'package:flutter/material.dart'; void main() {...它需要一个 Ticker 当 vsync 发生时来发送信号,并且在每帧运行时创建一个介于 0 和 1 之间的线性插值(interpolation)。

    11K10

    编写你的第一个 StatefulWidget

    前面一篇文章描写了一个打印hello的StatelessWidget的封装,接下来我们应该了解该如何封装一个简单的StatefulWidget,来驱动一次交互,这个交互的过程,会执行一次onPressed...让我们先来定义一个AVUpdateState 和 AVUpdate ,绘制一个垂直居中的图片和按钮,_avImage变量来接收从网络获取的图片,setState这个_avImage 来更新UI。...如果你对 React 很熟悉,那么这个过程和调用 React setState 非常的像。...中调用 setState 方法来更新UI; setState(() { _avImage = 'https://avatars3.githubusercontent.com/u/3321837?...s=460&v=4'; }); Flutter 定义的 Image 可以获取四种资源,由于这里我们是从网络中获取,因此很便捷的就使用了 Image.network 来展示图片。

    63810

    Flutter 构建完整应用手册-动画 顶

    当我们更新数据时,我们也可以使用Flutter用这些更改重建我们的UI。 在我们的例子中,我们将有一块数据:一个布尔值,表示按钮是可见还是不可见。...} } 3.显示切换可视性的按钮 现在我们有一些数据来确定我们的绿色框是否应该是可见或不可见的,我们需要一种方式来更新这些数据。 在我们的情况下,如果该框可见,我们想隐藏它。...为了达到这个目的,我们会显示一个按钮。 当用户按下按钮时,我们会将布尔值从true更改为false,或将false更改为true。...我们需要使用setState进行更改,这是State类中的一个方法。 这将让Flutter知道它需要重建部件。 注意:有关处理用户输入的更多信息,请参阅食谱手册的处理手势部分。...new FloatingActionButton( onPressed: () { // Make sure we call setState!

    1.4K20

    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发

    ,我们为什么不建立为自定义组件呢,因此这里我们需要复用,就要建立自定义组件,诸多地方都要用的上,因此我们开始,等等,还发现个小问题,选择区号的,背景图颜色不对那么修改以下代码:decoration: const...和 pinkbutton.dart 粉色按钮先扩展知识学一下在Flutter中,自定义组件非常重要,可以提高代码的复用性和可维护性。...context) { return ElevatedButton( onPressed: onPressed, child: Text(text), ); }}调用自定义组件...,因此把Register按钮的做成自定义组件并且放在widgets目录下的pinkbutton.dart文件内,把logo登录按钮做成自定义组件并且放在widgets目录下的blackbutton.dart...文件,需要保留目前的样式,并且在原register_screen.dart文件中 原位置中正常调用组件。

    5900

    Flutter 全栈式——基础控件

    在Flutter中,UI小控件有两种设计风格,一种是Material设计,这是安卓的官方设计风格,另一种则是Cupertino风格,是iOS的官方设计风格。.../assets/widgets/owl.jpg'), ) // 调用相应的命名构造方法 Image.network('https://flutter.github.io/assets-for-api-docs...bool 输入框是否为密集型,默认为false,为true时,图标及间距会变小 contentPadding EdgeInsetsGeometry 内间距 isCollapsed bool 是否装饰的大小与输入字段的大小相同...hoverElevation double 指针悬停在按钮上时的阴影 focusElevation double 获取焦点时的阴影 highlightElevation double 高亮时的阴影 disabledElevation...默认Clip.none(不裁剪) backgroundColor Color 背景颜色 padding EdgeInsetsGeometry 内间距 deleteIcon Widget 添加图标按钮,

    3.8K40

    Flutter State生命周期

    2.2.1实测 写个有状态类并混入WidgetsBindingObserver配合监听特殊状态及其一个按钮,调用setState, 给生命周期的方法新增打印: import 'package:flutter...点击按钮打印: I/flutter (16141): 状态刷新 setState // count也+1了,说明重新调用过build。...2.2.2流程图 图解主要部分: 1.构建(build); 2.如果用户调用了setState时则状态刷新,重新build; 3.如果销毁先停用然后dispose销毁再结束; 构造函数 构造函数不属于生命周期...didUpdateWidget 组件更新 当组件的状态改变的时候就会调用didUpdateWidget(),比如调用了setState(), 在widget重新构建时,Flutter framework...会调用Widget.canUpdate来检测Widget树中同一位置的新旧节点, 然后决定是否需要更新,如果Widget.canUpdate返回true则会调用此回调。

    85020

    轻松 Flutter 入门,秒变大前端

    在最近2019年9月的一次Google开发者大会中,伴随着Flutter1.9的发布,目前的Dart也同时更新到了2.5版本, 提供了机器学习和对C跨平台调用的能力。...由于Flutter出自Google,所以,,如果在公司内安装,你还需要一个方便的代理切换工具, 比如:Proxifier 。...此时,就需要使用使用带状态的StatefulWidget了 5.6 给页面加上状态 给自己一个需求,按钮点击时,修改页面上显示的文字“Hello World” 变成“You Click Me” import...相信写过小程序的同学,对这个 setState 还是很眼熟的 ^_^ 5.7 小结一下 StatelessWidget:无状态变更,UI静态固化的Widget, 页面渲染性能更高。...11.6 不能热更新 年中的时候,Google官方宣布flutter暂不官方支持热更新,但是闲鱼团队已经有了自己的热更新方案。关于热更新,只能静观其变了。性能、开发效率、热更新,总是要有取舍的。

    4.2K30

    原来Flutter代码是这样运行在原生系统的!快来了解Flutter标准模板,感受原生系统中Flutter的魅力!

    setState方法是Flutter以数据驱动视图更新的函数,会通知Flutter框架:我这儿有状态改变,赶紧给我刷新界面!...通过该方法调用,Flutter会在底层标记Widget的状态,随后触发重建。示例即使修改_counter,若不调用setState,Flutter框架也不会感知到状态变化,因此界面也不会有任何改变。..._MyHomePageState通过调用build方法以相应数据配置完成包括导航栏、文本及按钮的页面视图的创建。 而当按钮被点击之后,其关联的控件函数_incrementCounter会触发调用。...在这个函数中,通过调用setState更新_counter属性同时,也通知Flutter框架其状态发生变化。...对StatefulWidget,当数据改变时,需重建Widget去更新界面,即Widget创建销毁会很频繁。

    48120

    Flutter Widget框架之旅 顶

    中心思想是你从小部件中构建你的UI。 小组件描述了他们的视图在给定其当前配置和状态时应该看起来像什么。...同样,AppBar小部件允许我们传递小部件以获取title小部件的leading和actiions。这种模式在整个框架中重复出现,并且在设计自己的小部件时可能会考虑到这一点。...当父级收到onCartChanged回调时,父级将更新其内部状态,这将触发父级重建并使用新的inCart值创建ShoppingListItem的新实例。...为了通知框架它改变了它的内部状态,它将这些调用包装在setState调用中。调用setState会将这个小部件标记为肮脏,并计划在下一次您的应用程序需要更新屏幕时重新构建它。...如果您在修改窗口小部件的内部状态时忘记调用setState,则框架将不知道您的窗口小部件是脏的,并且可能不会调用窗口小部件的build函数,这意味着用户界面可能不会更新以反映已更改的状态。

    6.7K20

    setState

    状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值todo中 3.todo用来渲染Todo列表...6.在适宜的状态值改变时,调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘的操作...坏的代码就相当于你有个女友,又丑又乱,又凶又恶,有事没事给你找茬。 然而你还不得不一直面对她,问了你一句为什么这么傻,你含着泪说:"又不是不..."...结语 本文到此接近尾声了,如果想快速尝鲜Flutter,《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步,完成一次Flutter之旅。...另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,本人微信号:zdl1994328,期待与你的交流与切磋。

    96020
    领券