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

将TextInputs数组从子视图传递到父视图。swiftui

在SwiftUI中,可以通过使用@Binding属性包装器将数据从子视图传递到父视图。以下是实现这一功能的步骤:

  1. 在父视图中创建一个@State属性来存储TextInputs数组。例如:
代码语言:txt
复制
@State private var textInputs: [String] = []
  1. 在父视图中创建一个子视图,并将textInputs数组作为@Binding属性传递给子视图。例如:
代码语言:txt
复制
ChildView(textInputs: $textInputs)
  1. 在子视图中,创建一个@Binding属性来接收父视图传递的textInputs数组。例如:
代码语言:txt
复制
@Binding var textInputs: [String]
  1. 在子视图中,使用ForEach循环遍历textInputs数组,并显示每个TextInput。例如:
代码语言:txt
复制
ForEach(textInputs.indices, id: \.self) { index in
    TextInput(text: $textInputs[index])
}
  1. 在子视图中,创建一个TextInput视图,并将每个TextInput与textInputs数组中的相应元素绑定。例如:
代码语言:txt
复制
struct TextInput: View {
    @Binding var text: String
    
    var body: some View {
        TextField("Enter text", text: $text)
    }
}

这样,当子视图中的TextInput发生更改时,父视图中的textInputs数组也会相应地更新。

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

相关·内容

GeometryReader :好东西还是坏东西?

