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

Flutter -如何在搜索时将搜索文本从一个小部件传递到它的另一个类小部件?

在Flutter中,可以通过以下步骤将搜索文本从一个小部件传递到另一个小部件:

  1. 创建一个包含搜索文本的小部件:
代码语言:txt
复制
class SearchWidget extends StatefulWidget {
  @override
  _SearchWidgetState createState() => _SearchWidgetState();
}

class _SearchWidgetState extends State<SearchWidget> {
  String searchText = '';

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (value) {
        setState(() {
          searchText = value;
        });
      },
    );
  }
}
  1. 创建接收搜索文本的小部件:
代码语言:txt
复制
class ResultWidget extends StatelessWidget {
  final String searchText;

  ResultWidget(this.searchText);

  @override
  Widget build(BuildContext context) {
    return Text('Search Text: $searchText');
  }
}
  1. 在父级小部件中使用这两个小部件:
代码语言:txt
复制
class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SearchWidget(),
        ResultWidget(),
      ],
    );
  }
}

在这个例子中,SearchWidget是一个可编辑的文本框,当文本框的值发生变化时,会更新searchText的值。ResultWidget接收searchText作为参数,并显示搜索文本。

这样,当用户在SearchWidget中输入搜索文本时,ResultWidget会自动更新显示搜索文本。

关于Flutter的更多信息,你可以访问腾讯云的Flutter产品介绍页面:Flutter产品介绍

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

相关·内容

Flutter常见开发问题

从按钮布局结构一切都是小部件。这里优势在于可定制性。想象一下 Android 中按钮。具有文本等属性,可让您向按钮添加文本。...但是 Flutter按钮不是标题作为字符串,而是另一个部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象东西,**而不会打破布局限制。...它是如何做到?在构建应用程序时,它不是只使用特定资源,而是实质上需要所有资源。为什么这有帮助?因为如果我图标从一更改为另一个,则不必完全重建应用程序。...在您不小心移动了几个括号后,它会使您代码更漂亮。 为什么我们函数传递给小部件? 我们函数传递给一部件,本质上是说,“当有事情发生时调用这个函数”。...函数是 Dart 中第一对象,可以作为参数传递给其他函数。使用 Android (<Java 8) 等接口回调对于简单回调有太多样板代码。

6.8K30

Flutter常见开发问题

Android 中 View 主要是布局元素,但在 Flutter 中,Widget 几乎就是一切。从按钮布局结构一切都是小部件。这里优势在于可定制性。...想象一下 Android 中按钮。具有文本等属性,可让您向按钮添加文本。但是 Flutter按钮不是标题作为字符串,而是另一个部件。...它是如何做到?在构建应用程序时,它不是只使用特定资源,而是实质上需要所有资源。为什么这有帮助?因为如果我图标从一更改为另一个,则不必完全重建应用程序。...在您不小心移动了几个括号后,它会使您代码更漂亮。 为什么我们函数传递给小部件? 我们函数传递给一部件,本质上是说,“当有事情发生时调用这个函数”。...函数是 Dart 中第一对象,可以作为参数传递给其他函数。使用 Android (<Java 8) 等接口回调对于简单回调有太多样板代码。

6.7K20

Flutter中构建布局 顶

第一孩子,列,包含2行文字。 第一列占用大量空间,所以必须包装在扩展小部件中。 ? ? 第二行称为按钮部分,也有3子项:每个子项都是一包含图标和文本列。 ?...文本放入容器以在文本上方添加填充,将其与图标分开。 通过调用函数并传递特定于该列图标和文本来构建包含这些列行。...文本放入容器中,以便沿每条边添加32像素填充。 softwrap属性指示文本是否应在软换行符(句点或逗号)上断开。...根据您想要对齐或约束可见窗口小部件方式,从各种布局窗口小部件中进行选择,因为这些特性通常会传递包含窗口小部件。 这个例子使用Center,它将内容水平和垂直居中。...Flutter从01:一人写他第一Flutter应用程序经验。

43K10

【老孟FlutterFlutter 2 新增功能

在此初始稳定版本中,Flutter在Web平台支持下代码可重用性提高另一个层次。因此,现在当您稳定地创建Flutter应用程序时,Web只是该应用程序另一个设备目标。...图片发布 Flutter桌面现在支持直观IME输入 此外,我们还提供了更新文档,介绍了开始准备桌面应用程序部署特定于操作系统商店需要执行操作。...Flutter 2拥有超过500,000Flutter开发人员,涉及平台数量越来越多,因此很快就属于这一。...可用修复程序列表,灯泡快速修复程序,可帮助您单击鼠标来更改代码。...搜索和过滤添加到“日志记录”选项卡 在启动DevTools之前跟踪日志,因此启动可以查看完整日志历史记录 “性能”视图重命名为“ CPU Profiler”,以使其更清楚地提供什么功能 向CPU

