Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complete translation for imagegallery #30

Merged
merged 3 commits into from
Aug 27, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 59 additions & 59 deletions project/sample-apps/imagegallery.yml
Original file line number Diff line number Diff line change
@@ -1,177 +1,177 @@
- 内容: 'Image Gallery'
提示: ''
翻译: ''
翻译: '图库'
- 内容: 'Retrieve and display images from an asset catalog or a photo library.'
提示: ''
翻译: ''
翻译: '从资源目录或照片库中检索和显示图片。'
- 内容: 'Welcome to the Image Gallery app. This walkthrough shows how to create a grid of images, complete with photo-picking and -editing functionality.'
提示: ''
翻译: ''
翻译: '欢迎使用图片库应用。本演示展示了如何创建一个图片网格,同时创建选择照片和编辑图片的功能。'
- 内容: 'This sample is an extension of two simpler implementations: Organizing with Grids and Editing Grids. This walkthrough focuses on solving some common issues after your grid displays images, instead of shapes or SF Symbols.'
提示: ''
翻译: ''
翻译: '这个示例是两个更简单的实现的扩展:组织网格和编辑网格。本演示着重解决网格显示图片后的一些常见问题,而不是显示形状或 SF Symbols。'
- 内容: 'Larger images can load slowly, which can cause noticeable delays when loading your app’s UI. This sample focuses on unblocking delays by showing progress indicators until each image loads and keeping your app responsive during the loading process.'
提示: ''
翻译: ''
翻译: '较大的图片加载可能会较慢,这可能会在加载应用程序的用户界面时造成明显的延迟。这个示例着重于在每个图片加载完成前显示加载指示器,以及在加载过程中保持应用程序可响应,来避免阻塞延迟。'
- 内容: 'Sharing App Data'
提示: ''
翻译: ''
翻译: '共享应用数据'
- 内容: 'Learn how the app passes photo data from DataModel to its view hierarchy.'
提示: ''
翻译: ''
翻译: '了解应用程序如何从数据模型(DataModel)向其视图层次结构传递照片数据。'
- 内容: 'Step 1'
提示: ''
翻译: ''
翻译: '第一步'
- 内容: 'Image Gallery loads a gallery of images when you first launch the app. Because the images are so large, and you don’t want the app to lag when loading them all at the same time, you’ll use asynchronous requests to keep the app responsive even when data retrieval is slow.'
提示: ''
翻译: ''
翻译: '图片库在你首次启动应用程序时会加载一组图片。由于图片非常大,你不希望应用程序在同时加载所有图片时出现延迟,所以你将使用异步请求来保持应用程序即使在数据检索缓慢时也能保持响应。'
- 内容: 'Step 2'
提示: ''
翻译: ''
翻译: '第二步'
- 内容: 'To create dataModel as a state object, apply the @StateObject property wrapper and provide an initial value that conforms to the ObservableObject protocol. SwiftUI manages storage for a state object, and updates all of the child views that use the value when the published values change.'
提示: ''
翻译: ''
翻译: '要将数据模型(dataModel)创建为状态对象,应用 @StateObject 属性包装器并提供符合 ObservableObject 协议的初始值。SwiftUI 会管理状态对象的存储,并在发布的值更改时更新所有使用该值的子视图。'
- 内容: 'Step 3'
提示: ''
翻译: ''
翻译: '第三步'
- 内容: 'NavigationStack passes in the DataModel instance using the .environmentObject modifier, making the observable object available to all of the NavigationStack’s child views. As a result, those views can access the data from dataModel to perform various tasks, such as loading image views asynchronously or updating the grid view when the data changes.'
提示: ''
翻译: ''
翻译: 'NavigationStack 使用 .environmentObject 修饰符传递数据模型(DataModel)实例,使可观察对象(ObservableObject)对 NavigationStack 的所有子视图可用。因此,这些视图可以访问数据模型(dataModel)中的数据来执行各种任务,例如异步加载图像视图或在数据更改时更新网格视图。'
- 内容: 'Modeling an Item'
提示: ''
翻译: ''
翻译: '建模项目'
- 内容: 'Explore how the Item type models a grid item’s data and adds Identifiable conformance.'
提示: ''
翻译: ''
翻译: '了解如何使用项目类型(Item)对网格项的数据进行建模并添加 Identifiable 符合性。'
- 内容: 'When you use ForEach to construct a collection view, such as a list or grid, SwiftUI wants to uniquely identify each view so it can find and update them. To make this easier, you can create a model that conforms to Identifiable, which creates an id property requirement.'
提示: ''
翻译: ''
翻译: '当你使用 ForEach 构造集合视图(如列表或网格)时,SwiftUI 想要唯一标识每个视图,以便它可以找到并更新它们。为了简化这一过程,你可以创建符合 Identifiable 的模型,这一协议要求 id 属性。'
- 内容: 'Your Item contains an id property that SwiftUI uses to uniquely identify the view.'
提示: ''
翻译: ''
翻译: '你的项目类型(Item)包含 SwiftUI 用来标识视图唯一性的 id 属性。'
- 内容: 'Item also has a url property that the app uses to identify the location of the corresponding image using a path to the file. AsyncImage uses this URL in GridItemView to asynchronously load the image.'
提示: ''
翻译: ''
翻译: '项目类型(Item)还具有 url 属性,应用程序使用该属性,通过文件路径来标识相应图像的位置。AsyncImage 在 GridItemView 中使用该 URL 来异步加载图像。'
- 内容: 'Data Model: Gathering Image URLs'
提示: ''
翻译: ''
翻译: '数据模型:收集图像 URL'
- 内容: 'Learn how your app uses a data model to load and store all photo data.'
提示: ''
翻译: ''
翻译: '了解你的应用程序如何使用数据模型加载和存储所有照片数据。'
- 内容: 'DataModel is an observable object that gathers file URLs from images in your document directory as well as from your bundle resources. It uses these URLs to populate an array of Item instances which display as the content of your grid.'
提示: ''
翻译: ''
翻译: '数据模型(DataModel)是一个可观察对象(ObservableObject),它从文档目录中的图像以及包资源中收集文件 URL。它使用这些 URL 来填充项目类型(Item)实例数组,这些数组将显示为网格的内容。'
- 内容: 'DataModel publishes an array of item values, each of which correlates to an image in the grid. Because the code marks this value as @Published, any time you add or delete an Item from this array, SwiftUI updates the grid view (and any other views that use this value) to reflect those changes.'
提示: ''
翻译: ''
翻译: '数据模型(DataModel)发布数组,数组中的每个 item 值与网格中的一个图像相关联。由于代码将此值标记为 @Published,所以每当你从该数组中添加或删除项目类型(Item)时,SwiftUI 都会更新网格视图(以及使用此值的任何其他视图)以反映这些更改。'
- 内容: 'When you initialize DataModel, it searches the document directory for any images you’ve added, gathering their corresponding URLs and appending them to the items array. Your app stores data locally in this directory, so searching here allows you to display any images you added while using the app.'
提示: ''
翻译: ''
翻译: '初始化数据模型(DataModel)时,它会搜索文档目录以查找你添加的任何图像,收集图像对应的 URL 并将其追加到 items 数组中。你的应用程序会在此目录中本地存储数据,因此在此处搜索将允许你显示使用应用程序时添加的任何图像。'
- 内容: 'Step 4'
提示: ''
翻译: ''
翻译: '第四步'
- 内容: 'Similarly, you’ll load all image URLs from the bundle resources directory and add them to items. Bundle resources is the directory of images that are included with the project, as opposed to images that you added yourself.'
提示: ''
翻译: ''
翻译: '同样地,你将从包资源目录加载所有图像 URL 并将其添加到 items 数组中。包资源是随项目一起配送的图像目录,与你自己添加的图像相对。'
- 内容: 'Step 5'
提示: ''
翻译: ''
翻译: '第五步'
- 内容: 'DataModel provides methods for adding and removing items from items. addItem adds a new item at the first index of the array so you can see when new images appear in the view.'
提示: ''
翻译: ''
翻译: '数据模型(DataModel)为从 items 数组中添加和移除项提供方法。addItem 在数组的第一个索引处添加新项,以便你可以看到视图中出现新的图像。'
- 内容: 'Step 6'
提示: ''
翻译: ''
翻译: '第六步'
- 内容: 'removeItem removes an item by finding its index and removing it from the items array. The method also removes the item’s corresponding image file from the document directory, if it exists there. This ensures that the image won’t reload from local app storage the next time you launch the app.'
提示: ''
翻译: ''
翻译: 'removeItem 通过查找索引并从 items 数组中移除它来移除一个项。如果文档目录中存在对应的图像文件,该方法也会将其移除。这确保在下次启动应用程序时图像不会从本地应用程序存储重新加载。'
- 内容: 'Creating a Grid Item'
提示: ''
翻译: ''
翻译: '创建网格项'
- 内容: 'Find out how to load an image asynchronously from a URL using AsyncImage.'
提示: ''
翻译: ''
翻译: '了解如何使用 AsyncImage 从 URL 异步加载图像。'
- 内容: 'GridItemView represents a single item of your grid, an image view that displays the photo defined by an Item instance.'
提示: ''
翻译: ''
翻译: 'GridItemView 表示网格的单个项,一个显示由项目类型(Item)实例定义的照片的图像视图。'
- 内容: 'A GridItemView contains properties for item and size. The item property provides the URL to asynchronously load the image, while the size property provides the value for the height and width of the image and its placeholder.'
提示: ''
翻译: ''
翻译: 'GridItemView 包含 item 和 size 属性。item 属性提供异步加载图像的 URL,而 size 属性提供图像及其占位符的高度和宽度的值。'
- 内容: 'In the body of your GridItemView, you’ll create your image view. Since you’ll have a conditional editing UI overlaid on top of your image, wrap the image in a ZStack.'
提示: ''
翻译: ''
翻译: '在 GridItemView 的主体中,你将创建图像视图。由于你将在图像上面叠加条件编辑 UI,因此请将图像包装在 ZStack 中。'
- 内容: 'You can initialize an AsyncImage with the item.url value to load the image asynchronously. Because you have many images to load when the app first launches, you can load them asynchronously to allow the app to keep running the rest of its code while it waits for the images to return. This prevents any noticable lag in your UI.'
提示: ''
翻译: ''
翻译: '你可以使用 item.url 值初始化 AsyncImage 以异步加载图像。由于在应用程序首次启动时有许多图像要加载,因此你可以异步加载它们,以允许应用程序在等待图像返回时继续运行其余代码。这可避免 UI 中出现任何明显的延迟或卡顿。'
- 内容: 'AsyncImage contains a content closure that provides an instance of a SwiftUI Image. You’ll use this instance to create your image view. You’ll add the .resizable and .scaledToFill modifiers to scale the image to fill the available space of the view.'
提示: ''
翻译: ''
翻译: 'AsyncImage 包含一个内容闭包,它提供了一个 SwiftUI Image 的实例。你将使用此实例来创建图像视图。你将添加 .resizable 和 .scaledToFill 修饰符来缩放图像以填充视图的可用空间。'
- 内容: 'AsyncImage uses a placeholder to show some content while the image loads. This placeholder uses a SwiftUI ProgressView which displays as a spinning circle.'
提示: ''
翻译: ''
翻译: 'AsyncImage 使用占位符在加载图像时显示一些内容。此占位符使用 SwiftUI 的 ProgressView:旋转着的圆圈。'
- 内容: 'Creating Your Gallery'
提示: ''
翻译: ''
翻译: '创建相册'
- 内容: 'Learn how to put together a grid view using a series of SwiftUI built-in and composed views.'
提示: ''
翻译: ''
翻译: '了解如何使用一系列 SwiftUI 内置和组合视图组合网格视图。'
- 内容: 'GridView is where you’ll create your image gallery. If you need to review the basics of creating a grid, check out Color Grid. In this walkthrough, you’ll learn how to implement the grid using a model type, Item, and an observable object, dataModel.'
提示: ''
翻译: ''
翻译: 'GridView 是你创建图片库的地方。如果你需要复习创建网格的基础知识,请查看色块网格(Color Grid)。在本演示中,你将学习如何使用模型类型 Item 和可观察对象 dataModel 来实现网格。'
- 内容: 'To access the app’s dataModel, you define an @EnvironmentObject of type DataModel, which gives you access to the environment object passed into the top-level view of the view hierarchy in ImageGalleryApp.swift.'
提示: ''
翻译: ''
翻译: '要访问应用程序的 dataModel,你定义一个类型为 DataModel 的 @EnvironmentObject,这使你可以访问位于 ImageGalleryApp.swift 顶层视图的环境对象。'
- 内容: 'The data for populating the grid comes from an array of Item instances (found in dataModel.items), each of which references a single image URL.'
提示: ''
翻译: ''
翻译: '用于填充网格的数据来自 Item 实例数组(位于 dataModel.items 中),每个实例都引用单个图像 URL。'
- 内容: 'To create the grid, you’ll nest a LazyVGrid inside of a ScrollView, which allows the content of the grid to scroll vertically, if necessary.'
提示: ''
翻译: ''
翻译: '要创建网格,你将在 ScrollView 内嵌套一个 LazyVGrid,这允许网格的内容在需要时垂直滚动。'
- 内容: 'Your ForEach loop iterates through dataModel.items, and creates a GridItemView based upon each item value in the array. Because each item instance is Identifiable, you don’t need an id parameter when creating your grid views. Instead, SwiftUI uses the id property of each item to uniquely identify it.'
提示: ''
翻译: ''
翻译: '你的 ForEach 循环遍历 dataModel.items,并根据数组中的每个 item 值创建一个 GridItemView。因为每个 item 实例都是可识别(Identifiable)的,所以在创建网格视图时不需要 id 参数。相反,SwiftUI 使用每个 item 的 id 属性作为唯一标识。'
- 内容: 'To provide relative size information of a parent view to its child views, you can use a GeometryReader. This gives you information on the width and height of the parent view depending on how much screen size is available. You can access this information using the closure value and use it to set the size of a size of a child view.'
提示: ''
翻译: ''
翻译: '要向子视图提供父视图的相对大小信息,可以使用 GeometryReader。这将为你提供父视图的宽度和高度信息,具体取决于可用的屏幕大小。你可以使用闭包值访问此信息,并使用它来设置子视图的大小。'
- 内容: 'Step 7'
提示: ''
翻译: ''
翻译: '第七步'
- 内容: 'To simplify the code in GridView, generate each view of the grid using a GridItemView, which handles all of the asynchronous image loading as well as transitions between editing states.'
提示: ''
翻译: ''
翻译: '为了简化 GridView 中的代码,使用 GridItemView 生成网格的每个视图,它同时也将处理所有的异步图像加载以及状态编辑之间的转场。'
- 内容: 'Step 8'
提示: ''
翻译: ''
翻译: '第八步'
- 内容: 'To initialize GridItemView, you pass in the current item from the ForEach loop as well as the width of the parent view provided from GeometryReader. GridItem uses geo.size.width as the value for its height and width, which creates a square-shaped grid item.'
提示: ''
翻译: ''
翻译: '要初始化 GridItemView,你需传入 ForEach 循环中的当前项以及从 GeometryReader 提供的父视图的宽度。GridItem 将 geo.size.width 作为其高度和宽度的值,这将创建一个正方形的网格项。'
- 内容: 'Adding an Image to the Gallery'
提示: ''
翻译: ''
翻译: '向相册添加图片'
- 内容: 'Explore how to add and edit photos in the gallery.'
提示: ''
翻译: ''
翻译: '探索如何在相册中添加和编辑照片。'
- 内容: 'To add a new photo to the grid, you’ll use the state value isAddingPhoto. You’ll toggle this value to true whenever you press the Add button (+) in the toolbar.'
提示: ''
翻译: ''
翻译: '要向网格添加新照片,你将使用状态值 isAddingPhoto。每当你在工具栏中按 Add 按钮(+)时,都会切换此值为 true。'
- 内容: 'To edit your photo grid, you’ll use the state value isEditing. You’ll add a Remove button (X) on top of each image when the value toggles to true.'
提示: ''
翻译: ''
翻译: '要编辑照片网格,你将使用状态值 isEditing。当该值切换为 true 时,你会在每个图像上方添加 Remove 按钮(X)。'
- 内容: 'The .toolbar modifier contains two toolbar items: one to edit photos in the grid and one to add a new photo. These buttons toggle the state values isEditing and isAddingPhoto, respectively.'
提示: ''
翻译: ''
翻译: '.toolbar 修饰符包含两个工具栏项:一个用于编辑网格中的照片,一个用于添加新照片。这些按钮分别切换状态值 isEditing 和 isAddingPhoto。'
- 内容: 'When isEditing is true, you’ll show a Remove button (X) on top of the images.'
提示: ''
翻译: ''
翻译: '当 isEditing 为 true 时,你会在图片上方显示 Remove 按钮(X)。'
- 内容: 'When a person taps the Remove button (X), the code removes the current item from dataModel.items. Because dataModel.items is a published value, this change causes SwiftUI to update the grid view’s appearance and remove the item.'
提示: ''
翻译: ''
翻译: '当用户点击 Remove 按钮(X)时,代码会从 dataModel.items 中删除当前项。因为 dataModel.items 是一个已发布的值,所以这个更改会导致 SwiftUI 更新网格视图的外观并删除该项。'
- 内容: 'When isAddingPhoto is true, a sheet displays the PhotoPicker modally. In PhotoPicker, selecting a new photo adds the corresponding item to DataModel.items. This causes SwiftUI to update the grid view and add the corresponding image.'
提示: ''
翻译: ''
翻译: '当 isAddingPhoto 为 true 时,sheet 会以模式方式显示 PhotoPicker。在 PhotoPicker 中,选择新照片会将对应的项添加到 DataModel.items 中。这会导致 SwiftUI 更新网格视图并添加对应的图像。'
- 内容: 'Laying Out Views'
提示: ''
翻译: ''
翻译: '布局视图'
- 内容: 'Organize, size and align view layouts.'
提示: ''
翻译: ''
翻译: '组织、调整大小并对齐视图布局。'
Loading