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

如何在iPad上更改SwiftUI拆分视图中的主控视图宽度

在iPad上更改SwiftUI拆分视图中的主控视图宽度,可以通过修改拆分视图的分割器位置来实现。拆分视图是一种容器视图,可以将屏幕分为两个部分,左侧是主控视图,右侧是详细视图。

要更改主控视图的宽度,可以使用NavigationViewSplitView结合使用。以下是一种实现方式:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var splitViewWidth: CGFloat = UIScreen.main.bounds.width * 0.3 // 设置初始宽度
    
    var body: some View {
        NavigationView {
            SplitView(splitViewWidth: $splitViewWidth) {
                // 主控视图
                Text("主控视图")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.blue)
                    .foregroundColor(.white)
            } detailView: {
                // 详细视图
                Text("详细视图")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.red)
                    .foregroundColor(.white)
            }
        }
    }
}

struct SplitView<Master: View, Detail: View>: View {
    @Binding var splitViewWidth: CGFloat
    let masterView: Master
    let detailView: Detail
    
    var body: some View {
        GeometryReader { geometry in
            HSplitView {
                masterView
                    .frame(width: splitViewWidth)
                detailView
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .gesture(DragGesture().onChanged({ value in
                splitViewWidth = value.location.x
            }))
        }
    }
}

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

在上述代码中,我们创建了一个SplitView自定义视图,它接受两个视图参数:masterViewdetailViewsplitViewWidth是一个绑定的属性,用于控制主控视图的宽度。

通过Gesture,我们可以监听拖动手势的变化,并根据手势位置更新splitViewWidth的值,从而实现拖动分割器改变主控视图的宽度。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。在实际开发中,你可以使用更多的SwiftUI组件和技术来实现更复杂的界面和交互效果。

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

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

相关·内容

SwiftUI 4.0 全新导航系统

: 由于无需在 NavigationLink 中指定目标视图,因此无须创建多余视图实例 对由同一类型值驱动目标进行统一管理( 可以将堆栈中所有视图 NavigationLink 处理程序统一到根视图中...上述选项并非适用于所有的平台,例如,在 macOS ,detalOnly 不会起作用 如果想在 SwiftUI 4.0 之前版本使用类似的功能,可以参考我在 用 NavigationViewKit...设置栏宽度 NavigationSplitView 为栏中视图提供了一个新修饰符 navigationSplitViewColumnWidth ,通过它开发者可以修改栏默认宽度: struct NavigationSplitViewDemo...不同角色将让 toolbar 外观和排版有所不同( 设备而异 )。...下对 iPad 进行适配: https://www.fatbobman.com/posts/swiftui-ipad/ [4] 用 NavigationViewKit 增强 SwiftUI 导航视图

10.3K62

SwiftUI水平条形图

SwiftUI水平条形图 水平条形图以矩形条形式呈现数据类别,其宽度与它们所代表数值成正比。本文展示了如何在垂直条形图基础创建一个水平柱状图。 水平条形图不是简单垂直条形图旋转。...它控制了图表布局,其中三个视图被改为YaxisHView、ChartAreaHView和XaxisHView,它们最初只是垂直条形图中使用视图副本。...矩形条宽度与数据值成正比。...在水平条形图中,显示条形图上数值并隐藏X轴可以使图表更简洁。 显示和隐藏水平条形图上元素 结论 创建水平条形图SwiftUI代码与创建垂直条形图代码不同。...这可能是将这些组件分解成更小SwiftUI视图并通过组合来重用原因。

4.8K20

用NavigationViewKit增强SwiftUI导航视图

任意视图通过代码直接返回根视图•在NavigationView下任意视图中通过代码直接跳转到新视图(无需在视图中描述NavigationLink)•通过NotificatiionCenter,指定应用程序中任意...从视图中返回根视图 在注册过NavigationView任意子视图中,可以通过下面的代码实现返回根视图: @Environment(\.navigationManager) var nvmanager...视图中支持SwiftUI原生所有定义,例如toolbar、navigationTitle等。 目前在启用转场动画时,title和toolbar会在转场动画后才显示,观感稍有不足。日后尝试解决。...,其目的是改善当iPhone和iPad使用同一套代码时,DoubleColoumnNavigationViewStyle在iPhone Max横屏时表现同其他iPhone机型不同。...当iPhone Max横屏时,NavigationView表现会同iPad一样双列显示,让应用程序在不同iPhone表现不一致。

3.2K20

打造可适配多平台 SwiftUI 应用

这种做法不仅可以解决跨平台兼容性问题,还有其他好处:可以改善视图中代码整洁度(减少条件编译语句使用)可以改善 SwiftUI 在不同版本之间兼容性当然,要创建并使用这类代码,前提是开发者必须已经对...当我们将“电影猎手”从 iPhone 移植到 iPad 或 Mac 时,除了屏幕可用空间更大之外,另一个显着变化是使用者可以同时打开多个窗口,并可以在不同窗口中对“电影猎手”进行独立操作。...然而,如果我们直接将尚未进行多屏适配 iPhone 版本“电影猎手”运行于 iPad ,会发现尽管可以同时开启多个“电影猎手”窗口,但所有的操作都是同步,也就是在一个窗口中进行操作同时会体现在另一个窗口中...在 SwiftUI 中,只要理解了状态、声明和响应之间关系,开发者就可以用任何想用形式来组织数据。无论是将状态进行统一管理,还是分散在不同视图中,都有各自优势和意义。...在 iOS 中,我们通过在根视图( ContentView )中修改环境值方式来更改颜色和语言,并不会对 macOS Settings 场景产生影响。

3.1K80

打造可适配多平台 SwiftUI 应用

这是因为 horizontalSizeClass 只表示当前视图横向尺寸类别,也就是说,如果在一个横向尺寸被限定视图中( 例如 NavigationSplitView Sidebar 视图 )获取...这种做法不仅可以解决跨平台兼容性问题,还有其他好处: 可以改善视图中代码整洁度(减少条件编译语句使用) 可以改善 SwiftUI 在不同版本之间兼容性 当然,要创建并使用这类代码,前提是开发者必须已经对...当我们将“电影猎手”从 iPhone 移植到 iPad 或 Mac 时,除了屏幕可用空间更大之外,另一个显着变化是使用者可以同时打开多个窗口,并可以在不同窗口中对“电影猎手”进行独立操作。...在 SwiftUI 中,只要理解了状态、声明和响应之间关系,开发者就可以用任何想用形式来组织数据。无论是将状态进行统一管理,还是分散在不同视图中,都有各自优势和意义。...在 iOS 中,我们通过在根视图( ContentView )中修改环境值方式来更改颜色和语言,并不会对 macOS Settings 场景产生影响。

2K10

SwiftUI内容边距

前言SwiftUI 引入了一组视图修饰符,使我们能够有效地管理视图中安全区域。在许多情况下,安全区域是你希望放置内容地方。...200 : 0) } }}我们通过使用 horizontalSizeClass 环境值和 safeAreaPadding 视图修饰符,将内容移动到了 iPad 中心。...幸运是,SwiftUI 引入了新 contentMargins 视图修饰符,使我们能够在视图中移动特定类型内容。...总结本文介绍了 SwiftUI内容边距管理,通过对比安全区域概念,解释了内容边距重要性。文章从创建示例开始,展示了在列表视图中如何处理内容边距问题。...随后,通过介绍 UIKit 中 readableContentGuide 布局指南以及 SwiftUI safeAreaPadding 视图修饰符,展示了在 iPad 适配内容边距方法。