7.8K20

Flutter 流体滑块

地址:https://pub.dev/packages/flutter_fluid_slider 简介 流体滑块是一种流体设计滑块,其工作原理与“滑块”材料小部件非常相似。它用于从一系列值中进行选择。...下面的演示视频显示了如何在颤动中创建流畅滑块。显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...另外,我们添加滑块颜色。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 img 现在,我们创建另一个FluidSlider()。...我们显示一附着金钱图标。如果未提供,则该max值显示为文本。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 img 现在,我们创建第三“流体”滑块。...我们创建一字符串数字110列表并返回数字。

11.6K20

【译】Flutter架构综述

相反,它们唯一目的是控制另一个部件布局某些方面。Flutter还包括利用这种组合方法实用工具部件。...而且,构建函数设计通过专注于声明一widget是由什么组成,而不是将用户界面从一状态更新到另一个状态复杂性来简化你代码。...元素树从一另一帧都是持久,因此起着关键性能作用,允许Flutter在缓存其底层表示,就像小组件层次结构是完全可处置一样。...现实世界中例子是流式文本,它可能必须适合一水平约束,但根据文本数量而在垂直方向上变化。即使当一子对象需要知道它有多少可用空间来决定如何渲染内容,这个模型也能工作。...当场景完成后,RenderView对象合成场景传递给dart:ui中Window.render()方法,该方法控制权传递给GPU来渲染

5.5K10

开始使用-编写你第一Flutter应用程序 顶

实现一有状态部件至少需要两:1)一StatefulWidget创建一2)一State实例。...在这一步中,您将添加一有状态部件RandomWords,创建其状态RandomWordsState。 State最终维护小部件建议和最喜欢单词对。...两参数传递给函数 - BuildContext和行迭代器,i 迭代器从0开始,每次调用该函数递增,每次建议单词配对一次。 该模型允许建议列表在用户滚动无限增长。...这些将由RandomWordsState管理,这使得用户在下一步中从一屏幕导航另一个屏幕,可以更轻松地更改应用栏中路由名称。...lib/main.dart 第6步:导航屏幕 在这一步中,您将添加一显示收藏夹新屏幕(在Flutter中称为路由)。 您将学习如何在主路由和新路由之间导航。

9.5K20

6详解AppBar小部件

由于它是一如此常用组件,因此 Flutter 为该功能提供了一名为AppBar专用小部件。 在本教程中,我们通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...Flutter AppBar 是根据Material Design指南构建应用程序组件。通常位于屏幕顶部,并且能够在其布局中包含其他小部件。...Flutter AppBar 布局 leading leading 接受一部件,可以分配任何东西——文本、图标,甚至一行中多个小部件。...AppBar 导航箭头 当我们 添加DrawerScaffold ,会分配一菜单图标leading来打开抽屉。...工具栏包含文字,图标,按钮,和其他任何公司前景,除了小部件Container和Image。

16.3K10

Flutter Widget框架之旅 顶

当小部件状态发生变化时,小部件会重新构建描述,该描述与前面的描述不同,以确定底层渲染树从一状态转换到下一状态所需最小更改。...MyScaffold小部件在垂直列中组织其子女。在列顶部,放置了MyAppBar实例,应用程序栏传递给一Text小部件用作其标题。...例如,应用栏有一阴影,标题文本会自动继承正确样式。 我们还添加了一浮动动作按钮,以便您采取措施。 请注意,我们再次部件作为参数传递给其他小部件。...同样,AppBar小部件允许我们传递部件以获取title小部件leading和actiions。这种模式在整个框架中重复出现,并且在设计自己部件可能会考虑这一点。...在更复杂应用程序中,小部件层次结构不同部分可能对不同问题负责; 例如,一部件可能呈现一复杂用户界面,其目标是收集特定信息(日期或位置),而另一个部件可能会使用该信息来更改整体呈现。

6.7K20

何在 Flutter 中设置背景图像【Flutter专题16】

本教程向您展示如何在 Flutter 中设置背景图像。 在 Flutter 应用程序中设置背景图像常用方法是使用DecorationImage....Container 构造函数有一名为decoration参数,用于在 child 后面绘制装饰。对于该参数,您需要传递Decoration值。Flutter 中有一些Decoration。...它可以通过传递BoxFit枚举值作为fit参数来完成。可能值为: fill:设置源填充目标框。它可能会扭曲源纵横比。 contain:在目标框内源设置为尽可能大。...cover:源设置为尽可能,同时仍覆盖整个目标框。 fitWidth: 设置源宽度以匹配目标框宽度。它可能会导致源垂直溢出目标框。 fitHeight: 设置源高度以匹配目标框宽度。...在移动设备上,当用户与文本字段交互,通常会显示屏幕键盘。