几何信息传递到上层视图,可能会引起不必要的视图更新。而向下传递信息,可以确保更新只在 GeometryReader 的闭包中进行。 GeometryReader 是布局容器吗,它的布局逻辑是什么?...( Required Size )返回给视图 视图的建议尺寸作为自身的建议尺寸传递给子视图 视图的原点(0,0)置于 GeometryReader 的原点位置 其理想尺寸( Ideal Size...为此,我们首先需要理解 SwiftUI 的布局原理。 SwiftUI 的布局是一个协商过程。视图向子视图提供建议尺寸,子视图返回需求尺寸。...与 GeometryReader 不同,满足 layout 协议的布局容器能够在布局阶段就获取到视图的建议尺寸和所有子视图的需求尺寸。这样可以避免由于反复传递几何数据导致的大量视图的反复更新。...与其说避免使用,不如说用更加 SwiftUI 的方式来进行布局。

46270

onAppear 的调用时机

布局 在计算好当前需要显示的视图所有的视图值后,SwiftUI 进入布局阶段。通过视图向子视图提供建议尺寸,子视图返回需求尺寸这一过程,最终计算出完整的布局结果。...有关布局的流程请阅读 SwiftUI 布局 —— 尺寸[5] 渲染 SwiftUI 通过调用更加底层的 API,视图在屏幕上呈现的过程。此过程严格意义上已经不属于 SwiftUI 的管理范畴了。...ProposedViewSize, subviews _: Subviews, cache _: inout ()) {} } 上面的代码创建了一个固定返回 100 * 100 需求尺寸的布局容器,在视图询问其需求尺寸时通过控制台报告给我们...: SwiftUI 首先对视图进行求值( 由外向内 ) 在全部求值结束后开始进行布局( 由视图视图 ) 在布局结束后,调用视图对应的 onAppear 闭包( 顺序不明,不要假定 onAppear...,在第一段代码报错时,该视图甚至还没有进入布局阶段,就更不用提调用 onAppear 了。

1.1K10

onAppear 的调用时机

布局在计算好当前需要显示的视图所有的视图值后,SwiftUI 进入布局阶段。通过视图向子视图提供建议尺寸,子视图返回需求尺寸这一过程,最终计算出完整的布局结果。...有关布局的流程请阅读 SwiftUI 布局 —— 尺寸 渲染SwiftUI 通过调用更加底层的 API,视图在屏幕上呈现的过程。此过程严格意义上已经不属于 SwiftUI 的管理范畴了。...: ProposedViewSize, subviews _: Subviews, cache _: inout ()) {}}上面的代码创建了一个固定返回 100 * 100 需求尺寸的布局容器,在视图询问其需求尺寸时通过控制台报告给我们...:SwiftUI 首先对视图进行求值( 由外向内 )在全部求值结束后开始进行布局( 由视图视图 )在布局结束后,调用视图对应的 onAppear 闭包( 顺序不明,不要假定 onAppear 之间的执行顺序...,该视图甚至还没有进入布局阶段,就更不用提调用 onAppear 了。

2K20

SwiftUI geometryGroup() 指南:从原理到实践

默认情况下,SwiftUI 视图会将位置和大小的变化沿视图层级向下传递,以至于只有绘制内容的视图(称为叶子视图当前动画应用到它们的框架矩形上。...几何组充当视图与其子视图之间的屏障,迫使位置和大小的值由视图解析和动画化,然后再传递给每个子视图。...本节涉及 transaction 以及 SwiftUI 动画的一些内部运行机制。...以上面的示例来说,在添加了 geometryGroup() 后,视图( frame )并不是一次性的将自身几何属性的改变状态传递给了子视图,而是这些变化动画化了后,持续传递给子视图的。...https://cdn.fatbobman.com/geometryGroup-demo4_2023-11-27_09.52.07.2023-11-27%2009_53_12.gif 新创建的单元格根据视图持续传递进来的几何信息

25210

SwiftUI 布局协议 - Part 1

由于涉及许多内容,我分成两个部分: Part 1 - 基础: 什么是布局协议 视图层次结构的族动态 我们的第一个布局实现 容器对齐 自定义值:LayoutValueKey 默认间距 布局属性和 Spacer...,然而,通过调用 frame(width:100) 子视图只得到了 100pt,视图就没有办法只能听从子视图的做法吗?...例如,自 SwiftUI 推出以来,我们第一次可以直接查询视图最小,理想和最大的尺寸,或者我们可以获得每个视图的布局优先级以及其他有趣的值。...SwiftUI 已经做了一些缓存。例如,从子视图代理获得的值会自动存储在缓存中。相同的参数的反复调用将会使用缓存结果。...那是因为视图会识别标识并且维护, SwiftUI 这个行为认为是视图的改变,而不是两个单独的视图

3.2K10

React核心成员表示:JSX就是个错误

这里我们可以发现,衡量一门DSL(领域相关语言)优劣的标准有三点: 是否能直观描述视图状态 是否有灵活的编程能力 原生支持还是需要编译 让我们按这三个维度权衡几种不同平台的DSL: HTML 视图描述能力...同时,SwiftUI凭借强大的编程能力,原生实现React当前并不支持的功能: ? 比如,在React中,子组件要改变组件的状态,需要组件「状态」与「改变状态的方法」传递给子组件。...子组件调用「改变状态的方法」通知组件状态变化,组件再传递变化后的「状态」给子组件。 这种方式在React中被称为「受控组件」。...在SwiftUI中,子组件只需要将组件传递的状态申明为@Binding,就能达到与组件该状态「双向绑定」的效果。...比如上例的counter: // 从 @State var counter = 0 // 变为 @Binding var counter 则计数器接受组件传递的counter状态,子组件counter

1.2K30

SwiftUI 布局 —— 尺寸( 上 )

淡化尺寸概念的初衷或许是出于以下两点: 引导开发者转型声明式编程逻辑,转变使用精准尺寸的习惯 掩盖 SwiftUI 中复杂的尺寸概念,减少初学者的困扰 但无论如何淡化或掩盖,当涉及更加高级、复杂、精准的布局时...经过该阶段的协商,SwiftUI 确定视图所在屏幕上的位置和尺寸。...第二阶段 —— 安置子民 在该阶段,视图根据 SwiftUI 布局系统提供的屏幕区域( 由第一阶段计算得出 )为子视图设置渲染的位置和尺寸( 上方的 5-6 )。...对于不包含子视图视图来说( 例如 Text 这类的元视图 ),它们同样会提供接口供视图来调用以向其传递建议尺寸并获取其需求尺寸。...// 代码来自 My_ZStackLayout // 容器的视图容器)通过调用容器的 sizeThatFits 获取容器的需求尺寸,本方法通常会被多次调用,并提供不同的建议尺寸 func sizeThatFits

4.6K20

SwiftUI 中布局的工作原理

SwiftUI 布局简介 ---- 在这个技术项目中,我们探讨 SwiftUI 如何处理布局。...SwiftUI 中布局的工作原理 ---- 所有的 SwiftUI 布局都有三个简单的步骤,理解这些步骤是每次获得优秀布局的关键。步骤如下: 视图提供一个大小并询问其子视图的大小。...在幕后,SwiftUI 执行第四步:尽管它将位置和大小存储为浮点数,但在渲染时,SwiftUI 会将所有像素舍入最接近的值,这样我们的图形仍然清晰。...嘿,SwiftUI:我需要X * Y像素。” SwiftUI:“好的。那么,这会留下很多空间,所以我会把你的尺寸放在中间。”(视图在其坐标空间中定位子视图。)...background(Color.red)),文本视图成为其背景的子视图。当涉及视图及其修改器时,SwiftUI有效地从下到上工作。

3.7K20

探讨 SwiftUI 中的几个关键属性包装器

在这篇文章中,我们探讨几个在 SwiftUI 开发中经常使用且至关重要的属性包装器。本文旨在提供对这些属性包装器的主要功能和使用注意事项的概述,而非详尽的使用指南。...它适用于需要在子视图中直接修改视图中的数据情况。 注意事项 应当谨慎使用 @Binding,当子视图只需响应数据变化而无需修改时,无需使用 @Binding。...相关内容请阅读:SwiftUI Binding Extensions[9]。 // 一个 Binding<V?...典型应用场景 通常与 @StateObject 配合使用,视图使用 @StateObject 创建实例,子视图通过 @ObservedObject 引入该实例,响应实例变化。...比如:PreferenceKey( 子视图传递视图 )、FocusedValueKey( 基于焦点传递的值 )、LayoutValueKey( 子视图传递给布局容器 )。

19210

Ask Apple 2022 与 SwiftUI 有关的问答(上)

只有这些变量重构视图模型中去这一种方式?A:如果在同一个视图中,有多个相互关联的 @State 属性,将他们提取到一个结构中或许是好的选择。...比如说我可以在视图中拥有 StateObject,并通过 EnvironmentObject 传递该对象。然而,如果里面的 @Published 属性改变了,视图和它的子树也都被重新计算。...对于苹果工程师给予的建议有一点请注意,那就是如果有在视图中修改该环境对象实例的需求,须确保视图不会被反复重构( SwiftUI 重新创建视图类型的实例 )。...事实上,这些视图( 惰性容器中的视图 )一旦被创建,其存续期持续惰性容器被销毁为止。请阅读 SwiftUI 视图的生命周期研究[12] 了解更多内容。...从父视图通过环境值进行传递应该可以满足提问者当前的需求:视图可以传入新值,当前视图也可以在视图范围内改变该值。总结我忽略掉了没有获得结论的问题。希望上述的整理能够对你有所帮助。

12.2K20

SwiftUI 布局协议 - Part2

开始的位置和结束的位置是一样的,因此就 SwiftUI 而言,没有动画。 如果这就是你要找的东西,那就太好了,但由于我们视图围绕一个圆圈放置,如果视图沿着那个假想的圆圈移动不是更有意义吗?...简单的说,通过添加 animatableData 属性到我们的布局,我们要求 SwiftUI 动画的每一帧重新计算布局。但是,在每个布局传递中,角度都会收到一个内插值。...过去我们在使用 GeometryReader 获取视图尺寸并传递视图的时候遇到过这个问题,然后父视图使用该信息去改变视图,即使用 GeometryReader 去再一次改变,然后我们就陷入了布局循环...在本例中,我创建了两个 UUID 布局值,一个标识视图,另一个作为视图的 ID。...这里应该只有一个节点是 nil 的节点(根结点),你应该小心的避免循环引用(例如:两个节点互为节点)。 同时也要注意,这里有一个好的选择,即放置具有垂直和水平的滚动 ScrollView 中。

2.7K30

SwiftUI 状态管理系统指南

值得庆幸的是,SwiftUI还提供了一些机制,使我们能够外部模型对象连接到我们的各种视图。...标记为StateObject的属性与ObservedObject的行为完全相同——此外,SwiftUI确保存储在此类属性中的任何对象不会因为框架在重新渲染视图时重新创建新实例而被意外释放: struct...观察和修改环境变量 最后,让我们来看看SwiftUI的环境系统如何被用来在两个互不直接连接的视图之间传递各种状态。...尽管在一个视图和它的一个子视图之间创建绑定通常很容易,但在整个视图层次结构中传递某个对象或值可能相当麻烦——而这正是环境变量旨在解决的问题类型。 有两种主要的方法来使用SwiftUI的环境。...小结 SwiftUI管理状态的方式绝对是该框架最有趣的方面之一,它可能需要我们稍微重新思考数据在应用中的传递方式——至少在涉及将被我们的UI直接消费和修改的数据时是这样。

5K20

SwiftUI 布局 —— 对齐

本文结合 Layout 协议的内容对 SwiftUI 的 “对齐” 进行梳理,希望能让读者对“对齐”有更加清晰地认识和掌握。...比如书桌上的一摞书摆放整齐,列队训练时向左(右)看齐等等。在 SwiftUI 中,对齐是指在布局容器中,多个视图按照对齐指南( Alignment Guide )进行对齐。...摆放结束后,容器汇总摆放后的所有子视图的情况并向它的视图容器 )返回一个自身的需求尺寸。...transformPoint(original: info.bounds.minY, offset: offsetY, targetBoundsMinX: bounds.minY) // 转换后的位置信息设置视图上...中一个用于调节尺寸的布局容器,它会变换容器传递给子视图的建议尺寸,也可能会改变子视图返回给容器的需求尺寸。