15532

高级 SwiftUI 动画 — Part 1:Paths

当给一个视图制作动画时,SwiftUI 实际是多次重新生成该视图,并且每次都修改动画参数。这样,它就会从原点值渐渐走向最终值。 假设我们为一个视图不透明度创建一个线性动画。...我想到了一些大例外情况:路径(paths)、变换矩阵(matrices)和任意视图变化(例如,文本视图中文本、渐变视图中渐变颜色或停顿,等等)。在这种情况下,框架不知道该怎么做。...在模拟器运行时,你可能感觉不到有什么不同。然而,在真正设备,你会发现。视频演示来自iPad第六代(2016)。完整代码在 gist 文件中,名称为 Example6。...它将打开改变我们视图和动画新方法大门。与 Paths 一样,SwiftUI 没有关于如何在两个不同变换矩阵之间转换内置知识。GeometryEffect将有助于我们这样做。...在文章第三部分,我们将介绍AnimatableModifier,这是一个非常强大工具,它可以让我们对视图中任何可以变化东西进行动画处理,甚至是文本!

3.8K20

Ask Apple 2022 与 SwiftUI 有关问答(

对于苹果工程师给予建议有一点请注意,那就是如果有在父视图中修改该环境对象实例需求,须确保父视图不会被反复重构( SwiftUI 重新创建视图类型实例 )。...对于非惰性视图 LazyVStack ),一旦 hosting controller 视图被初始化,onAppear 将被调用。...事实,这些视图( 惰性容器中视图 )一旦被创建,其存续期将持续到惰性容器被销毁为止。请阅读 SwiftUI 视图生命周期研究[12] 了解更多内容。...在常规宽度下,我们在详细视图中有一个带有导航堆栈侧边栏。在紧凑宽度下,我们有一个标签栏,每个标签都有一个导航堆栈。...image-20221022135326560San Francisco 宽度风格Q:如何在 SwiftUI 中如何使用 SF 字体家族新增三种宽度风格( Compressed、Condensed、Expanded

12.2K20

SwiftUI 之 HStack 和 VStack 切换

前言 SwiftUI 各种堆栈是许多框架中最基本布局工具,能够让我们定义组视图,这些组视图可以按照水平、垂直或覆盖视图对齐。...想了解更多信息,可以查看我文章 - SwiftUI 布局系统第三章 目前,我们按钮是垂直排列,并且填满了水平线上可用空间(你可以用以上示例代码预览按钮样子),虽然这在竖向 iPhone 看起来很好...虽然我们也有很多方法能解决这些问题(例如使用类似在这篇 Q&A 中用来使多个视图具有相同宽度和高度技术),但真正问题是当我们要动态的确定方向时,测量可用空间是否是一个好方法。...(例如在大尺寸 iPhone 使用横屏,或者全屏 iPad 任一方向),而其它所有尺寸配置使用垂直布局。...这样做会令动画更流畅,例如在切换设备方向时,我们也有可能在执行此类更改时获得小幅性能提升(因为 SwiftUI 总是在其视图层次结构为静态时尽可能表现最佳) 选择合适视图 但我们还没有结束,因为

2.8K10

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

欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图中居中显示是一个常见需求,即使对于 SwiftUI 初学者来说这也并非难事。...需求实现下图中展示样式:在彩色矩形视图中居中显示单行 Textimage-20220829142518962填充物Spacer最常见也是最容易想到解决方案。...我为本文这种通过多种方法来解决一个问题方式添加了【小题大作】标签,目前使用该便签文章还有:在 Core Data 中查询和使用 count 若干方法[6]、在 SwiftUI 视图中打开 URL...每周也会对当周博客新文章以及在 Twitter 发布 Tips 进行汇总,并通过邮件列表形式发送给订阅者。订阅下方 邮件列表[10],可以及时获得每周 Tips 汇总。.../[7] 在 SwiftUI 视图中打开 URL 若干方法: https://www.fatbobman.com/posts/open_url_in_swiftUI/[8] Twitter: https

6.7K40

SwiftUI 与 Core Data —— 数据获取

本文中我们将探讨在 SwiftUI 视图中批量获取 Core Data 数据方式,并尝试创建一个可以使用 mock 数据 FetchRequest。...这将有两个作用:数据变化后将引发与其绑定视图进行更新由于底层数据并不保存在视图中,因此在视图存续期中 SwiftUI 可以随时创建新视图描述实例而无需担心数据丢失虽然苹果没有公开 _makeProperty...不可在 update 方法中同步地改变引发视图更新数据与 SwiftUI视图中更新 Source of truth 逻辑一致,在一个视图更新周期中,不能对 Source of truth 再度更新...,避免引发视图不必要更新通过创建一个具有包装用途引用类型来持有需要修改数据( 在 @State 中持有引用 ),便可以达成如下目的:1、让数据生命周期与视图生存期一致;2、数据可更改;3、更改数据不会引发视图更新...在下一篇文章中,我们将探讨如何在 SwiftUI 中安全地响应数据,如何避免因为数据意外丢失而导致行为异常以及应用崩溃。希望本文能够对你有所帮助。

4.6K30

Swift 周报 第十二期

其中,手机包括 iPhone 6S 及以后型号;平板包括第五代及以后 iPad,所有 iPad Pro,以及 iPad Air 2;电脑则是运行 MacOS Monterey Mac。...[13] 摘要: Apple 在 WWWDC 2022 推出了 SwiftUI Charts,在 SwiftUI 视图中实现图表功能变得非常容易。...本文介绍了几种自定义折线统计图。 如何在 SwiftUI 中创建条形图[15] 摘要: 本文展示了如何创建一个垂直条形图,其中 Y 轴表示每个类型值。...如下图: 如何在 SwiftUI 中创建水平条形图[16] 摘要: 根据 UI 设计以及交互需求,有时候统计图需要调整 X 和 Y 轴。...本文主要介绍了如何创建水平条形图,如下图: 使用 SwiftUI Eager Grids[17] 摘要: 本篇文章主要讲解如何使用 Eager Grids 绘制网格视图,其中讲解了十几种网格实现方法

2.6K10

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

视图性能优化Q:面对复杂用户界面时,控制视图中更新范围最佳做法是什么( 以避免不需要转发以及重复计算 )。...Jane 自动根据宽度排版[10] 视频与该问题十分契合。阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。...Swiftcord[12] 代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 中显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。...将背景扩展到安全区域Q:如果我有一个自定义容器类型,可以接受一个顶部和底部视图,是否有办法让 API 调用者将所提供视图背景扩展到安全区域内,同时将内容( 文本或按钮 )保留在安全区域内?...macOS APIQ:对于运行 Monterey Mac,能否如何在 SwiftUI 中实现下面需求建议:打开一个窗口在该窗口中初始化数据找到所有打开窗口确定一个窗口是否打开从不在该窗口视图中关闭一个窗口

14.8K30

SwiftUI 中实战应用 ContentUnavailableView

前言SwiftUI 引入了新 ContentUnavailableView 类型,允许我们在应用程序中展示空状态、错误状态或任何其他内容不可用状态。...由于代码片段中 Store 类型未提供,我将使用一个简化版本示例代码来创建一个简单 SwiftUI Demo,以展示 ContentUnavailableView 基本使用。...请确保在 Xcode 中创建一个新 SwiftUI 项目,并将上述代码替换到主 ContentView 中,然后运行该项目。...在项目的初始加载时,ContentUnavailableView 将显示“No Products”消息,几秒后模拟产品加载,之后产品列表将显示在主视图中。...总结今天,我们学习了如何在 SwiftUI 中使用 ContentUnavailableView 类型以用户友好方式显示空状态。

9111

掌握 ViewThatFits

在 iOS 16 中,SwiftUI 增加了一个新自适应布局容器 ViewThatFits。正如其名称所示,它作用是在给定多个视图中找出最合适视图并使用。...ViewThatFits 按照你提供给初始化器顺序评估其子视图。它选择在受限轴理想尺寸适应建议尺寸第一个子视图。这意味着你按照优先级顺序提供视图。...ViewThatFits 判断和呈现逻辑 既然 ViewThatFits 是从给定视图中挑选出最合适那个,那么它判断依据是什么呢?判断顺序如何?最终又如何呈现呢?...,请阅读 SwiftUI 布局 —— 尺寸( )[4] 一文。...选定了子视图后,子视图中 logo 会根据 ViewThatFits 提供尺寸,在最终呈现时调整自己尺寸。

18110

SwiftUI:使用 @EnvironmentObject 从环境中读取自定义值

SwiftUI环境使我们可以使用来自外部值,这对于读取Core Data上下文或视图展示模式等很有用。...在向您展示一些代码之前,还有最后一件事:环境对象使用您已经学过ObservableObject协议,SwiftUI将自动确保共享同一环境对象所有视图更改时都会更新。...——您现在就可以运行该应用并更改文本字段,以查看其值显示在下面的文本视图中。...当然,我们可以在单个视图中表示出来,但是通过这种方式,您可以确切地看到使用环境对象时通信无缝性。 现在,这是最聪明部分。...现在,您可能想知道SwiftUI何在.environmentObject(user)和@EnvironmentObject var user: User之间建立连接——如何知道将该对象放入正确属性?

9.6K20

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

那么,SwiftUI解决了哪些痛点?带来哪些好处?代码风格如何?敬请阅读本文。 刚刚结束苹果WWDC推出了一个对于开发者非常重要框架: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.4K20

SwiftUI TextField进阶——格式与校验

SwiftUI修饰方法) 以上原则,在SheetKit——SwiftUI模态视图扩展库[3]和用NavigationViewKit增强SwiftUI导航视图[4]中均有体现。...•只支持部分类型设备•支持键盘类型有限 例如在iPad下keyboardType是无效,在苹果鼓励应用程序对多设备类型支持今天,让用户在不同设备享受到相同体验至关重要。...可能屏蔽字符解决思路 •使用UITextFieldDelegatetextField方法•在SwiftUI视图中,使用onChange在录入发生变化时进行判断并修改 第一种思路,仍需使用Introspect...由于onChange是在文字发生变化后才会调用,因此,方案二会导致视图二度刷新,不过考虑到文字录入应用场景,性能损失可以忽略( 使用属性包装器进一步对数值同字符串进行链接,可能会进一步增加视图刷新次数...两种方案比较 •效率由于方案一在每次录入时仅需刷新一次视图,因此理论其执行效率要高于方案二,不过在实际使用中,二者都可以提供流畅、及时交互效果。

8.1K20

面向所有人 UI 编程 :透过点按弹窗初尝 SwiftUI

在更新 iOS 13 或者 iPadOS 13 后,你会发现长按许多软件图标都会出现如下弹窗,比如设置内快捷选项允许你快速更改电池设置等等。...而对于苹果设备,比如 Apple Watch,Mac,iPhone 或是 iPad,苹果在 2019 年推出官方 UI 编程语言则是 SwiftUI。...写 SwiftUI 得过程,实际就是将一个个最基本 View 像滚雪球一样越包越大过程,你把一个个基础视图和修改器用一个更大视图包在一起,用修改器修改更大视图,就能实现复杂功能。...中文里圆括号中各种要求,正是 SwiftUI各种修改器,语法结构是 「.修改器名字」。比如下图中我们想修改为小标题字体,就写 .font(.headline)。 ?...如果你是老手,你可能会好奇 contextMenu 如何用在 UIKit ;如果你对编程零基础,你可能会发现用 SwiftUI 写程序界面和简单功能其实没那么难,无非就是对大白话翻译。

2.1K40
领券