开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

手表上SwiftUI按钮中奇怪的内部视图

基础概念

SwiftUI 是苹果公司推出的一个声明式 UI 框架，用于构建 iOS、macOS、watchOS 和 tvOS 应用程序的用户界面。SwiftUI 通过简洁的语法和强大的功能，使得开发者能够轻松地创建复杂的用户界面。

相关优势

声明式编程：SwiftUI 使用声明式语法，开发者只需描述 UI 应该是什么样子，而不是如何实现。
跨平台：SwiftUI 可以在多个平台上使用，包括 iOS、macOS、watchOS 和 tvOS。
性能优化：SwiftUI 通过自动布局和渲染优化，提供了高效的性能。
集成开发环境（IDE）支持：Xcode 提供了强大的工具支持，包括实时预览和代码补全。

类型

SwiftUI 中的按钮有多种类型，包括：

Text Button：简单的文本按钮。
Image Button：带有图像的按钮。
Text Field Button：带有文本输入框的按钮。
Custom Button：自定义样式的按钮。

应用场景

SwiftUI 按钮广泛应用于各种用户界面场景，例如：

应用程序的主页按钮。
设置页面中的选项按钮。
数据输入表单中的提交按钮。

问题及解决方法

在手表上使用 SwiftUI 按钮时，可能会遇到奇怪的内部视图问题。这通常是由于布局或样式设置不当引起的。以下是一些常见问题和解决方法：

问题1：按钮内部视图显示不正确

原因：可能是由于布局约束或样式设置不正确。

解决方法：

struct ContentView: View {
    var body: some View {
        Button(action: {
            // 按钮点击事件
        }) {
            Text("Click Me")
                .foregroundColor(.white)
                .padding()
                .background(Color.blue)
                .cornerRadius(10)
        }
        .frame(width: 100, height: 50)
    }
}

问题2：按钮内部视图重叠

原因：可能是由于视图层次结构或布局约束不正确。

解决方法：

struct ContentView: View {
    var body: some View {
        ZStack {
            Button(action: {
                // 按钮点击事件
            }) {
                Text("Click Me")
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.blue)
                    .cornerRadius(10)
            }
            .frame(width: 100, height: 50)
        }
    }
}

问题3：按钮内部视图显示空白

原因：可能是由于视图未正确添加到父视图中。

解决方法：

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                // 按钮点击事件
            }) {
                Text("Click Me")
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.blue)
                    .cornerRadius(10)
            }
            .frame(width: 100, height: 50)
        }
    }
}

参考链接

通过以上方法和示例代码，您可以解决手表上 SwiftUI 按钮中奇怪的内部视图问题。

相关搜索:SwiftUI的NavigationView没有苹果手表上的后退按钮列表中奇怪的按钮行为(SwiftUI)SwiftUI:切换和按钮的奇怪错误按钮不更改SwiftUI中的视图当出现在ZStack内部时，SwiftUI动画视图出现奇怪的过渡如何通过单击SwiftUI中的按钮进入视图 iPad上奇怪的SwiftUI选项卡如何根据SwiftUI中其他视图的按钮单击来更新视图 watchOS上的SwiftUI按钮高度在SwiftUI中，视图不会在ForEach内部更新 SwiftUI视图TextField上的Binding<String?>UICollectionViewCell中的SwiftUI视图 SwiftUI中的网格视图当它在移动视图中时，奇怪的ScrollView行为。SwiftUI SwiftUI -如何检测按钮上的长按？在tvOS上的SwiftUI中更改按钮的颜色 SwiftUI:表单中的按钮 NavigationLink中的SwiftUI按钮从UIViewControllerRepresentable中按下的按钮导航到SwiftUI视图在按下按钮时显示新的SwiftUI视图

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在 SwiftUI 中 accessibilityChildren 视图修饰符的作用