6.3K20

SwiftUI数据流之State&Binding

@Binding的作用是在保存状态的属性和更改数据的视图之间创建双向连接,当前属性连接到存储在别处的单一数据源(single source of truth),而不是直接存储数据。...通常使用场景是把当前View中的@State值类型传递给其子View,如果直接传递@State值类型,将会把值类型复制一份copy,那么如果子View中对值类型的某个属性进行修改,View不会得到变化...ProductsView,其中嵌套着子视图FilterView和列表元素,为了能够使得FilterView中对showFavorited的修改能够传递视图: 注释1,showFavorited使用@...State修饰 注释2,在body中通过$showFavorited获得showFavorited对应的Binding传递给子视图FilterView 注释3,子视图FilterView中定义了@Binding...,这里没有全部展示出来; 再点击一次Count+1按钮,count值变为2,user的地址持续保持不变,生命周期与视图保持一致。

4K30

聊一聊可组装框架( TCA )

本文聊聊一个与创建复杂的 SwiftUI 应用很契合的框架 —— The Composable Architecture( 可组装框架,简称 TCA )。...TCA 鼓励开发者大型功能分解成采用同样开发逻辑的小组件。每个小组件均可进行单元测试、视图预览乃至真机调试,并通过组件代码提取到独立模块的方式来进一步改善项目的编译速度。...IdentifiedArray 确保了组件中状态( State )中的某个序列属性切分成独立的子组件状态时的系统稳定性。避免出现因使用 index 修改元素而导致的异常甚至应用崩溃的情况。...builder[10] 重构了 Reducer 的组装机制,开发者采用与声明 SwiftUI 视图一样的方式来声明 Reducer,更加地简洁和直观。...由于调整了 Reducer 组装的构成角度,将从子 Reducer pullback 至 Reducer 的方式修改为从父 Reducer 上 scope 子 Reducer 的逻辑。