11.2K21

Flutter UI原理

没有单独“application”对象。 取而代之是,root widget担任此角色。 您可以通过层次结构中widget替换为另一个widget来响应事件,例如用户交互。...您可以用新颖方式组合这些以及其他简单部件,而不是Container子类化以生成自定义效果。 层次结构浅而宽,以最大化可能组合数。...render渲染层,这层主要作用是简化了布局和绘制过程,是底部dart:ui库另一个抽象; dart:ui是最后一Dart层,基本上处理与Flutter引擎通信。...为每一帧做到这一点并跟踪。如果你只是你打算构建一简单应用程序,只显示一蓝色框内文本,那倒有可能。但如果你试图建立更复杂布局,购物应用程序甚至小游戏,那么这种方法就不那么好了。...当我们Container颜色更改为红色,框架触发重建,这将重新创建整个Widget树,因为它是不可变

3.2K20

Flutter 中探索 StreamBuilderimage

假设您需要根据一 Stream 快照在 Flutter 中构造一部件,那么有一名为 StreamBuilder 部件。...在这个博客中,我们探索 Flutter StreamBuilder。我们还将实现一演示程序,并向您展示如何在 Flutter 应用程序中使用 StreamBuilder。...A stream 构建器,它可以流中多个组件更改为小部件 Stream 像一条线。当您从一端输入值而从另一端输入侦听器,侦听器获得该值。...一流可以有多个侦听器,这些侦听器负载可以获得流水线,流水线获得等价值。如何在流上放置值是通过使用流控制器实现。流构建器是一部件,它可以将用户定义对象更改为流。...参数: 下面是 StreamBuilderare 一些参数: Key? key: 小部件键,用于控制小部件如何被另一个部件取代 Stream?

2.5K00

Flutter 中自定义动画底部导航栏

在这个博客中,我们探索Flutter自定义动画底部导航栏。我们看到如何实现自定义动画底部导航栏演示程序以及如何在 Flutter 应用程序中使用它。...介绍: 显示在应用程序底部Material小部件,用于在几个视角中进行选择,通常在 3 5 范围内某个位置。底部导航栏包含各种选项,文本标签、图标或两者。...提供了应用程序高级视角之间快速导航。对于更大屏幕,侧面导航可能更合适。 这个演示视频展示了如何在 flutter 中使用自定义底部导航栏。...展示了自定义底部导航栏将如何在 Flutter 应用程序中工作。显示当用户点击底部导航栏图标,它们将被动画化并显示标签文本。当用户点击任何图标,颜色也会发生变化和动画。...我们添加四具有不同文本容器并返回**IndexedStack()**小部件。在小部件内部,我们添加索引是我变量 _currentIndex 和 children 是列表小部件页面。

8.8K30

Flutte部件目录-基本部件(一)