前言SwiftUI 为我们提供了一系列丰富的视图修饰符，用于操作视图的可访问性树。我已经介绍了其中许多，你可以在博客中找到它们。...accessibilityChildren 视图修饰符允许我们为视图创建一个可访问性容器，并使用 ViewBuilder 闭包提供的视图元素进行填充。示例让我们来看一个简单的示例。...SwiftUI 不会渲染我们通过 ViewBuilder 闭包传递的视图，它仅用于填充可访问性树的子元素。...在上述代码中，将柱状图填充颜色设为红色。您可以根据需要自行更改填充颜色。运行截图：总结今天，我们了解了 SwiftUI 为我们提供的又一个强大的可访问性视图修饰符。...SwiftUI 凭借提供如此多友好的 API，简化了我们为了使我们的应用对每个人都具有可访问性而必须做的工作，做得非常出色。

1192 0

在 SwiftUI 中实现视图居中的若干种方法

欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图中居中显示是一个常见的需求，即使对于 SwiftUI 的初学者来说这也并非难事。...在 SwiftUI 中，有很多手段可以达成此目的。本文将介绍其中的一些方法，并对每种方法背后的实现原理、适用场景以及注意事项做以说明。...().fill(.clear)在使用 SwiftUI 进行开发的过程中，Color、Rectangle 等经常被用来实现对容器的等分操作。...我为本文这种通过多种方法来解决一个问题的方式添加了【小题大作】标签，目前使用该便签的文章还有：在 Core Data 中查询和使用 count 的若干方法[6]、在 SwiftUI 视图中打开 URL...每周也会对当周博客上的新文章以及在 Twitter 上发布的 Tips 进行汇总，并通过邮件列表的形式发送给订阅者。订阅下方的邮件列表[10]，可以及时获得每周的 Tips 汇总。

6.8K4 0

一段因 @State 注入机制所产生的“灵异代码”

问题构成尽管看起来有些奇怪，但 Text 的添加与否，确实将影响 Sheet 视图中的显示内容。...也就是说 Sheet 中的视图与原有视图分别处于不同的上下文中。在 SwiftUI 早期的版本中，对于分别位于不同上下文的独立的视图树，开发者需要显式为 Sheet 视图树注入环境依赖。...现象分析根据上文中介绍的内容，我们对本文代码的奇怪现象进行一个完整的梳理：当 ContextView 中不包含 Text（ ContextView 没有与 n 创建关联）程序运行，SwiftUI 对...Sheet 中的 Text 显示 n = 1点击 Sheet 中的 Close 按钮，执行 Button 闭包，重新获得 n 的当前值（ n = 2 ），打印值为 2当 ContextView 中包含...事实上，使用 @StateObject 相当于在 vm.n 发生变化后，强制视图重新计算。

1.9K2 0

SwiftUI数据流之State&Binding

在SwiftUI中，以单一数据源（single source of truth）为核心，构建了数据驱动状态更新的机制。...@State检测的是值类型值类型仅有独立的拥有者，而class类型可以多个指向一个；对于两个SwiftUI View而言，即使发送给他们两个相同的struct对象，事实上他们每个View都得到了一份独立的...self，那么SwiftUI中前面示例的body属性可否添加呢？...，User init执行，ContentView init执行，然后打印出了当前结构体的地址和_user内部结构下一步，由于body执行完毕，页面渲染完整，现在点击Count+1按钮，断点停在47行...，这里没有全部展示出来；再点击一次Count+1按钮，count值变为2，user的地址将持续保持不变，生命周期与视图保持一致。

4.1K3 0

避免 SwiftUI 视图的重复计算