1.7K20

使用 SwiftUI 为 macOS 创建类似于 App Store Connect 的选择器

我希望构建类似于 App Store Connect 中的选择器组件,使用户体验尽可能熟悉,并在本文中,展示如何使用 SwiftUI 为 macOS 构建了这个组件。...创建选择器组件让我们分析一下,我们有一组想要在 SwiftUI 列表中显示的构建。每个构建都包含一组属性,其中之一是 betaGroups,它是一个表示构建所属测试群组的结构体数组。...menuStyle(.button) .buttonStyle(.plain) } } }}以上代码片段中涉及了很多内容,让我们来逐步分解:绑定构建中可用的测试群组数组...这是一个绑定,因为我们希望能够从内部视图修改它。所有可用于添加到构建中的测试群组的数组视图负责提供这些信息,正如我们将在下一节中看到的那样。一个状态属性,用于跟踪用户悬停的测试群组。...你只需要将视图上的 build 属性修改为一个绑定,并将可用的测试群组传递给组件。正如你所看到的,我们编写了一个自定义的初始化方法来过滤出任何已经属于构建的测试群组。

10610

StateObject 与 ObservedObject

视图的生存期从其被加载到视图树时开始,至其被从视图树上移走结束。在视图的存续期中,视图根据 source of truth ( 各种依赖源 )的变化而不断变化。...当视图加载到视图树时,SwiftUI 会根据当时采用的实例需要绑定的状态( @State、@StateObject、onReceive 等 )托管到 SwiftUI 的托管数据池中,之后无论实例再被创建多少次...在 SwiftUI 视图添加到视图树上时,调用 _makeProperty 方法需要持有的订阅关系、强引用等信息保存到 SwiftUI 内部的数据池中。...通过从父视图传递一个可以保证存续期长于当前视图存续期的可观察对象,从而避免不可控的情况发生避免创建 @StateObject var testObject:TestObject 这样的代码与 @ObservedObject...例如,在某些情况下,开发者需要视图不断地生成全新的可观察对象实例传递给子视图。但由于子视图中使用了 StateObject ,它只会保留首次传入的实例的强引用,后面传入的实例都将被忽略。

