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

如何在SwiftUI中为textField制作“编辑”按钮?

在SwiftUI中为textField制作“编辑”按钮,可以通过以下步骤实现:

  1. 创建一个布尔类型的状态变量,用于控制textField是否可编辑。例如,可以使用@State属性包装器来创建一个名为isEditing的状态变量,并将其初始值设置为false
代码语言:txt
复制
@State private var isEditing = false
  1. 在textField的外部创建一个按钮,用于切换编辑状态。可以使用Button视图来创建一个按钮,并在按钮的动作闭包中切换isEditing的值。
代码语言:txt
复制
Button(action: {
    isEditing.toggle()
}) {
    Text("编辑")
}
  1. 在textField的disabled修饰符中使用isEditing状态变量来控制是否可编辑。当isEditingtrue时,textField将可编辑;当isEditingfalse时,textField将不可编辑。
代码语言:txt
复制
TextField("输入文本", text: $text)
    .disabled(!isEditing)

完整的示例代码如下:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var isEditing = false
    @State private var text = ""

    var body: some View {
        VStack {
            TextField("输入文本", text: $text)
                .disabled(!isEditing)
                .padding()
            
            Button(action: {
                isEditing.toggle()
            }) {
                Text(isEditing ? "完成" : "编辑")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这样,当用户点击“编辑”按钮时,textField将变为可编辑状态,用户可以输入文本;当用户点击“完成”按钮时,textField将变为不可编辑状态,用户无法输入文本。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,无法提供相关链接。但是,腾讯云提供了一系列云计算服务,例如云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。

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

相关·内容

何在 SwiftUI 创建悬浮操作按钮

尽管它来自 Android,但在一些 iOS 应用也可以看到这种模式。以下是 Twitter 应用悬浮操作按钮的示例。Twitter App 在最重要的操作步骤,发布推文时使用悬浮操作按钮。...如下图,在右下角有一个蓝底中间有加号的按钮。下面我们就来详细介绍一下还如何实现这个悬浮按钮需求。创建悬浮操作按钮如何 SwiftUI 创建一个类似 Twitter App 的悬浮按钮。...添加阴影最后,是需要实现需求的第四步,使悬浮按钮带有一个轻微的阴影。我们通过添加阴影其增色,使其看起来像悬浮。...创建悬浮操作按钮所需的全部步骤。...总结在本文中,我们学习了如何在 SwiftUI 创建一个悬浮操作按钮,它是 Android 和 Material Design 中常用的 UI 元素。通过逐步实现悬浮按钮的各个特性来完成这个过程。

10832

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

Ask Apple 开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动SwiftUI 有关的一些问答进行了整理,并添加了一点个人见解。本文下篇。...Swiftcord[12] 的代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 显示大数据集的响应效率[13] 一文,了解苹果工程师推荐的方法。...将背景扩展到安全区域Q:如果我有一个自定义的容器类型,可以接受一个顶部和底部的视图,是否有办法让 API 的调用者将所提供的视图的背景扩展到安全区域内,同时将内容( 文本或按钮 )保留在安全区域内?...Text 与 TextField编辑模式下的切换Q:在 editMode 的文档建议,在非编辑模式下,可以选择将 Text 视图换成 TextField 。...我正以聊天室、Twitter、博客留言等讨论灵感,从中选取有代表性的问题和技巧制作成 Tips ,发布在 Twitter 上。

14.7K30

SwiftUI TextField进阶——格式与校验

SwiftUI TextField进阶——格式与校验 想获得更好的阅读体验,请访问我的博客 www.fatbobman.com[1] SwiftUITextField可能是开发者在应用程序中最常使用的文本录入组件了...本文SwiftUI 进阶】系列文章的一篇,在本文中,我将介绍如何在TextField实现如下功能: •屏蔽无效字符•判断录入的内容是否满足特定条件•对录入的文本实时格式化显示 textfieldDemo1...如何在TextField实现格式化显示 现有格式化方法 在SwiftUI 3.0TextField新增了使用新老两种Formatter的构造方法。...如何在TextField屏蔽无效字符 现有屏蔽字符方法 在SwiftUI,可以通过设置仅使用特定的键盘类型来实现一定程度上的录入限制。...如何在TextField检查内容是否符合指定条件 相较上述两个目标,在SwiftUI检查TextField内容是否符合指定条件是相当方便的。

8.1K20

SwiftUI 状态管理系统指南

前言 SwiftUI与苹果之前的UI框架的区别不仅仅在于如何定义视图和其他UI组件,还在于如何在整个使用它的应用程序管理视图层级的状态。...属性状态 由于SwiftUI主要是一个UI框架(尽管它也开始获得用于定义更高层次结构(应用程序和场景)的API),其声明式设计不一定需要影响应用程序的整个模型和数据层——而只是直接绑定到我们各种视图的状态...在我们的主体,我们将把这两个属性分别绑定到一个相应的TextField上,以使它们可以被用户编辑: struct SignupView: View { var handler: (User)...) } } } } 请注意,我们也可以通过给一个State包装的属性分配一个新的值来改变它——比如我们在 "Done "按钮的动作处理程序把...isEditingViewShown设置false。