如果视图响应了不该响应的状态，或者视图的状态中包含了不该包含的成员，都可能造成 SwiftUI 对该视图进行不必要的更新（重复计算），当类似情况集中出现，将直接影响应用的交互响应，并产生卡顿的状况。...并且 SwiftUI 会在其变化时自动更新（重新计算）对应的视图。 SwiftUI 上有一个困扰了不少人的问题：为什么无法在视图的构造函数中，更改 State 包装的变量值？...在点击 random age 按钮修改 age 属性后，尽管 StudentNameView 中并没有使用 age 属性，但 SwiftUI 仍然对 StudentNameView 和 StudentAgeView...图片这是因为，乍看起来，我们并没有在 CellView 中引入会导致更新的 Source of Truth，但由于我们将 store 放置在闭包当中，点击按钮后，因为 store 发生了变动，从而导致...会在主线程上运行触发器闭包，如果闭包中的操作比较昂贵，可以考虑将闭包发送到后台队列总结本文介绍了一些在 SwiftUI 中如何避免造成视图重复计算的技巧，除了从中查找是否有能解决你当前问题的方法外

9.3K8 1

解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

本文将解析 SwiftUI 中两个由于未能贯彻响应式编程原则而导致的严重错误，并提供相应的解决方案。...原文发表在我的博客肘子的Swift记事本视图变化在前、状态变化在后在 SwiftUI 中，某些可编程控件在执行一定的操作时，会先更新视图，待视图变化完成后再修改与其对应的状态。...运行下面的代码，点击左上方的返回按钮，与 NavigationStack 绑定的 path，直到视图返回上一层后，才会发生改变。通过环境值返回上层视图也同样需要等待视图返回后，才会修改状态。...它的复现条件非常简单：在真机上测试（模拟器上不容易复现）点击 “GO” 按钮进入下一层视图点击 “Show Sheet” 按钮弹出 Sheet通过下滑手势取消 Sheet在 Sheet 取消后（动画结束时...它的复现条件如下：iOS 16 系统，在真机或模拟器上测试点击视图列表中的按钮，可以进入下一级视图。

70711 0

SwiftUI - 百行代码变十行，Swift再创辉煌

而对于开发者来说，新发布的 SwiftUI 可能是最吸引人的特性，在苹果公司软件工程高级副总裁Craig Federighi的演示中，我们可以轻松地把一百行的前端代码缩减到十几行。...不仅是用户代码，UIKit本身内部也经常受困于可变状态，各种奇怪的 bug 也频频出现。...当在设计工具中工作时，所编辑的内容会立刻反映到代码上，如果从模拟器切换到手机，手机也能立马看到预览效果。 ?...// SwiftUI 示例代码 // 为视图的任何状态声明内容和布局。SwiftUI知道该状态何时发生变化，并更新视图的呈现以匹配该状态。...构建可复用的组件将小的、单一职责的视图组合成更大、更复杂的接口。在为任何苹果平台设计的应用程序之间共享自定义视图。

3K4 0

在 SwiftUI 中的作用域动画

前言从一开始，动画就是 SwiftUI 最强大的功能之一。你可以在 SwiftUI 中快速构建流畅的动画。...简单示例让我们从一个简单的示例开始，展示我们旧方法的一些缺点，这些方法用于在 SwiftUI 中驱动动画。...我们将动画视图修饰符附加到整个堆栈，以动画堆栈内的任何更改。当我们按下按钮时，堆栈会动画显示内部的任何更改。...0 : 20.0) } } }}正如你所看到的，SwiftUI 提供了一种类似的方法，以在视图层次结构中维护有作用域的事务。...总结这篇文章介绍了在SwiftUI中构建动画的新方法，重点解决了在多步动画或特定视图层次结构中控制动画的挑战。

1721 0

干货 | 关于SwiftUI，看这一篇就够了

