From 1b06e14c19f4e85da8a0243e32f2d03d5719b0c3 Mon Sep 17 00:00:00 2001 From: Jacob Mao Date: Mon, 17 Jul 2023 22:20:15 +0900 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=20capturingphotos-browsephot?= =?UTF-8?q?os=20=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../capturingphotos-browsephotos.yml | 224 +++++++++--------- 1 file changed, 114 insertions(+), 110 deletions(-) diff --git a/project/sample-apps/capturingphotos-browsephotos.yml b/project/sample-apps/capturingphotos-browsephotos.yml index 63d244f..4272023 100644 --- a/project/sample-apps/capturingphotos-browsephotos.yml +++ b/project/sample-apps/capturingphotos-browsephotos.yml @@ -1,165 +1,169 @@ -- 内容: 'Note' - 提示: '' - 翻译: '' -- 内容: 'Fetching the Photo Assets' - 提示: '' - 翻译: '' -- 内容: 'You use a lazy vertical grid (LazyVGrid) to display your photos as items in a grid layout. Because the layout uses a vertical grid, you only need to decide how many columns you want and the spacing between each item. After the grid has the number of columns, it expands vertically to add enough rows for displaying all of your photos.' - 提示: '' - 翻译: '' -- 内容: 'Your result closure looks for an image in the result. If it finds one, it updates your image property.' +- 内容: 'Browsing Your Photos' 提示: '' - 翻译: '' -- 内容: 'Step 5' + 翻译: '浏览你的照片' +- 内容: 'Browse the photos in your photo library.' 提示: '' - 翻译: '' + 翻译: '浏览你照片库中的照片。' - 内容: 'Enjoy taking photos? Most of us do, and it’s easy to end up with hundreds or thousands of photos in your library. 🏞' 提示: '' - 翻译: '' -- 内容: 'Using the Photo Collection' + 翻译: '喜欢拍照吗？我们大多数人都喜欢，而且很容易在你的照片库中积累成百上千的照片。' +- 内容: 'Follow your photos as they’re retrieved from your photo library and displayed in a scrolling gallery you can browse.' 提示: '' - 翻译: '' -- 内容: 'When you open the gallery, you’ll no longer see the viewfinder, so there’s no need to keep updating it. Instead, you’d rather concentrate the device’s performance on displaying your photos. To control when the camera’s preview stream is active, use the navigation link’s onAppear(perform:) modifier to pause it when the gallery appears, and onDisappear(perform:) to resume it again when you navigate back to the camera.' + 翻译: '让我们一步步看照片是如何从你的照片库中被检索出来，并让你可以在一个滚动的画廊中查看它们。' +- 内容: 'Using the Photo Collection' 提示: '' - 翻译: '' -- 内容: 'Each item in your photo collection is known as a photo asset. Find out how to fetch those assets.' + 翻译: '使用 PhotoCollection 对象' +- 内容: 'Learn about the photo collection in your data model and how it provides the photos for your gallery.' 提示: '' - 翻译: '' -- 内容: 'A view can use its task(priority:_:) modifier to run some code asynchronously whenever the view loads.' + 翻译: '了解你数据模型中的 PhotoCollection 对象，以及它如何为画廊提供照片。' +- 内容: 'Step 1' 提示: '' - 翻译: '' -- 内容: 'Step 6' + 翻译: '第一步' +- 内容: 'Your data model has a photoCollection property that can represent any collection of items in your photo library. This could be your entire photo library, or just one album, or even the results from a search. You can include all of your photos in your library by initializing photoCollection with a Smart Album .smartAlbumUserLibrary.' 提示: '' - 翻译: '' -- 内容: 'Tip' + 翻译: '你的数据模型中有一个 photoCollection 属性，它可以表示你照片库中任何一种项目的集合。这可以是你整个照片库，也可以只是一个相册，甚至可以是搜索的结果。 + 你可以通过指定 smartAlbum 参数为 .smartAlbumUserLibrary 来初始化 photoCollection，从而将照片库中的所有照片都包含进来。' +- 内容: 'Fetching the Photo Assets' 提示: '' - 翻译: '' -- 内容: 'The photoItemView(asset:) method creates a view that displays a small image thumbnail for a photo asset. You’ll use this view as the label for the navigation link, displaying each link as a thumbnail-sized image of the photo.' + 翻译: '获取照片资源' +- 内容: 'Each item in your photo collection is known as a photo asset. Find out how to fetch those assets.' 提示: '' - 翻译: '' -- 内容: 'In your camera view, use a navigation link to take you to your photo gallery. A navigation link is just like a button — you can even give it a label and an icon. You place this button to the left of the shutter button.' + 翻译: 'PhotoCollection 中的每一个项目都被认为是一个照片资源。了解如何获取这些资源。' +- 内容: 'Your data model’s photoCollection has a photoAssets property that enables use of the photo assets collection just like you would an array. You can fetch a photo asset using its index: photoAssets[4], or use photoAssets.count to get the number of photos in the collection.' 提示: '' - 翻译: '' -- 内容: 'Why lazy? Well, if the grid is larger than its containing view, the view only displays the items that are currently visible. This “laziness” actually enhances the performance of your app, especially as you scroll through the grid of photos.' + 翻译: '在你数据模型的 photoCollection 属性中是有一个 photoAssets 属性的，它可以让你像使用数组一样使用照片资源集合。 + 你可以像这样使用索引获取照片资源：photoAssets[4]；或者调用 photoAssets.count 来获取集合中的照片数量。' +- 内容: 'Tip' 提示: '' - 翻译: '' -- 内容: 'You could use a fixed number of columns in your grid, but a more responsive approach is to display as many columns as you can, depending on the width of the view. This creates a much better experience as people resize your app. To create a grid that adapts to the width of your view, define an adaptive GridItem and specify the size and spacing you want it to maintain.' + 翻译: '注释' +- 内容: 'You can also iterate over the assets in photoAssets using a loop. You’ll find this incredibly useful for building your gallery.' 提示: '' - 翻译: '' -- 内容: 'Your view has an image state property ready to hold the image after loading it. It’s an optional type — Image? — because you want it to start off without any value.' + 翻译: '你也可以使用循环来遍历 photoAssets 中的所有资源。你会发现这对构建画廊非常有用。' +- 内容: 'Step 2' 提示: '' - 翻译: '' -- 内容: 'Displaying a Photo' + 翻译: '第二步' +- 内容: 'You’ll notice that photoAssets is a published property of PhotoCollection, which is an observable object. This means that you can respond to changes in the photo assets, such as when photos are added or deleted.' 提示: '' - 翻译: '' -- 内容: 'Your result closure receives one or more calls from the cache. If the cache already contains the image you requested, it immediately calls your closure with the image in its result. If the cache doesn’t have the requested image, then it loads the image from the photo asset and caches it. While loading the image, the cache may first call your closure with a low-resolution image, before finally delivering the high-resolution image in the result.' + 翻译: '你会注意到 PhotoCollection 中的 photoAssets 属性被 @Published 修饰了，它是一个可观察对象。这意味着比如当照片被添加或删除时，你可以响应这些照片资源的变化。' +- 内容: 'Navigating to the Photo Gallery' 提示: '' - 翻译: '' -- 内容: 'You use a PhotoCollectionView to display your photos in a scrolling grid, with the most recent photos at the top.' + 翻译: '导航到照片画廊' +- 内容: 'Find out how to navigate to the photo gallery and connect it to your photo library.' 提示: '' - 翻译: '' -- 内容: 'Your data model’s photoCollection has a photoAssets property that enables use of the photo assets collection just like you would an array. You can fetch a photo asset using its index: photoAssets[4], or use photoAssets.count to get the number of photos in the collection.' + 翻译: '了解如何导航到照片画廊并将其与你的照片库连接起来。' +- 内容: 'In your camera view, use a navigation link to take you to your photo gallery. A navigation link is just like a button — you can even give it a label and an icon. You place this button to the left of the shutter button.' 提示: '' - 翻译: '' -- 内容: 'Browse the photos in your photo library.' + 翻译: '在你相机视图中，使用一个 NavigationLink 来进入照片画廊。NavigationLink 就像一个按钮，你甚至可以给它设置一个标签和图标。你可以将这个按钮放在快门按钮的左边。' +- 内容: 'When you tap or click a navigation link, SwiftUI takes you to another view — in this case, the photo collection view — that you use to display your photo gallery. If you use navigation links within a NavigationStack, SwiftUI manages the presentation of your views so you can easily navigate between them.' 提示: '' - 翻译: '' + 翻译: '当你点击或按下一个 NavigationLink 时，SwiftUI 会带你进入另一个视图，在这个例子中是 PhotoCollectionView，你可以使用它来显示你的照片画廊。 + 如果你在 NavigationStack 中使用 NavigationLink 的话，SwiftUI 会负责管理你视图的呈现，使你可以在视图之间轻松地导航。' - 内容: 'Step 3' 提示: '' - 翻译: '' -- 内容: 'Step 8' - 提示: '' - 翻译: '' -- 内容: 'When you tap or click a navigation link, SwiftUI takes you to another view — in this case, the photo collection view — that you use to display your photo gallery. If you use navigation links within a NavigationStack, SwiftUI manages the presentation of your views so you can easily navigate between them.' + 翻译: '第三步' +- 内容: 'By passing your model’s photoCollection to the PhotoCollectionView when you initialize it, you provide the collection of photos that you want to display in your gallery.' 提示: '' - 翻译: '' + 翻译: '当你初始化 PhotoCollectionView 时，通过传递你模型的 photoCollection 给它，你便提供了想在画廊中展示的照片集合。' - 内容: 'Step 4' 提示: '' - 翻译: '' -- 内容: 'Learn about the photo collection in your data model and how it provides the photos for your gallery.' - 提示: '' - 翻译: '' -- 内容: 'Learn how the photo view loads and displays your photo.' + 翻译: '第四步' +- 内容: 'When you open the gallery, you’ll no longer see the viewfinder, so there’s no need to keep updating it. Instead, you’d rather concentrate the device’s performance on displaying your photos. To control when the camera’s preview stream is active, use the navigation link’s onAppear(perform:) modifier to pause it when the gallery appears, and onDisappear(perform:) to resume it again when you navigate back to the camera.' 提示: '' - 翻译: '' -- 内容: 'You’ll notice that photoAssets is a published property of PhotoCollection, which is an observable object. This means that you can respond to changes in the photo assets, such as when photos are added or deleted.' + 翻译: '当你打开画廊时，取景器将不会被看到，所以没有必要继续更新它。相反，你更希望将设备的性能集中使用在显示你的照片上。 + 为了控制摄像头预览流是否激活的状态，使用 NavigationLink 的 onAppear(perform:) 修饰符在画廊出现时暂停它，并在回到摄像头视图时在 onDisappear(perform:) 修饰符中恢复它。' +- 内容: 'Building the Photo Gallery' 提示: '' - 翻译: '' -- 内容: 'Step 9' + 翻译: '构建照片画廊' +- 内容: 'Discover how to display your photos in a scrolling grid.' 提示: '' - 翻译: '' -- 内容: 'This is where you add code to request a high-resolution image from the cache for the photo asset, specifying the size you want. You also provide the cache with a closure that contains code it can call when it has a result.' + 翻译: '探索如何在一个滚动网格中显示你的照片。' +- 内容: 'You use a PhotoCollectionView to display your photos in a scrolling grid, with the most recent photos at the top.' 提示: '' - 翻译: '' -- 内容: 'Find out how to navigate to the photo gallery and connect it to your photo library.' + 翻译: '你使用一个 PhotoCollectionView 对象将你的照片在一个可滚动的网格中展示出来，最新的照片会放在最前面。' +- 内容: 'When you create your PhotoCollectionView, the photoCollection property initializes with a reference to your model’s photoCollection. It provides all of the data you need to build your photo gallery. By making photoCollection an observed object, SwiftUI updates your photo collection view in response to changes in the collection’s published values.' 提示: '' - 翻译: '' -- 内容: 'Recognizing Gestures with Machine Learning' + 翻译: '当你创建 PhotoCollectionView 时，photoCollection 属性会被初始化为一个指向你模型的 photoCollection 引用。它提供了构建你照片画廊所需的所有数据。 + 通过将 photoCollection 设置为一个可观察的对象，SwiftUI 会通过响应 photoCollection 的值变化，来更新你的 PhotoCollectionView。' +- 内容: 'You use a lazy vertical grid (LazyVGrid) to display your photos as items in a grid layout. Because the layout uses a vertical grid, you only need to decide how many columns you want and the spacing between each item. After the grid has the number of columns, it expands vertically to add enough rows for displaying all of your photos.' 提示: '' - 翻译: '' -- 内容: 'Create a NavigationLink for each grid item that, when tapped or clicked, displays the individual photo at full size using the destination PhotoView initialized with the photo asset.' + 翻译: '你使用一个 LazyVGrid 来将照片作为网格布局中的项目进行展示。由于布局使用的是垂直网格，所以只需要决定需要多少列和每个项目之间的间隔。 + 网格有了列数之后，它会垂直扩展以添加足够的行来显示所有的照片。' +- 内容: 'Note' 提示: '' - 翻译: '' -- 内容: 'Step 1' + 翻译: '注释' +- 内容: 'Why lazy? Well, if the grid is larger than its containing view, the view only displays the items that are currently visible. This “laziness” actually enhances the performance of your app, especially as you scroll through the grid of photos.' 提示: '' - 翻译: '' -- 内容: 'You also initialize the view with a cache property that holds a reference to your image cache. You can request an image of a specified size from the image cache. After loading the image from the photo asset, the cache delivers it back to you. The image cache also keeps recently-requested images in memory, so it doesn’t have to reload them if you request them again.' + 翻译: '为什么选择延迟加载呢？如果网格比其容器视图大，那么视图只需要显示当前可见的项目。这种 “懒惰性” 实际上增强了你 app 的性能，尤其是在滚动照片网格时。' +- 内容: 'You could use a fixed number of columns in your grid, but a more responsive approach is to display as many columns as you can, depending on the width of the view. This creates a much better experience as people resize your app. To create a grid that adapts to the width of your view, define an adaptive GridItem and specify the size and spacing you want it to maintain.' 提示: '' - 翻译: '' -- 内容: 'Inside your grid, use ForEach to iterate over the photo assets in your collection and generate a view for each asset — these views populate your grid. Because your grid is lazy, as you scroll, ForEach only operates on the visible photo assets.' + 翻译: '你可以把网格中的列设置成固定数量，但更灵活的方法是根据视图的宽度显示尽可能多的列。当用户调整你 app 的大小时，这将创造出更好的用户体验。 + 为了创建一个适应视图宽度的网格，可以定义一个自适应的 GridItem，并指定你希望它保持的大小和间距。' +- 内容: 'Step 5' 提示: '' - 翻译: '' -- 内容: 'Browsing Your Photos' + 翻译: '第五步' +- 内容: 'Imagine having hundreds — or thousands — of photos. Even with adaptive layout, your grid can get very tall — way taller than the space you have to display it! Make your grid scrollable by placing it inside a ScrollView. This makes it so your grid can have as many rows as it needs, and you’ll be able to scroll up and down through your photos.' 提示: '' - 翻译: '' -- 内容: 'Navigating to the Photo Gallery' + 翻译: '想象一下，你有几百，甚至几千张的照片。即使是自适应布局，网格也可能会变得非常长，远远超过你用来显示它的空间！ + 通过将它放在 ScrollView 中，使其可滚动。这就使得你的网格可以有尽可能多的行，并能够通过上下滚动查看照片。' +- 内容: 'Step 6' 提示: '' - 翻译: '' -- 内容: 'When it comes to displaying a photo on its own, you’ll use PhotoView. In your photo view, you display a high-resolution image that you request from the photo. You also have an overlay with buttons for favoriting or deleting the photo.' + 翻译: '第六步' +- 内容: 'Inside your grid, use ForEach to iterate over the photo assets in your collection and generate a view for each asset — these views populate your grid. Because your grid is lazy, as you scroll, ForEach only operates on the visible photo assets.' 提示: '' - 翻译: '' + 翻译: '在网格内，则使用 ForEach 对集合中的照片资源进行迭代，并为每个资源生成一个视图，用这些视图来填充网格。由于网格是延迟加载的，所以当你滚动时，ForEach 仅对可见的照片资源进行操作。' - 内容: 'Step 7' 提示: '' - 翻译: '' -- 内容: 'By passing your model’s photoCollection to the PhotoCollectionView when you initialize it, you provide the collection of photos that you want to display in your gallery.' - 提示: '' - 翻译: '' -- 内容: 'Step 10' + 翻译: '第七步' +- 内容: 'Create a NavigationLink for each grid item that, when tapped or clicked, displays the individual photo at full size using the destination PhotoView initialized with the photo asset.' 提示: '' - 翻译: '' -- 内容: 'Discover how to display your photos in a scrolling grid.' + 翻译: '为每个网格项创建一个 NavigationLink，当点击它时，通过使用点击的那个照片资源来初始化目标视图 PhotoView ，来以全尺寸显示单个照片。' +- 内容: 'Step 8' 提示: '' - 翻译: '' -- 内容: 'You can also iterate over the assets in photoAssets using a loop. You’ll find this incredibly useful for building your gallery.' + 翻译: '第八步' +- 内容: 'The photoItemView(asset:) method creates a view that displays a small image thumbnail for a photo asset. You’ll use this view as the label for the navigation link, displaying each link as a thumbnail-sized image of the photo.' 提示: '' - 翻译: '' -- 内容: 'When you create your PhotoCollectionView, the photoCollection property initializes with a reference to your model’s photoCollection. It provides all of the data you need to build your photo gallery. By making photoCollection an observed object, SwiftUI updates your photo collection view in response to changes in the collection’s published values.' + 翻译: 'photoItemView(asset:) 方法用于创建一个视图，其显示照片资源的小尺寸缩略图。你将使用此视图作为 NavigationLink 的标签，将每个 NavigationLink 以照片的缩略图大小来显示出来。' +- 内容: 'Displaying a Photo' 提示: '' - 翻译: '' -- 内容: 'However, if image doesn’t have a value, you use a ProgressView to display a spinner as a placeholder. Look very carefully, and you might just see this spinner when your view first loads, before the cache has a chance to load an image from the photo asset.' + 翻译: '显示一个照片' +- 内容: 'Learn how the photo view loads and displays your photo.' 提示: '' - 翻译: '' -- 内容: 'Imagine having hundreds — or thousands — of photos. Even with adaptive layout, your grid can get very tall — way taller than the space you have to display it! Make your grid scrollable by placing it inside a ScrollView. This makes it so your grid can have as many rows as it needs, and you’ll be able to scroll up and down through your photos.' + 翻译: '了解照片视图是如何加载和显示照片的。' +- 内容: 'When it comes to displaying a photo on its own, you’ll use PhotoView. In your photo view, you display a high-resolution image that you request from the photo. You also have an overlay with buttons for favoriting or deleting the photo.' 提示: '' - 翻译: '' + 翻译: '当需要单独展示一张照片时，你会使用 PhotoView。在 PhotoView 中，会显示一张从 cache 中请求的高分辨率图像。另外还有一个放置收藏或删除照片按钮的叠加层。' - 内容: 'Your photo view has a photoAsset property for the photo it displays. You pass this in when you initialize the PhotoView.' 提示: '' - 翻译: '' -- 内容: 'Building the Photo Gallery' + 翻译: '你的 PhotoView 中有一个名为 photoAsset 的属性，其用于显示照片。当你初始化 PhotoView 时，需要传入这个值。' +- 内容: 'You also initialize the view with a cache property that holds a reference to your image cache. You can request an image of a specified size from the image cache. After loading the image from the photo asset, the cache delivers it back to you. The image cache also keeps recently-requested images in memory, so it doesn’t have to reload them if you request them again.' 提示: '' - 翻译: '' -- 内容: 'Step 2' + 翻译: '你还需要在初始化视图时设置一个 cache 属性，该属性持有一个指向你图像缓存的引用。你可以从缓存中按指定的大小请求图像。 + 在从照片资源加载图像后，缓存会将其返回给你。此缓存还会在内存中保留最近请求的图像，所以如果你再次请求它们，就不需要重新加载。' +- 内容: 'Your view has an image state property ready to hold the image after loading it. It’s an optional type — Image? — because you want it to start off without any value.' 提示: '' - 翻译: '' -- 内容: 'Follow your photos as they’re retrieved from your photo library and displayed in a scrolling gallery you can browse.' + 翻译: '你的视图有一个名为 image 的状态属性，用来保存加载后的图像。因为你希望它在开始时没有任何值，所以是一个 Image? 可选类型。' +- 内容: 'A view can use its task(priority:_:) modifier to run some code asynchronously whenever the view loads.' 提示: '' - 翻译: '' -- 内容: 'Your data model has a photoCollection property that can represent any collection of items in your photo library. This could be your entire photo library, or just one album, or even the results from a search. You can include all of your photos in your library by initializing photoCollection with a Smart Album .smartAlbumUserLibrary.' + 翻译: '视图可以在加载时，使用其 task(priority:_:) 修饰符来异步运行一些代码。' +- 内容: 'This is where you add code to request a high-resolution image from the cache for the photo asset, specifying the size you want. You also provide the cache with a closure that contains code it can call when it has a result.' 提示: '' - 翻译: '' -- 内容: 'Explore how to transform hand pose images from the camera into readable data your machine learning model can use to predict gestures.' + 翻译: '这块就是你添加的异步代码，作用是从缓存中请求照片资源的高分辨率图像，并指定需要的大小。你还需要提供一个闭包给缓存，此闭包会在请求图像有结果的时候被调用。' +- 内容: 'Your result closure receives one or more calls from the cache. If the cache already contains the image you requested, it immediately calls your closure with the image in its result. If the cache doesn’t have the requested image, then it loads the image from the photo asset and caches it. While loading the image, the cache may first call your closure with a low-resolution image, before finally delivering the high-resolution image in the result.' + 提示: '' + 翻译: '这个闭包会被缓存调用一次或多次。如果缓存中已经有你所请求的图像，那么它会立即用这个图像作为参数来调用此闭包。反之则会从照片资源中加载图像并将其缓存。 + 在加载图像时，获得高分辨率图像之前，缓存可能先用低分辨率图像来调用你的闭包。' +- 内容: 'Your result closure looks for an image in the result. If it finds one, it updates your image property.' 提示: '' - 翻译: '' + 翻译: '你在闭包中会试图解包 result。如果解包成功，则会更新视图的 image 属性。' +- 内容: 'Step 9' + 提示: '' + 翻译: '第九步' - 内容: 'Because you’ve made image a state property, SwiftUI updates your view when its value changes. If image contains a value, you unwrap the image and display it in your view.' 提示: '' - 翻译: '' + 翻译: '因为 image 是一个状态属性，所以当其值改变时，SwiftUI 会自动更新视图。如果 image 不为空，则解包 image 并在视图中显示它。' +- 内容: 'Step 10' + 提示: '' + 翻译: '第十步' +- 内容: 'However, if image doesn’t have a value, you use a ProgressView to display a spinner as a placeholder. Look very carefully, and you might just see this spinner when your view first loads, before the cache has a chance to load an image from the photo asset.' + 提示: '' + 翻译: '然而，如果 image 为空，则会使用 ProgressView 来显示一个作为占位符的指示器。如果你仔细看的话，可能会在视图首次加载，并且缓存还在从照片资源加载图像时，看到这个指示器。'