5K20

SwiftUI TextField 进阶 —— 事件、焦点、键盘

事件 onEditingChanged 当 TextField 获得焦点时(进入可编辑状态),onEditingChanged将调用给定的方法并传递true值;当 TextField 失去焦点时,再次调用方法并传递...在 SwiftUI 3.0 ,苹果开发者提供了一个远好于预期的解决方案,同 onSubmit 类似,可以从更高的视图层次来统一对视图中的 TextField 进行焦点的判断和管理。...在 SwiftUI 3.0 之前,我们必须在主视图上另外绘制或者使用非 SwiftUI 的方式来解决问题,在 SwiftUI 3.0 ,由于添加了原生设置键盘辅助视图(下文具体介绍)的功能,解决上述问题将不再困难...同其他类型的 Toolbar 类似,SwiftUI 会干预内容的排版。•无法对同一视图中多个 TextField 分别设定辅助视图在 ToolbarItem 无法使用稍微复杂一点的判断语法。...自定义 SubmitLabel 默认情况下,TextField(SecureField)在键盘上对应的 submit 行为按钮return,通过使用 SwiftUI 3.0 中新增了submitLabel

13.1K10

SwiftUI中使用UIKit视图

SwiftUI中使用UIKit视图 想获得更好的阅读体验可以访问我的博客www.fatbobman.com,或点击下方的阅读原文 已迈入第三个年头的SwiftUI相较诞生初始已经提供了更多的原生功能...在相当长的时间中开发者仍需在SwiftUI依赖UIKit(AppKit)代码。好在,SwiftUI开发者提供了便捷的方式将UIKit(AppKit)视图(或控制器)包装成SwiftUI视图。...本文将通过对UITextField的包装来讲解以下几点: •如何在SwiftUI中使用UIKit视图•如何让你的UIKit包装视图具有SwiftUI风格•在SwiftUI使用UIKit视图需要注意的地方...在SwiftUI,开发者视图创建描述,而并不实际渲染它们。...Introspect for SwiftUI 在版本2代码,我们TextFieldWrapper添加了clearButtonMode的设置,也是我们唯一增加的目前TextField尚不支持的设定。

8.1K20

架构之路 (五) —— VIPER架构模式(一)

开始 首先看下主要内容: 在本教程,您将了解如何在SwiftUI和Combine中使用VIPER体系结构模式,同时构建一个允许用户创建公路旅行的iOS应用程序,来自翻译。...然后,在TripDetailPresenter,将其内容设置: import SwiftUI import Combine class TripDetailPresenter: ObservableObject...当您将其放置在NavigationView时,该链接将成为一个按钮,将destination推送到导航堆栈上。 content块可以是任何一个SwiftUI视图。...导航栏修饰符使用presenter发布的tripName来定义标题,因此当用户键入时,它就会更新,而保存按钮则会保存任何更改。 构建并运行,现在,您可以编辑trip标题。...使用presenter向列表添加新路径点的add按钮。 一个列表List,它使用ForEach与presenter每个路点创建一个单元格。

17.4K10

掌握 SwiftUI 的 Safe Area

在 UIKit ,开发者需要利用 safeAreaInsets 或 safeAreaLayoutGuide ,才能确保将视图放置在界面的可见部分。 SwiftUI 对上述过程进行了彻底的简化。...SwiftUI 同时提供了一些方法和工具让开发者对安全区域有所控制。 本文将探讨如何在 SwiftUI 获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图的安全区域等内容。...在 SwiftUI ,开发者通常只有在需要获取 StatusBar + NavBar 的高度或 HomeIndeicator + TabBar 的高度时才会使用到 safeAreaInsets 。...•all(默认)上述两种安全区域划分的合集 iOS 13 并没有提供键盘自动避让功能,开发者需要编写一些额外的代码来解决软键盘不恰当遮盖视图( TextField )的问题。...尽管使用 safeAreaInset 列表在底部添加状态栏或自定义 TabBar 非常方便,但如果你的列表中使用了 TextField,情况将变得很麻烦。