@State内部是在Get的时候建立数据源与视图的关系，并且返回当前的数据引用，使视图能够获取，在Set方法中会监听数据发生变化、会通知SwiftUI重新获取视图body，再通过Function Builders...SwiftUI内部按上述所说的逻辑，判断对应视图是否需要更新UI，最终再次呈现给用户，等待交互；以上就是SwiftUI的交互流程，其每一个节点之间的数据流转都是单向、独立的，无论应用程序的逻辑变得多么复杂...三、Components 本节通过DSL视图的分析，分析SwfitUI在布局上的特点，以及利用该特点在组件化过程中的优势。...通过该结构发现，与UIKit的布局结构有很大的不同，像按钮的一些属性background、padding、cornerRadius等不应该出现在视图主结构中，应该出现在Button视图的结构中。...同时SwiftUI中也是支持frame设定，但也不会像UIKit中那样作用于当前元素，在内部也是形成一个虚拟的View来承载frame设定，在布局过程中进行frame计算最终显示出想要的结果。

9.1K1 1

SwiftUI - 百行代码变十行，Swift再创辉煌

而对于开发者来说，新发布的 SwiftUI 可能是最吸引人的特性，在苹果公司软件工程高级副总裁Craig Federighi的演示中，我们可以轻松地把一百行的前端代码缩减到十几行。...不仅是用户代码，UIKit本身内部也经常受困于可变状态，各种奇怪的 bug 也频频出现。...拥有更直观的新设计工具 Xcode 11 包含更直观的新设计工具，可让开发者通过拖拽的方式使用 SwiftUI 构建界面，在这过程中可以直接设置控件的相关属性。...当在设计工具中工作时，所编辑的内容会立刻反映到代码上，如果从模拟器切换到手机，手机也能立马看到预览效果。...[1240] SwiftUI 示例代码为视图的任何状态声明内容和布局。SwiftUI知道该状态何时发生变化，并更新视图的呈现以匹配该状态。

2.3K3 0

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

他发表了一篇博客，总结了尝试并放弃 SwiftUI 的过程，这篇文章在 Hacker News 上引发了开发者们的大量讨论： “恕我直言，SwiftUI 是一个很好的机会，但苹果公司对它投资不足。...这是个宝贵的机会，能让我认真体验一把 SwiftUI 并探索其内部工作原理。起初项目工作良好，我对 SwiftUI 的表现可以说非常满意，我甚至创建了自己的修改器，以便更轻松地显示警报消息。...但每当 SwiftUI 更新检查器视图时（这种更新可能出现在移动过程中，甚至是在输入文本字段的时候），渲染速率都会下降到每秒 10 到 15 帧，而且相当不稳定。这显然让人无法容忍。...但上图展示的效果其实是在 AppKit 中完成的，因为我在 SwiftUI 一直实现不了预期的功能。大家应该注意到了，中间的 SpriteKit 视图上有三个按钮（分别是 +、200% 和 -）。...这些按钮只跟管理 SpriteKit 视图缩放的 @State 相关联。尽管几乎不涉及任何其他数据，在界面更新前单击这些按钮，也会产生将近一秒钟的巨大延迟。

5K2 0

解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

本文将解析 SwiftUI 中两个由于未能贯彻响应式编程原则而导致的严重错误，并提供相应的解决方案。...视图变化在前、状态变化在后在 SwiftUI 中，某些可编程控件在执行一定的操作时，会先更新视图，待视图变化完成后再修改与其对应的状态。这些控件基本上都是对 UIkit（AppKit）的二次包装。...运行下面的代码，点击左上方的返回按钮，与 NavigationStack 绑定的 path，直到视图返回上一层后，才会发生改变。通过环境值返回上层视图也同样需要等待视图返回后，才会修改状态。...它的复现条件非常简单：在真机上测试（模拟器上不容易复现）点击 “GO” 按钮进入下一层视图点击 “Show Sheet” 按钮弹出 Sheet 通过下滑手势取消 Sheet 在 Sheet 取消后...它的复现条件如下： iOS 16 系统，在真机或模拟器上测试点击视图列表中的按钮，可以进入下一级视图。

3472 0

为什么 SwiftUI 的修饰符顺序很重要

