SwiftUI 简明教程：打造 Logo 生成器

2023-11-21 01:50:19

前言

欢迎来到 SwiftUI 极简教程的第 41 章！在本教程中，我们将学习如何使用 Segment 分段器、LazyVGrid 垂直网格和 ImagePicker 图片选择器构建一个精美的 Logo 生成器。在上一章中，我们完善了 SearchBar 搜索栏、TabView 标签页和 Form 表单等组件，相信你已经迫不及待地想要了解更多 SwiftUI 的技巧了。那么，让我们开始吧！

Segment 分段器

Segment 分段器是一种可视化的选择器，允许用户在多个选项之间进行选择。它经常被用于切换不同的视图、模式或功能。在 SwiftUI 中，可以使用 Picker 组件来创建 Segment 分段器。

首先，我们需要定义一个 enum 来表示 Segment 分段器中的选项。在本例中，我们将创建三个选项，分别为 "Logo 1"、"Logo 2" 和 "Logo 3"。

enum LogoType: String, CaseIterable {
    case logo1 = "Logo 1"
    case logo2 = "Logo 2"
    case logo3 = "Logo 3"
}

接下来，我们需要创建一个 State 变量来存储当前选中的选项。

@State private var selectedLogoType: LogoType = .logo1

最后，我们可以使用 Picker 组件来创建 Segment 分段器。

Picker("Logo Type", selection: $selectedLogoType) {
    ForEach(LogoType.allCases) { logoType in
        Text(logoType.rawValue).tag(logoType)
    }
}

LazyVGrid 垂直网格

LazyVGrid 垂直网格是一种可滚动的网格视图，可以自动调整其大小以适应屏幕的宽度。它非常适合展示大量数据，例如图片、文本或其他视图。在 SwiftUI 中，可以使用 LazyVGrid 组件来创建垂直网格。

LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
    ForEach(0..<10) { index in
        Text("Item \(index)")
            .frame(width: 100, height: 100)
            .background(Color.gray)
    }
}

在上面的代码中，我们使用 GridItem 来指定网格的列。adaptive(minimum:) 表示网格的列可以自动调整其宽度，但最小宽度为 100。

ImagePicker 图片选择器

ImagePicker 图片选择器允许用户从设备的相册或相机中选择图片。在 SwiftUI 中，可以使用 ImagePicker 组件来创建图片选择器。

ImagePicker(selection: $selectedImage, label: {
    Text("Select Image")
})

在上面的代码中，我们需要定义一个 State 变量来存储选中的图片。当用户选择图片后，selectedImage 变量将被更新。

Logo 生成器

现在，我们可以将这些组件组合起来创建一个 Logo 生成器。

首先，我们需要创建一个 VStack 来垂直排列 Segment 分段器和 LazyVGrid 垂直网格。

VStack {
    Picker("Logo Type", selection: $selectedLogoType) {
        ForEach(LogoType.allCases) { logoType in
            Text(logoType.rawValue).tag(logoType)
        }
    }

    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
        ForEach(0..<10) { index in
            Text("Item \(index)")
                .frame(width: 100, height: 100)
                .background(Color.gray)
        }
    }
}

接下来，我们需要创建一个 HStack 来水平排列图片选择器和生成的 Logo。

HStack {
    ImagePicker(selection: $selectedImage, label: {
        Text("Select Image")
    })

    Image(uiImage: selectedImage)
        .resizable()
        .frame(width: 100, height: 100)
}

最后，我们可以将这两个 VStack 和 HStack 组合起来创建一个完整的 Logo 生成器。

struct LogoGenerator: View {
    @State private var selectedLogoType: LogoType = .logo1
    @State private var selectedImage: UIImage?

    var body: some View {
        VStack {
            Picker("Logo Type", selection: $selectedLogoType) {
                ForEach(LogoType.allCases) { logoType in
                    Text(logoType.rawValue).tag(logoType)
                }
            }

            LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
                ForEach(0..<10) { index in
                    Text("Item \(index)")
                        .frame(width: 100, height: 100)
                        .background(Color.gray)
                }
            }

            HStack {
                ImagePicker(selection: $selectedImage, label: {
                    Text("Select Image")
                })

                Image(uiImage: selectedImage)
                    .resizable()
                    .frame(width: 100, height: 100)
            }
        }
    }
}