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

如何将输入值从扩展子小部件返回到flutter中的父小部件

在Flutter中,可以通过回调函数将输入值从扩展子小部件返回到父小部件。

以下是一个简单的示例,演示了如何将输入值从子小部件返回到父小部件:

父小部件:

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

class _ParentWidgetState extends State<ParentWidget> {
  String inputValue = '';

  void updateInputValue(String value) {
    setState(() {
      inputValue = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ChildWidget(callback: updateInputValue),
        Text('输入值:$inputValue'),
      ],
    );
  }
}

子小部件:

代码语言:txt
复制
class ChildWidget extends StatefulWidget {
  final ValueChanged<String> callback;

  const ChildWidget({required this.callback});

  @override
  _ChildWidgetState createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(controller: _controller),
        ElevatedButton(
          onPressed: () {
            widget.callback(_controller.text);
          },
          child: Text('返回'),
        ),
      ],
    );
  }
}

在上面的示例中,父小部件ParentWidget包含一个inputValue变量用于存储子小部件返回的输入值。父小部件通过updateInputValue回调函数来更新inputValue的值。子小部件ChildWidget包含一个TextField用于输入值,并通过ElevatedButton按钮将输入值传递给父小部件。

通过以上的代码,输入值将从子小部件传递到父小部件,并在父小部件中进行展示。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云开发者平台:https://cloud.tencent.com/product
  • 腾讯云函数(Serverless Cloud Function):https://cloud.tencent.com/product/scf
  • 腾讯云数据库(TencentDB):https://cloud.tencent.com/product/cdb
  • 腾讯云物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/explorer
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