每当我们将修饰符应用于 SwiftUI 视图时，我们实际上都会创建一个，应用了更改的新视图 —— 我们不仅仅是修改现有的视图。...我们将在下一章中查看为什么会发生这种情况，但是首先，我想看看这种行为的实际含义。...如果思考一下修饰符的工作原理，您就可以了解为什么会如此：每个修饰符都会创建一个，应用了该修饰符的新结构体，而不是在视图上设置属性。您可以通过查询视图主体的类型来窥视 SwiftUI 的底层。...当然，这不是 SwiftUI 实际上的工作方式，因为如果这样做，那将是性能上的噩梦，但这是学习的时候可以使用的一种简洁的思维捷径。...使用修饰符的一个重要副作用是，我们可以多次应用相同的效果：每个修饰符都会简单地添加到以前的内容中。

2.3K2 0

SwiftUI 中的内容边距

在 iPhone 上可能看起来很好，但是在 iPad 上，它看起来非常奇怪，因为它将所有文本放在了前导边缘，并保持屏幕中央为空白。...不幸的是，我们在 SwiftUI 中无法访问 readableContentGuide。...你可以在 Playground 中运行此代码以查看结果。总结本文介绍了 SwiftUI 中的内容边距管理，通过对比安全区域的概念，解释了内容边距的重要性。...随后，通过介绍 UIKit 中的 readableContentGuide 布局指南以及 SwiftUI 中的 safeAreaPadding 视图修饰符，展示了在 iPad 上适配内容边距的方法。...最后，引入了 contentMargins 视图修饰符，并详细解释了其用法和参数，以及如何使用它来管理内容边距。通过本文，读者可以更好地理解并掌握 SwiftUI 中内容边距的管理技巧。

1763 2

AVKit框架详细解析（四） —— 基于AVKit 和 AVFoundation框架的视频流App的构建

3） VideoPlayer 是一个方便的 SwiftUI 视图，需要播放器对象才能发挥作用。您可以使用它来播放视频。 4）默认情况下，SwiftUI 视图考虑设备的安全区域。...这包括一个播放按钮、一个静音按钮和用于前进和后退的 15 秒跳过按钮。 2. Adding Remote Playback 那很容易，对吧？如何从远程 URL 添加视频播放？那一定要难很多！...UIView 只是 CALayer 的包装器。它提供触摸处理和辅助功能，但不是子类。相反，它拥有并管理底层图层属性。一个绝妙的技巧是，您实际上可以指定您希望视图子类拥有的图层类型。...当谈到“跟踪”播放器的信息时，唯一的途径就是使用键值观察（KVO）。是的，这是 Apple 提出的最奇怪的 API 之一。如果你小心，它是一种实时观察和响应状态变化的强大方法。...您会在左上角看到画中画按钮……否则不会！缺点是，在撰写本文时，iOS 14.5是可用的最新版本，VideoPlayer 的 SwiftUI 视图未显示画中画按钮。

7K1 0

Ask Apple 2022 与 SwiftUI 有关的问答（下）

在更复杂的 UI 中，由于视图的更新速度过快，性能（至少在 macOS 上）迅速下降。A：有不同的策略。ObservableObject 是使视图或视图层次结构的失效（引发重新计算）的单元。...，只提取你需要的属性，并依靠 SwiftUI 的 equality 检查来提前中止无效计算苹果工程师给出的答案与避免 SwiftUI 视图的重复计算[5] 一文中的很多建议都一致。...开发者即使无法实现这样的布局容器，也应对各种尺寸需求的定义有清晰的理解。在 SwiftUI 布局 —— 尺寸（上）[8] 一文中，对建议尺寸的几种模式都进行了介绍。...将背景扩展到安全区域Q：如果我有一个自定义的容器类型，可以接受一个顶部和底部的视图，是否有办法让 API 的调用者将所提供的视图的背景扩展到安全区域内，同时将内容（如文本或按钮）保留在安全区域内？...这是一个在多个版本中都出现过的奇怪问题。在 SwiftUI 早期版本中，当在 iOS 中使用系统中文输入法时，很容易触发这种情况。但后期逐步得到了修复。