7.5K31

在 Text 实现基于关键字的搜索和定位

image-20220822161247454点击切换按钮定位到对应的搜索结果 TranscriptionRow 视图添加显式标识符,并通过 ScrollViewProxy 滚动到指定的位置。...因此,在本例,我们舍弃了通过构造参数 TranscriptionRow 传递搜索结果的方式,采用了在 TranscriptionRow 引入符合 DynamicProperty 协议的 Source...阅读 SwiftUI TextField 进阶 —— 事件、焦点、键盘[12] 一文,了解更多有关焦点的内容@FocusState private var focused: BoolTextField(...从本周开始我将以聊天室、Twitter、博客留言等讨论灵感,从中选取有代表性的问题和技巧制作成 Tips ,发布在 Twitter 上。.../[11] 掌握 SwiftUI 的 Safe Area: https://www.fatbobman.com/posts/safeArea/[12] SwiftUI TextField 进阶 —— 事件

4.2K30

SwiftU:将状态绑定到UI控件

SwiftUI的@State属性包装器允许我们自由修改视图结构体,这意味着当程序更改时,我们可以更新视图属性以匹配。 但是,使用UI控件时,事情会更复杂一些。...例如,如果要创建用户可以键入的可编辑文本框,可以创建如下所示的快速用户界面视图: struct ContentView: View { var body: some View {...但是,该代码不会编译,因为SwiftUI想知道文本字段的文本存储位置。 请记住,视图是其状态的函数——文本输入框只能在反映存储在程序的值时显示某些内容。...SwiftUI需要的是结构的一个字符串属性,它可以显示在文本输入框,还将存储用户在文本输入框中键入的任何内容。...", text: $name) Text("Hello World") } } } 现在试着运行这个代码——你应该发现你可以点击文本字段并输入你的名字,预期的那样

2.9K10

5 分钟,带你快速撸一个 iOS App

PS:Swift 相比 OC,语法更加简洁明了 最后,新创建的项目指定 Sign 签名 这部分如果有疑惑,可以点击文末的阅读原文去了解 3....常见的 3 种布局方式 VStack、HStack、ZStack,它们分别代表垂直布局、水平布局、深度布局 import SwiftUI import Combine struct ContentView...alignment: HorizontalAlignment.center){ ... } } } 然后,子元素依次添加一张本地图片、两个输入框、一个选择框、一个按钮...其中, 图片控件 Image 文本输入框控件 TextField 选择框控件 Toggle 按钮控件 Button import SwiftUI import Combine struct ContentView...最后 文章通过一个简单的例子描述了开发一个 iOS 原生应用的详细步骤;实际应用,可以结合具体的场景去定制开发不同的功能模块

88140

了解 SwiftUI 的 onChange

了解 SwiftUI 的 onChange 请访问我的博客 www.fatbobman.com[1] 获得更好的阅读体验 从 iOS 14 开始,SwiftUI 视图提供了 onChange 修饰器,...在上节的例子,尽管 Store 的 date 每三秒会发生一次改变,但并不会引起视图的重新绘制。通过点击按钮强制重绘视图,onChange 才会被触发。...因此我们需要尽量避免在 onChange 对被观察值进行修改,确有必要,请使用条件判断语句来限制更改次数,保证程序按预期执行。...task(id:) SwiftUI 3.0 中新增了 task 修饰器,task 将在视图出现时以异步的方式运行闭包的内容,同时在 id 值发生变化时,重启任务。...本例,task 的闭包的任务将不断运行,Text 的内容也将不断变化(如果将 task 换成 onChange 则会被 SwiftUI 自动中断)。

2.8K20

TCA - SwiftUI 的救星?(二)

SwiftUI ,我们几乎可以在所有既表示状态,又能接受输入的控件上找到这种模式,比如 TextField 接受 String 的绑定 Binding,Toggle 接受 Bool...对于绑定,TCA View Store 添加了将状态转换为一种“特殊绑定关系”的方法。我们来试试看把 Counter 例子的显示数字的 Text 改成可以接受直接输入的 TextField。...传统的 SwiftUI ,我们在通过 $ 符号获取一个状态的 Binding 时,实际上是调用了它的 projectedValue。...我们来试试看把 Reset 按钮改成 New Game 按钮。...特别感谢 Swift社区 编辑部的每一位编辑,感谢大家的辛苦付出, Swift社区 提供优质内容, Swift 语言的发展贡献自己的力量,排名不分先后:张安宇@微软、戴铭@快手、展菲@ESP、倪瑶@

1.2K50

SwiftUI 视图中打开 URL 的若干方法