Container按顺序尝试:遵守alignment,将自己调整到child部件尺寸,遵守宽度,高度和constraints,扩展以适应部件,变得尽可能。...进一步来说: 如果部件没有,没有height,没有width,没有constraints(对子部件约束),父母提供了无界限约束,那么Container尝试尽可能。...如果部件没有且没有alignment(对齐),但是提供了高度,宽度或constraints(约束),那么基于给定这些约束和对象约束相结合容器会尝试尽可能。...如果部件有alignment,并且级提供了有界限约束,那么容器会尝试展开以适合级,然后根据alignment将该级定位到其自身内。...根据弹性因子,在非零弹性因子部件(例如扩展划分剩余垂直空间。 例如,弹性系数为2.0部件将获得弹性系数为1.0部件两倍垂直空间量。

7.4K20

Flutter Widget框架之旅 顶

介绍 你好,世界 基本部件 使用材料组件 处理手势 根据输入更改小部件 把它们放在一起 响应小部件生命周期事件 key 全局Key 介绍 Flutter部件采用现代反应式框架构建,React获得灵感...无状态小部件他们部件接收参数,它们存储在final成员变量。 当一个小部件被要求build时,它会使用这些存储来为它创建部件派生新参数。...它将它在构造函数接收到存储在final成员变量,然后在build函数中使用它。例如,inCart布尔可以在两个可视外观之间切换:一个使用当前主题主要颜色,另一个使用灰色。...当级收到onCartChanged回调时,级将更新其内部状态,这将触发级重建并使用新inCart创建ShoppingListItem新实例。...此外,语义上同步条目意味着保留在有状态子部件状态将保持附加到相同语义条目而不是在视口中相同数字位置上条目。 全局Key 主要文章:GlobalKey 您可以使用全局键来唯一标识窗口部件

6.7K20
  • 【译】Flutter架构综述

    应用程序在所有版本操作系统上看起来和感觉是一样,即使操作系统改变了其控件实现。 Composition 小部件通常由许多其他、单一用途部件组成,这些小部件组合起来可以产生强大效果。...对象不需要紧紧抓住一个对象来保存它状态,而是可以在任何时候创建一个新对象实例而不会丢失对象持久化状态。框架会在适当时候完成所有寻找和重用现有状态对象工作。...因为widget是不可改变,包括节点之间/关系,对widget树任何改变(例如在前面的例子把Text('A')改为Text('B'))都会导致返回一组新widget对象。...在确定其大小时,子代必须尊重其父代给它约束。对象在对象建立约束条件下,通过向上传递尺寸来做出响应。 ?...对象可以通过将最大和最小约束设置为相同来决定子对象大小。例如,手机应用中最上面的渲染对象将其对象约束为屏幕大小。(对象可以选择如何使用该空间。

    5.6K10

    Flutter应用程序添加交互性 顶

    如何创建自定义小部件。 无状态和有状态小部件之间区别。 你如何修改你应用程序,使其对用户输入做出反应? 在本教程,您将为仅包含非交互式小部件应用添加交互性。...如果有疑问,首先管理窗口小部件状态。 谁管理有状态小部件状态? 小部件本身? 窗口小部件? 都? 另一个对象? 答案是......这取决于依赖高关系。有几种有效方法可以让你部件互动。...对于窗口小部件来说,管理状态并告诉其窗口小部件何时更新通常是最有意义。...在点击事件,将该状态更改传递给部件,以使用widget属性采取适当操作。...处理手势,Flutter Widget框架导览一部分:如何创建按钮并使其响应输入Flutter手势:Flutter手势机制描述。

    4.2K20

    Flutter构建布局 顶

    内容 对齐小部件 调整小部件 包装小部件 嵌套行和列 要在Flutter创建行或列,可以将一个窗口小部件列表添加到Row或Column窗口小部件。...调整小部件 也许你想要一个小部件占据其兄弟姐妹两倍空间。 您可以将行或列子项放置在扩展部件,以控制沿着主轴部件大小。 扩展部件具有flex属性,它是一个整数,用于确定小部件弹性因子。...Stack摘要: 用于与另一个小部件重叠部件 列表第一个小部件是基础小部件; 随后被覆盖在基础小部件顶部 堆栈内容不能滚动 您可以选择剪切超过渲染框子项 Stack示例: ?...例如,将标高设置为24.0,将卡片视觉上抬离表面并使阴影变得更加分散。 有关支持高程列表,请参见材料准则高程和阴影。 指定不支持将完全禁用投影。...处理Flutter盒子约束:讨论小部件如何受其渲染框限制。 在Flutter添加资产和图像:说明如何将图像和其他资源添加到应用程序包

    43.1K10

    Flutter 构建完整应用手册-设计基础知识 顶

    有两种方法可以解决这个问题:创建唯一ThemeData,或者扩展主题。...扩展主题通常是有意义,而不是覆盖所有。...}, ), ); 完整例子 注意:在本例,我们将在用户点击按钮时显示SnackBar。 有关处理用户输入更多信息,请参阅食谱处理手势部分。...路线 导入字体文件 在pubspec.yaml声明该字体 将字体设置为默认 在特定部件中使用字体 1.导入字体文件 为了处理字体,我们需要将字体文件导入到项目中。...这些对应于FontStyle,可用于TextStyle对象fontStyle属性。 3.将字体设置为默认 对于如何将字体应用于文本,我们有两种选择:作为默认字体或仅在特定部件

    7.1K10

    flutter系列之:UI layout简介

    flutter,基本上所有的对象都是widget,对于layout来说也不例外。也就是说在flutterlayout也是用代码来完成,这和其他用配置文件来描述layout语言有所不同。...flutterlayout分类flutterlayout widget有很多,他们大概可以分为三类,分别是只包含一个childlayout widget,可以包含多个childlayout...SizedBox — 给定sizebox。SizedOverflowBox — 可以覆盖组件限制box。Transform — 组件可以变换。...IndexedStack — 从一系列child展示其中一个child。LayoutBuilder — 可以依赖组件大小widget tree。.../最通俗解读,最深刻干货,最简洁教程,众多你不知道技巧等你来发现!

    95510

    Flutter你竟是这样布局

    如果不了解此规则,就无法真正理解Flutter布局,因此Flutter开发人员应尽早学习。 更详细地: Widget其父级获得自己约束。...布局是自上而下,当前widget会有基本一些约束(来自它元素),主要是关于宽高最小和最大 Widget无法知道也不决定其在屏幕上位置,因为Widget级决定小部件位置。...它会依次询问元素关于布局基本限制要求,让元素上报期望布局结果,然后根据现状和自己布局算法特点,告诉元素应该放到那儿,占多大空间 由于大小和位置又取决于其父级,因此在不考虑整个树情况下就无法精确定义任何小部件大小和位置...当然,屏幕是通过将tight constraint传递给Container来实现。 另一方面,宽松约束设置了最大宽度和高度,但使小部件尽可能。...由于Column扩展了Flex,请导航至Flex源代码(也位于basic.dart)。 向下滚动直到找到一个名为createRenderObject()方法。

    2.3K20

    Flutter —布局系统概述

    但是,我们将对最重要内容进行很好概述,力图将一切可视化。 “两个阶段” 布局系统和约束 首先,小部件Flutter SDK构建块,但它们不负责将其自身绘制到屏幕。...在第一个阶段,framework 以递归地方式沿着渲染树 把BoxConstraints传递给组件。它为组件提供了一种方式来调节/增强组件尺寸,并根据需要更新这些限制。...级收集所有大小,然后使用此几何信息将每个子级正确定位在自己笛卡尔系统。这个阶段负责确定大小和位置,在此阶段,组件知道每个子组件大小以及他们位置。 那么,这到底意味着什么?...这意味着组件有责任定义/限制/约束组件尺寸,并相对于其坐标系进行定位。换句话说,小部件可以选择其大小,但是它必须始终遵守其父级收到约束。此外,小部件不知道其在屏幕上位置,但其父级知道。...Main获取此“最终”窗口小部件,并将其最终绑定到屏幕。 RenderBox树最终绑定在屏幕上。我们有一个正在运行应用程序。 有趣事情要记住 小部件不知道其在屏幕上位置;它组件才知道。

    1.7K20

    Flutter 创建可拖动浮动操作按钮

    child小部件使用Positioned基于当前偏移量部件呈现。它也被包装为Listener小部件级。还有一种方法_updatePosition可以根据移动增量更新当前偏移量。...您需要向部件添加一个键并将其传递给DraggableFloatingActionButton小部件key,你可以currentContext属性获取RenderBox,它有findRenderObject...然后,您可以 RenderBox size 属性获取大小。您必须小心,因为必须在构建树之后调用 findRenderObject 方法。...不仅是尺寸,您还需要考虑按钮尺寸来确定最大偏移量。因此,您需要为部件做类似的事情。对于子部件,可以将其包装为 Container 部件并将 GlobalKey 传递给 Container。...一个简单圆形小部件作为child参数传递,这意味着它成为可拖动按钮。您可以为按钮使用任何小部件,包括 Flutter FloatingActionButton小部件

    5.6K10

    Flutter-AS 工善其事先利其器

    总结一下在Flutter开发,AS(Android Studio一下简称AS)常用快捷方式 代码块 StatelessWidget和StatefulWidget 快速创建基于StatelessWidget...只需要输入 stless 就可以创建一个StatelessWidget。 只需要输入 stful 就可以创建一个StatefulWidget。 自定义代码块 AS可以设置代码块。...折起/展开选中代码 CMD + , 进入设置页面 CMD + [ 光标回到上一次编辑位置 CMD + ] 光标回到下一次编辑位置 CMD + L 定位某一行,甚至某一个字符 CMD...,选中当前小部件所有代码,自己试~) CMD + option + M 将选中代码提取到某个方法 CMD + option + L 格式化代码 CMD + Shift + -/+ 折起/展开所有代码块...-> Languages & Frameworks -> Flutter -> Editor 选中Format code on save 也可以勾选选项 Organize imports on save

    49320

    【老孟FlutterFlutter 2 新增功能

    :如何编写一个应用程序,适应本身以及多个不同尺寸(,中和大屏幕),不同输入模式(触摸,键盘和鼠标)和不同习惯用法(移动,网络和台式机)?...所谓“好”,是指它在屏幕,屏幕和大屏幕上看起来都不错,它利用了触摸,键盘和鼠标输入优势,并且对于平台惯用语言也很好用(例如,通过使用网络上链接和桌面上菜单)。...此功能称为Add-to-App,是在两个移动平台上重用Flutter代码同时仍保留现有本机代码库绝佳方法。但是,对于您那些人,我们有时会听到,不清楚如何将第一个屏幕集成到Flutter。...图片发布 Flutter IDE扩展会在您应用引发布局溢出异常时发出通知 按下该按钮可将您带到出现问题部件DevToolsFlutter Inspector,因此您可以对其进行修复。...删除nullOk参数,并使其返回不可为空 68911添加maybeLocaleOf到本地化 68736在Media.queryOf删除nullOK 68917Focus.of,FocusTraversalOrder.of

    7.8K20

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

    查找和使用包来扩展功能。 使用热重载加快开发周期。 如何实现有状态部件。 如何创建一个无限,延迟加载列表。 如何创建并导航到第二个屏幕。 如何使用主题更改应用程序外观。...该应用程序扩展了使应用程序本身成为小部件StatelessWidget。 在Flutter,大多数情况都是一个小部件,包括对齐,填充和布局。...lib/main.dart 第3步:添加一个有状态部件 无状态小部件是不可变,这意味着它们属性不能改变 - 所有的都是最终。 有状态部件保持在小部件生命周期中可能改变状态。...在Flutter,导航器管理包含应用程序路由堆栈。 将路由推入导航器堆栈,将显示更新为该路由。 导航器堆栈中弹出路由,将显示返回到前一个路由。...提示:某些小部件属性采用单个小部件级),而其他属性(如操作)则采用小部件级)数组,如方括号([])所示。

    9.5K20

    端开发技术——解密Flutter响应式布局

    Flutter是一个跨平台应用开发框架,支持各种屏幕大小设备,它可以在智能手表这样设备上运行,也可以在电视这样大设备上运行。使用相同代码来适应不同屏幕大小和像素密度是一个挑战。...在iOS,为了控制多个视图控制器,使用了UISplitViewController,它在分层界面管理视图控制器。 现在我们来到Flutter Flutter引入了widget概念。...如果一个[Column]部件宽度超过了它高度,它方向是横向,即使它以垂直形式显示其元素。...AspectRatio 可以使用AspectRatio小部件元素大小调整为特定长宽比。...您还可以定义扩展部件flex属性,这将允许您指定每个小部件应该覆盖屏幕多少部分(默认flex设置为1)。

    2.3K00

    Flutter —快速开发IDE快捷方式

    Flutter 初学者,那么您一定厌恶嵌套结构,在代码添加或删除一个小部件,或者找到一个小部件在何处结束、何处开始是多么困难。...只需输入stless即可创建一个无状态小部件,如下所示: 或输入stful创建有状态部件: 如果您已经创建了一个无状态小部件并添加了许多子级,但是却意识到您最终将需要一个State怎么办?...因此,现在,newContainer成为您部件级。 或者,您甚至可以单击一下就可以用“列”或“行”包装多个小部件!...当您打开它时,它看起来像这样: 现在,您可以清楚地看到哪个窗口小部件,它们在用户界面排列方式以及哪些窗口小部件具有其他窗口小部件。十分简单!...将代码提取到方法 Flutter Outline是一个非常有用工具。

    2.1K20

    Flutter Widget源码解析及实战

    下面是StatefulWidget最佳实践: 尽量将需要该表状态widget防止在节点,这样在改变整个渲染树时候就只需要更新一个widget即可,如果将其防止在节点那么将会导致当前节点整个子节点...对于要重新使用窗口小部件,要比创建新(但配置相同)窗口小部件更有效。将有状态部分分解为带有参数部件是执行此操作常用方法。 尽可能使用`const`小部件。...例如,不是返回包含在[IgnorePointer]子项或子项,而是始终将窗口小部件包装在[IgnorePointer]并控制[IgnorePointer.ignoring]属性。...如果移除后没有重新插入到树则紧接着会调用dispose()方法。 dispose:当State对象树中被永久移除时调用;通常在此回调释放资源。...在Flutter,根据Widget是否需要包含节点将Widget分为了三类,分别对应三种Element,如下表: StatelessWidget和StatefulWidget就是两个用于组合Widget

    2K20

    第130期:flutter状态组件和状态管理

    我们在看电影时候,往往只关注某个主演角色,其实那些小角色表演,远远比主演角色表演要丰富~ 场景 怎样才能在我们flutter应用对用户输入做出响应?...回想一下web端开发,其实大同小异。 组件状态存储在state对象,将控件状态与其外观分开。状态由可以更改组成,例如滑块的当前或是否选中复选框。..._active 状态_active用来控制组件颜色 _handleTap方法调用setState来更新组件展示 组件管理状态 通常情况下,组件管理状态并通知其组件何时更新是最有意义。...例如,IconButton可以让图标看作是可点击按钮。IconButton是一个无状态部件,因为我们可以让组件知道按钮是否被点击,以便采取适当操作。...onChanged属性方法,当点击组件TapboxB时,会触发组件_handleTapboxChanged方法,通知组件,从而实现组件更新。

    1.5K20

    StatefulWidget使用案例

    Flutter,自定义组件其实就是一个类,这个类继承自StatelessWidget/StatefulWidget。 StatelessWidget是无状态组件,状态不可变Widget。...首先我们在VSCode安装一个名为“Awesome Flutter Snippets”插件,该插件提供了Flutter各种常用类和方法快速构建方式,可以极大地提升开发效率,如下所示: 捷径...扩展 描述 statelessW 无状态小工具 创建无状态小部件 statefulW 有状态小工具 创建有状态小部件 build...dis 部署 永久地删除此对象时调用。当此State对象永远不会再次构建时,框架将调用此方法。...oriantationBldr 方向生成器 创建一个构建器,允许指定和引用设备方向 layoutBldr 布局生成器 与Builder窗口小部件类似,只是框架在布局时调用构建器函数并提供窗口小部件约束

    3.3K20

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

    通过这篇文章学习,将为你揭开这些答案。 谁是FlutterView? 在Android,View是屏幕上显示所有内容基础, 按钮、工具栏、输入框等一切都是View。...但是,即使Widget是有状态,如果包含它窗口小部件本身不对这些更改(或其他输入)做出反应,Widget仍然可以是无状态。...在 iOS ,我们可以调用viewaddSubview() 或在viewremoveFromSuperview()来动态地添加或移除 view。...在Flutter,因为Widget是不可变,所以没有类似的方法。相反,我们可以传入一个函数或表达式,该函数或表达式返回一个Widget给项,并通过布尔控制该Widget创建。...; 在 Flutter ,推荐组合多个 Widgets 来构建一个自定义 Widget(而不是扩展它)。

    11K10
    领券