2.4K20

如何在 SwiftUI 视图中显示应用图标和版本

在本文中,我展示如何创建一个可访问的 SwiftUI 视图,既能显示应用图标和版本,又能在各种文本大小和外观下看起来都很好:获取应用图标构建视图的第一步是从主包中获取应用图标。...这是一个包含应用图标文件名的数组。这些文件名可用于创建命名的 UIImage。最后,我们检索 CFBundleIconFiles 数组中的最后一个值。...创建 SwiftUI 视图现在让我们所有内容结合起来,创建一个 SwiftUI 视图,显示应用图标和版本:AppVersionInformationView.swiftimport SwiftUIstruct...这些值通过我们之前创建的提供者传递视图。我们在一个水平堆栈中显示应用图标和版本,间距为12点。我们在 Image 视图中显示应用图标。...在获取到应用图标和版本信息后,我们创建了一个 SwiftUI 视图来展示这些信息。该视图使用水平堆栈(HStack)布局,应用图标和版本信息并排显示。

10500

SwiftUI 的动画机制

SwiftUI 采用了声明式语法来描述不同状态下的 UI 呈现,动画亦是如此。官方文档 SwiftUI 的动画(Animations)定义为:创建从一个状态另一个状态的平滑过渡。...视图和它子节点中的任何依赖项发生变化,都将满足启用动画插值计算的条件,并动画数据传递给作用范围内(视图和它子节点)的所有可动画部件。...状态、视图标识、动画 既然 SwiftUI 的动画是创建从一个状态另一个状态的平滑过渡,那么我们必须对状态(依赖项)的改变可能导致的结果有正确的认识。...这意味着,当数组中出现了两个同样的元素(点击添加按钮),SwiftUI 无法正确识别我们的意图 —— 究竟是想对那个元素(值相同意味着标识也相同)进行操作。...当修饰符 id 的值发生变化时,SwiftUI 将其作用的视图从当前的视图结构中移除,并创建新的视图添加到原先所在的视图层次位置。因此,可以影响它的动画部件也是 AnyTransaction 。

14.6K40
领券