14.8K3 0

为什么SwiftUI修饰符顺序很重要？

每当我们将修饰符应用于SwiftUI视图时，我们实际上都会创建一个应用了更改的新视图——我们不仅会修改现有的视图。...我们将在下一章中查看为什么会发生这种情况，但是首先，我想看看这种行为的实际含义。...如果思考一下修饰符的工作原理，您就可以了解为什么会如此：每个修饰符都会创建一个应用了该修饰符的新结构体，而不是在视图上设置属性。您可以通过查询视图主体的类型来窥视SwiftUI的底层。...在外部，我们有了ModifiedContent，它使用了我们的第一个视图（按钮+背景色），并为其提供了Frame。...如果您之后再扩展Frame，它将不会神奇地重绘已经应用了的背景。使用修饰符的一个重要副作用是，我们可以多次应用相同的效果：每个修饰符都会简单地添加到以前的内容中。

2.4K1 0

苹果全新UI框架来了！可视化编程，自动化减少20%代码量

一致性：这意味着Swift和Objective-C之间不会再看到奇怪的错误，或者非常旧的API与新API的混合简洁：可以节省10%-20%的代码量如果你刚刚接触SwiftUI，刚开始你可能需要适应一下...而SwiftUI通过4种方式，解决了上述问题：用一个新的声明式UI结构，定义了的布局的外观和工作方式更新UI预览会自动生成新的Swift代码，反之，更改Swift代码也会更新UI预览 Swift中的任何绑定例如有效的...让Xcode for iPad更上一层楼开发者对Interface Builder的抱怨不是一天两天了，它大大增加了分解视图块以及从视图控制器（view controller）使用视图的工作量，导致出现体积臃肿的视图控制器...此前，无论什么尺寸屏幕的iPad，总是很难将Interface Builder的大小放到iOS上。而拥有更简单，更快速，更安全的SwiftUI为开发人员实现真正的平台独立性迈出了一大步。...感受一下SwiftUI的代码风格 ? Github一个repo整理了在WWDC 2019发布的SwiftUI布局框架的一些官方示例： SwiftUI Essentials 创建和组合视图： ?

5.4K2 0

在SwiftUI中使用UIKit视图

在相当长的时间中开发者仍需在SwiftUI中依赖UIKit（AppKit）代码。好在，SwiftUI为开发者提供了便捷的方式将UIKit（AppKit）视图（或控制器）包装成SwiftUI视图。...生命周期 SwiftUI同UIKit和AppKit的主要区别之一是，SwiftUI的视图（View）是值类型，并不是对屏幕上绘制内容的具体引用。...内部的结构和实现逻辑都一致。...不过由于UIViewRepresentable的特殊的用途，其内部的生命周期又同标准的SwiftUI视图有所不同。...在协调器中，我们可以通过双向绑定（Binding），通知中心（notificationCenter）或其他例如Redux模式的单项数据流等方式，将UIKit视图内部的状态报告给SwiftUI框架或其他需要的模块

8.2K2 2

SwiftUI 与前端框架（如 React）中的状态管理对比

@Binding 允许 ChildView 修改父视图 ParentView 中的 count。...SwiftUI 中的应用与挑战状态管理简化：SwiftUI 的 @State 和 @EnvironmentObject 使得状态管理变得直观。...复杂的状态依赖：在大型应用中，多个视图可能依赖于同一状态，如何有效管理这些依赖并确保状态一致性，成为一个挑战。...中，运行该代码后，您将看到一个简单的界面，显示当前计数，并有两个按钮可以增加或减少计数。...点击按钮时，计数也会实时更新。QA 环节Q1: 如何在 SwiftUI 中进行全局状态管理？

1481 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