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

第一次内容显示时,滚动视图居中并填充内容[SwiftUI]

在SwiftUI中,可以使用ScrollView来创建滚动视图,并通过设置alignment属性为.center来使内容居中显示。同时,可以使用.frame(maxWidth: .infinity, maxHeight: .infinity)来填充内容。

以下是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(1...10, id: \.self) { index in
                    Text("Item \(index)")
                        .font(.title)
                        .padding()
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .alignmentGuide(.center) { $0[VerticalAlignment.center] }
        }
    }
}

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

在上述代码中,我们使用了ScrollView来创建一个滚动视图,并在其中使用了一个垂直的VStack来放置多个文本视图。通过设置.alignmentGuide(.center)来使内容居中显示,并使用.frame(maxWidth: .infinity, maxHeight: .infinity)来填充内容。

这样,当第一次内容显示时,滚动视图会居中并填充内容。

请注意,以上示例代码仅适用于SwiftUI,如果您使用的是UIKit或其他UI框架,可能需要使用不同的方法来实现相同的效果。

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

相关·内容

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

欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图居中显示是一个常见的需求,即使对于 SwiftUI 的初学者来说这也并非难事。...在 SwiftUI 中,有很多手段可以达成此目的。本文将介绍其中的一些方法,对每种方法背后的实现原理、适用场景以及注意事项做以说明。...需求实现下图中展示的样式:在彩色矩形视图居中显示单行 Textimage-20220829142518962填充物Spacer最常见也是最容易想到的解决方案。...因此,当我们将合成后的 hello world 视图放置在 VStack 顶部( 通过 Spacer ),矩形的 background 会连同顶部的安全区域一渲染。...请阅读 SwiftUI 專欄 #4 Color 不只是顏色[3] ,掌握有关 Color 更多的内容对齐指南上节中,我们通过填充物让 Text 实现了左右居中