使用Flutter视觉,结构,平台和交互式小部件集合更快地创建漂亮应用程序。 基本部件 在构建您第一Flutter应用程序之前,您绝对需要了解这些小部件。...另外,部件有一部件,但没有高度,没有宽度,没有约束,也没有对齐,并且容器约束从父项传递给子项,并将其自身尺寸设置为与子部件匹配。...该徽标是友好,愉快地决定一边24像素。这为下一部件留下了很多空间。该行然后询问下一部件文本认为最好尺寸布局。...当一列布局非柔性子部件(那些既没有 Expanded也没有Flexible包裹部件给了他们无限约束,以便他们可以确定他们自己尺寸(传递无界约束通常指示子部件应该收缩包裹其内容)。...在这种情况下,解决方案通常只是内部列包装在Expanded中,以表明应该占用外部列剩余空间,而不仅仅是需要空间。 显示此消息另一个原因是列嵌套到ListView或其他垂直滚动条中。

7.4K20

深入探究Flutter页面导航器:Navigator详解

页面跳转: 我们可以使用Navigator来实现页面之间跳转,无论是从一页面跳转到另一个页面,还是从一页面返回到上一页面。...下面我们探讨如何在页面之间传递参数,并演示如何使用Navigator.pushNamed和RouteSettings来实现路由参数传递。 1....AutomaticKeepAliveClientMixin是一混入,用于告诉Flutter框架保持页面状态不变,而KeepAlive是一部件,用于包裹需要保持状态部件。...导航器嵌套允许我们在一页面内部创建多个导航器,并分别管理它们之间导航栈,从而实现更灵活和复杂页面管理。本节学习如何在Flutter应用中实现导航器嵌套,并演示如何在多个导航器之间进行导航。...如何在页面返回传递数据? 可以通过Navigator.pop方法第二参数来传递数据。在返回,可以通过await关键字获取pop方法返回值,从而获取传递数据。

45610

Flutter】自定义滚动开关

工作就像房子电源开关。 本文中,我们探讨Flutter**Custom Rolling Switch in Flutter。...该演示视频展示了如何在颤动中创建自定义滚动开关。显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...显示了在用户按下按钮后进行切换交互,该开关滚动到具有动画效果另一侧,并且在滚动该开关更改图标和文本。...在小部件内,我们添加一列小部件。在此小部件中,我们添加mainAxisAlignment为center。在内部,我们添加带有样式文本。...*我们添加textOn是字符串' Yes '表示当开关打开文本显示在按钮上;当textOff是字符串' No '意味着当开关关闭文本显示在按钮上。

33.3K60

Flutter 构建完整应用手册-导航器 顶

数据发送到新屏幕 通常,我们不仅要导航屏幕,还要将一些数据传递屏幕。 例如,我们经常想传递关于我们点击项目的信息。 请记住:屏幕只是部件™。 在这个例子中,我们创建一Todos列表。...当点击一待办事项,我们导航显示关于待办事项信息新屏幕(部件)。...路线 定义一Todo 创建Todos列表 创建一可以显示关于待办事项信息详情屏幕 导航并将数据传递详情屏幕 1.定义一Todo 首先,我们需要一种简单方法来表示Todos。...跨屏幕设置动画部件 在屏幕之间导航,指导用户浏览我们应用通常很有帮助。 通过应用引导用户常用技术是部件从一屏幕动画到下一屏幕。 这会创建一连接两屏幕视觉锚点。...我们如何使用Flutter部件从一屏幕动画到下一屏幕? 使用Hero部件

4.9K10

记住,永远都不要在 Flutter 中使用全局变量

如果删除一全局变量,则必须搜索整个程序并重构每个有权访问已删除全局变量函数。 2. 全局变量使单元测试变得痛苦 如果你更改了一具有全局变量模块,那么你将不得不为下一次测试重置。...但是,有些开发人员会使用全局变量,因为他们在一团队中,并且在某些情况下不利于更改。 但是,无论应用程序大小如何,当需要维护代码,全局变量都会带来挑战。...GetX GetX 是一轻量级 Flutter 库,提高了可扩展性,因为允许你解耦视图、依赖注入、表示层和依赖注入。...这将节省你时间,因为你将在运行时缺陷添加到你应用程序之前修复错误。 4. Redux Redux 是一库,可帮助你有效地管理小部件数据状态。...SetState 方法 之前,我们只介绍了管理状态 Flutter 包和库。 当你部件更改数据值,可以调用一名为 setState 方法。它将导致 UI 根据新状态发生变化。

3.4K30

Flutter Shimmer 动画效果

处理向用户传递信息正在加载一种主流方法是在不准确加载物质类型形状上显示带有微光动画铬色调。 在在这篇博客中,我们探索 Flutter Shimmer 动画效果。...此演示视频展示了如何在颤动中创建微光动画效果。展示了如何在 Flutter应用程序中使用shimmer包来实现微光动画效果。...child: Child 拥有创建 ShimmerEffect 所需任何小部件。可以是文本部件或复杂设计,并且创建 ShimmerEffect 没有任何问题。...**direction:**您可以从左到右、从右到左、从开始结束或从底到顶调整微光高光颜色方向,为此,您只需传递具有确定方向 ShimmerDirection。...**在这个中,我们创建三最终字符串,分别是 urlImg、title 和 detail。我们还创建了所有字符串项构造函数。

5.5K20

Flutter 1.22 正式发布

您可以在iOS 14上尝试使用Flutter另一个功能是App Clips,它是iOS 14一项新功能,支持10MB以下轻量级应用程序快速,无安装应用程序执行。...该软件包有助于解决诸如如何正确地字符串(“ A in text in English”)缩写为前15字符问题。使用String,该缩写为“ A??...我们已经在Scrollable中提供了支持,例如ListView和SingleChildScrollView(记住用户滚动位置)和TextField(恢复他们输入文本),并且我们计划将其扩展其他小部件...您可以通过--analyze-size标志传递给以下任何命令来使用该工具收集分析所需数据: flutter build apk flutter build appbundle flutter build...此外,收集数据还可以作为JSON文件使用,供Dart DevTools使用,使您可以按照flutter.dev上说明进一步浏览应用程序内容,查明大小问题并查看两不同JSON文件之间更改。

7.4K20
领券