image-20220520182722773 SwiftUI 1.0( iOS 13、Catalina ) 在视图中,开发者通常需要处理两种不同的打开 URL 的情况: 点击一个按钮( 或类似的部件...SwiftUI 2.0( iOS 14、Big sur ) SwiftUI 2.0 第一个场景提供了相当完美的原生方案,但仍无法通过原生的方式来处理第二种场景。...通过在 AttributedString 不同位置的文字设置不同的属性,从而实现在 Text 打开 URL 的功能。...NSDataDetector[5] 是 NSRegularExpression 的子类,它可以检测自然语言文本的半结构化信息,日期、地址、链接、电话号码、交通信息等内容,它被广泛应用于苹果提供的各种系统应用...在 SwiftUI ,采用类似逻辑的还有 onSubmit ,有关 onSubmit 的信息,请参阅 SwiftUI TextField 进阶 —— 事件、焦点、键盘[6]。

7.6K31

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

Ask Apple 开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动SwiftUI 有关的一些问答进行了整理,并添加了一点个人见解。本文上篇。...创建与 IM 应用类似的底部文字输入栏Q:你好,我的问题是关于 TextField 的。...阅读 SwiftUI 的动画机制[8] 一文,了解更多有关动画的内容。自适应高度 SheetQ:如何在 iOS16 呈现与动态内容高度相匹配的 Sheet?...image-20221022135326560San Francisco 宽度风格Q:如何在 SwiftUI 如何使用 SF 字体家族新增的三种宽度风格( Compressed、Condensed、Expanded...我正以聊天室、Twitter、博客留言等讨论灵感,从中选取有代表性的问题和技巧制作成 Tips ,发布在 Twitter 上。

12.2K20

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

在这篇文章,我们将探讨几个在 SwiftUI 开发中经常使用且至关重要的属性包装器。本文旨在提供对这些属性包装器的主要功能和使用注意事项的概述,而非详尽的使用指南。...@State @State 是 SwiftUI 中最常用的属性包装器之一,主要用于在视图内部管理私有数据。它特别适合存储值类型数据,字符串、整数、枚举或结构体实例。...典型应用场景 @Binding 主要用于与支持双向数据绑定的 UI 组件,TextField、Stepper、Sheet 和 Slider 等配合使用。...$0 { value.wrappedValue = nil } } ) } } 在 Observation 框架,可以使用 @Bindable @...引入 @StateObject 意味着所有相关操作都在主线程上进行( SwiftUI 会隐式视图添加 @MainActor),包括异步操作。应将需要在非主线程上运行的代码应该从视图代码剥离。

20210

WWDC 23 之后的 SwiftUI 有哪些新功能

前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 数据流、动画、ScrollView、搜索、新手势等功能的新变化。...在之前的 SwiftUI 框架版本,应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了,因为 SwiftUI 视图会自动跟踪符合 Observable 协议的类型的更改。...动画 动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 轻松实现任何动画,但之前的框架版本缺少一些现在具有的功能。...#Preview { ContentView() } 还有一个新的 Preview 宏,可以让我们轻松地 UIKit 和 SwiftUI 构建预览,只需几行代码。...特别感谢 Swift社区 编辑部的每一位编辑,感谢大家的辛苦付出, Swift社区 提供优质内容, Swift 语言的发展贡献自己的力量。 - EOF -

32820

我庆幸果断放弃了SwiftUI:它还不够成熟

但美好的甜蜜期很快过去,接下来我就要说道说道 SwiftUI 的那些“坏毛病”了。 实时检查器不好用 接下来,我开始了 SwiftUI 探索之旅的第二站——地图编辑器创建实时检查器。...但这会导致检查器的值出现延迟,因此在地图编辑器的交互过程(比如使用移动工具时)结果不准确,所以效果还是称不上完美。 但我觉得这可能只是个独立问题,并不能因此把 SwiftUI 一棒子打死。...越来越慢 在实现了第一个检查器之后,我开始研究另一个主题:Sprite 资产编辑器。利用这款工具,我可以用多个 sprite 拼接成复杂的资产,再最终它们制作动画。...大家所见,这是个复杂的窗口,包含多种不同上下文(上方的「Sprite 资产数据库」列表,左侧的特定「Sprite 资产数据库」内容,以及其他与选定 Sprite 资产对应的编辑器元素)。...但上图展示的效果其实是在 AppKit 完成的,因为我在 SwiftUI 一直实现不了预期的功能。大家应该注意到了,中间的 SpriteKit 视图上有三个按钮(分别是 +、200% 和 -)。

4.9K20
领券