6.8K40
  • SwiftUI 中的内容边距

    前言SwiftUI 引入了一组视图修饰符,使我们能够有效地管理视图中的安全区域。在许多情况下,安全区域是你希望放置内容的地方。...然而,正如你所见,这也将滚动条指示器从后导边缘移到了中心。使用 contentMargins我们需要一种区分视图内容和工具栏,仅移动内容而保持工具栏在原地的方法。...幸运的是,SwiftUI 引入了新的 contentMargins 视图修饰符,使我们能够在视图中移动特定类型的内容。...根据水平尺寸类别的不同(正常或紧凑),我们使用 contentMargins 视图修饰符来管理水平方向上的内容边距。在紧凑水平尺寸类别下,我们将内容移动了 200 个点,以便在大屏幕设备上居中显示。...最后,引入了 contentMargins 视图修饰符,详细解释了其用法和参数,以及如何使用它来管理内容边距。通过本文,读者可以更好地理解掌握 SwiftUI内容边距的管理技巧。

    17632

    SwiftUI + Core Data App 的内存占用优化之旅

    SwiftUI 的惰性视图容器拥有对符合 DynamicViewContent 协议的内容( 通过 ForEach 生成的内容 )进行优化的能力。...尽管从表面上来看,惰性容器仅会在视图进入可视区域才会对其进行操作,但一旦该视图显示过( body 被求过值 ),即使该视图离开可视区域,SwiftUI 仍会保存视图的 body 值。...在本例中,子视图的 body 值中一定会包含用于显示的图片数据,因此,即使该视图已经被显示过( 滚动显示区域 ),该视图的 body 值仍将占用不小的内存。...Instruments 会导致优化后的结果显示不准确,内存占用数据将以 App 中的显示以及 Xcode Navigator 的 Debug 栏内容为准。如果滚动过快,可能会导致内存占用增大。...数据的多份拷贝 当图片数据从 SQLite 经 Core Data 最终通过 SwiftUI 显示,实际上在内存中至少保存了三份拷贝: 行缓存 托管对象上下文( 托管对象被填充后 ) 显示该图片的 SwiftUI

    1.3K10

    SwiftUI + Core Data App 的内存占用优化之旅

    SwiftUI 的惰性视图容器拥有对符合 DynamicViewContent 协议的内容( 通过 ForEach 生成的内容 )进行优化的能力。...尽管从表面上来看,惰性容器仅会在视图进入可视区域才会对其进行操作,但一旦该视图显示过( body 被求过值 ),即使该视图离开可视区域,SwiftUI 仍会保存视图的 body 值。...在本例中,子视图的 body 值中一定会包含用于显示的图片数据,因此,即使该视图已经被显示过( 滚动显示区域 ),该视图的 body 值仍将占用不小的内存。...图片 Instruments 会导致优化后的结果显示不准确,内存占用数据将以 App 中的显示以及 Xcode Navigator 的 Debug 栏内容为准。如果滚动过快,可能会导致内存占用增大。...数据的多份拷贝 当图片数据从 SQLite 经 Core Data 最终通过 SwiftUI 显示,实际上在内存中至少保存了三份拷贝: 行缓存 托管对象上下文( 托管对象被填充后 ) 显示该图片的 SwiftUI

    2.4K40

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

    本文对本次活动中与 SwiftUI 有关的一些问答进行了整理,添加了一点个人见解。本文为下篇。访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验以及最新的更新内容。...因此,如果你正在创建一个视图显示滚动内容,并可能进行选择操作,那么在 iOS 和 macOS 上使用 List 将有最好的体验。...阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始的滚动视图Q:我如何实现一个在底部对齐的滚动视图,在 macOS 上会不会有糟糕的性能?...A:你最好的选择是使用 ScrollView 和 ScrollViewReader,并在 onAppear 或新内容进来时滚动到最底部的视图。我不建议尝试旋转滚动视图。...不支持整个列表填充,请对此提出反馈。

    14.8K30

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

    本文对本次活动中与 SwiftUI 有关的一些问答进行了整理,添加了一点个人见解。本文为上篇。访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验以及最新的更新内容。...只允许打开该内容类型的文件,但不能进行编辑。MVVMQ:在 UIKit 时代,MVVM 是一种常见的架构,视图显示的数据来自一个单独的 viewModel 类。...除了使用习惯外,还应考虑偏移后的视图是否需要会对周边的视图产生影响( 布局层面 )。详情请阅读 在 SwiftUI 中实现视图居中的若干种方法[14] 。...在有些情况下,我想根据视图是否折叠来做决定( 例如,如果展开,在详细视图显示一条信息,如果折叠,则显示一个警告或其他指示 )。...这就涉及到了所有符合 DynamicProperty 协议的属性包装器的一个特点:在视图的生存期内仅有第一次初始化的实例会与视图创建关联。详细请阅读 避免 SwiftUI 视图的重复计算[22] 。

    12.3K20

    AnyView 对 SwiftUI 性能的影响

    这是有道理的,因为 SwiftUI 不知道它已经显示过此视图一次(因为它隐藏在 AnyView 下)。因此,它会再次绘制它,同时还可能缓存(但不使用)该视图的旧版本。...在浏览数据修改我们可以进行的另一个测试是性能测试 - 向列表发送大量内容强制更新视图(例如,响应消息),同时我们也浏览数据。这将在较短的时间间隔内触发视图的多次重绘。...没有 AnyView在没有 AnyView 包装器的情况下进行测试产生了与常规滚动测试相似的结果(58-59 FPS)。这也是预期的,因为 SwiftUI 知道视图的标识和结构。...这也解释了为什么 AnyView 实现随着时间的推移变慢 - 每次重绘都需要从头开始创建更多内容。总结总而言之,在这些情景中(包含异构视图的可滚动列表),最好为容器中的不同视图使用具体类型。...例如,如果你有一个菜单,作为几个异构元素的列表,在点击显示不同的导航目标,并且决定将这些视图包装为 AnyView,我的测量结果表明与使用其他方法相比,性能没有区别。

    14200

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

    <upperBound].swiftUI.backgroundColor = highlightColor}改变所有满足查询条件的内容背景色。对当前的选择位置,使用更加明亮的颜色标注粗体。...image-20220822161247454点击切换按钮定位到对应的搜索结果为 TranscriptionRow 视图添加显式标识符,通过 ScrollViewProxy 滚动到指定的位置。...请阅读 优化在 SwiftUI List 中显示大数据集的响应效率[6] 以及 避免 SwiftUI 视图的重复计算[7] 两篇文章,了解更多有关性能优化方面的内容通过 currentPostion 获取需要滚动到的...onAppear,每个视图退出显示窗口都会调用它的 onDisapper。...了解更多内容,请阅读 SwiftUI 视图的生命周期研究[9] 一文优先定位于最靠近屏幕中央的搜索结果:/// 从 List 当前显示中的 transcription 中就近选择 match 的 positionprivate

    4.2K30

    GeometryReader :好东西还是坏东西?

    一个容器视图,根据其自身大小和坐标空间定义其内容。 严格来讲,我并不完全赞同上述描述。这并非因为存在事实上的错误,而是这种表述可能会引起用户的误解。...官方文档中的“定义其内容( defines its content )”这一表述容易让人误以为 GeometryReader 的主要功能是主动影响子视图,或者说其获取的几何信息主要用于子视图,但实际上,...在非滚动方向上,ScrollView 会向子视图提供该维度上的全部可用尺寸。而在滚动方向上,它向子视图提供的建议尺寸为 nil。...请阅读 用 SwiftUI 的方式进行布局[9] 和 在 SwiftUI 中实现视图居中的若干种方法[10] 两篇文章,以了解面对同一个需求,SwiftUI 有多种布局手段。...https://www.fatbobman.com/posts/layout-in-SwiftUI-way/ [10] 在 SwiftUI 中实现视图居中的若干种方法: https://www.fatbobman.com

    63270

    深入了解 SwiftUI 5 中 ScrollView 的新功能

    当 scrollClipDisable 为 false 滚动内容会被裁剪以适应滚动容器边界。任何超出边界的部分将不会显示。...当 scrollClipDisable 为 true 滚动内容不会被裁剪。它可以延伸超出滚动容器的边界,从而显示更多内容。...可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...(视图标识) 不支持锚点设定,固定锚点为子视图的 center 正如 优化在 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的,当数据集很大,也会出现性能问题。...当子视图滑入和滑出包含它的滚动视图的可视区域,scrollTransition 会对该视图应用给定的过渡动画,并在不同阶段之间平滑地过渡。

    83620

    iOS监听物理截图自动生成截图跳转到反馈页面进行显示(截图内容包括系统的弹框视图UIAlertViewController)

    文章目录 引言 I、反馈页面的开发步骤 1.2.1 方法一: 截图内容不包含_UIAlertControllerShimPresenterWindow 且不包含AlertView的方法: 1.2.2...方法二:iOS根据视图尺寸获取视图截屏【截图内容包括UIAlertController和UIAlertView】 1.1、 监听截图通知 1.2、 截图方法: II demo源码 2.1 本文的完整...removeObserver:self]; // self.navigationItem.hidesBackButton = NO; } 1.2、 截图方法: 1.2.1 方法一: 截图内容不包含..._UIAlertControllerShimPresenterWindow 且不包含AlertView的方法: iOS根据视图尺寸获取视图截屏【View Snapshots】how do I take...https://kunnan.blog.csdn.net/article/details/113181607 1.2.2 方法二:iOS根据视图尺寸获取视图截屏【截图内容包括UIAlertController

    1.5K31

    如何判断 ScrollView、List 是否正在滚动

    比如在 SwipeCell[3] 中,需要在可滚动组件开始滚动,自动关闭已经打开的侧滑菜单。遗憾的是,SwiftUI 并没有提供这方面的 API 。..., willDecelerate decelerate: Bool)手指拖动结束后( 手指离开 ),调用此方法在 SwiftUI 中,很多的视图控件是对 UIKit( AppKit )控件的二次包装。...目前 SwiftUI 在内部的实现上去 UIKit( AppKit )化很明显,比如,本节介绍的方法在 SwiftUI 4.0 中已经失效方法二:Runloop我第一次接触 Runloop 是在学习 Combine...在 ScrollView、List 发生滚动,它们内部的子视图的位置也将发生改变。我们将以是否可以持续接收到它们的位置信息为依据判断当前是否处于滚动状态。...判断的准确度没有前两种方式高当可滚动组件中的内容出现了非滚动引起的尺寸或位置的变化( 例如 List 中某个视图的尺寸发生了动态变化 ),本方式会误判断为发生了滚动,但在视图的变化结束后,状态会马上恢复到滚动结束滚动开始后

    3.8K40

    SwiftUI 中掌握 ScrollView 的使用:滚动可见性

    前言我们的滚动 API 中又有一个重要的新增功能:滚动可见性。现在,你可以获取可见标识符列表,或者快速检查监控 ScrollView 内视图的可见性状态。...pause() } } }}上例定义了 VideoPlayerView 视图,该视图在其可见自动播放视频内容。...同样,当视图从可见状态转换为不可见状态,即显示的视口部分少于 10% ,也会运行该闭包。...运行这个 Demo,你会看到一个带有多个文本视图的 ScrollView,当你滚动,控制台会打印当前可见的项。...此外,在页面底部有一个视频播放器,当视频播放器出现在视口内,它会自动播放,当其离开视口,会自动暂停。总结今天,我们学习了如何跟踪 ScrollView 内特定视图的可见性,监控可见标识符列表。

    17421

    WWDC 23 ,SwiftUI 5 和 SwiftData 的初印象

    革命性的动画和视觉效果升级 SwiftUI 原本欠缺一些高级的动画和视觉功能在本次升级中一被补上了,而且苹果大幅更新了动画、转场、Shape、效果等方面的内部实现。...大幅改善了 ScrollView 的控制力 本次升级中,为 ScrollView 带来了新的动态滚动定位系统( 不依赖 ScrollViewReader 和显式的 id 声明)、一次性的定位系统( 在视图进入后...,直接定位到滚动视图的特定位置,只能使用一次 )、全新的滚动条控制( 闪烁 )、可自定义行视图滚动区域的顶端和显示区域的显示状态( 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...)、支持分页滚动( 开发者长期盼望的 )、自定义滚动内容的缩进、为滚动内容(非滚动容器)添加安全区域等众多功能。...开心还是无奈 在今年的 WWDC 中,苹果为 SwiftUI 带来了非常大的变革,推出了开发者向往已久的 SwiftData。

    1.1K20

    WWDC 23 ,SwiftUI 5 和 SwiftData 的初印象

    本文将聊聊我对本届 WWDC 中 SwiftUI 5.0 和 SwiftData 的初步印象。 访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验以及最新的更新内容。...革命性的动画和视觉效果升级 SwiftUI 原本欠缺一些高级的动画和视觉功能在本次升级中一被补上了,而且苹果大幅更新了动画、转场、Shape、效果等方面的内部实现。...,直接定位到滚动视图的特定位置,只能使用一次 )、全新的滚动条控制( 闪烁 )、可自定义行视图滚动区域的顶端和显示区域的显示状态( 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...)、支持分页滚动( 开发者长期盼望的 )、自定义滚动内容的缩进、为滚动内容(非滚动容器)添加安全区域等众多功能。...开心还是无奈 在今年的 WWDC 中,苹果为 SwiftUI 带来了非常大的变革,推出了开发者向往已久的 SwiftData。

    38510

    SwiftUI 视图的生命周期研究

    在 app 运行后进行第一次渲染SwiftUI 将依据类型树按图索骥,创建类型实例,实例的 body 根据初始状态计算视图值,组织成视图值树。...什么是视图 开发者更习惯将符合 View 协议的结构体或结构体实例视作视图,而在 SwiftUI 的角度,视图值树上的节点内容,才是它所认为的视图。...•在 SwiftUI 生成视图值树,当发现没有对应的实例SwiftUI 会创建一个实例从而获取它的 body 结果。...通常情况下,SwiftUI 在需要渲染屏幕某个区域或需要该区域的数据配合布局,会在视图值树上创建对应的视图。当不再需要其参与布局或渲染视图将被销毁。...比如在 List 和 LazyVStack 中,Cell 视图在创建之后即使滚动出屏幕不参与布局与渲染,但 SwiftUI 仍会保留这些视图的数据,直到 List 或 LazyVStack 被销毁。

    4.4K30
    领券