样式部分

Logo展示区域

首先，我们创建一个新的SwiftUI文件，命名为LogoView。

然后，我们使用Image作为logo展示的区域，示例：

// MARK: Logo展示区域
private var ShowLogoView: some View {
    Image(systemName: logoImage)
        .font(.system(size: 68))
        .foregroundColor(logoColor)
        .frame(minWidth: 80, maxWidth: 120, minHeight: 80, maxHeight: 120)
        .background(bgColor)
        .cornerRadius(8)
}
复制代码

上述代码中，我们声明了三个存储变量logoImage、logoColor、bgColor，分别可以调整logo的图片、填充色、背景色。

在主要展示页面，我们使用Image构建logo视图，并通过修饰符调整logo的图片大小、logo颜色、整体大小、背景填充颜色和圆角。

Segment分段选择

下面我们来实现切换选择调整logo各项参数的区域，我们通过Segment分段选择来区分开，示例：

// MARK: 分选选择
private var SegmentView: some View {
    Picker("分段选择", selection: $selectedSegment) {
        ForEach(0 ..< 3) {
            Text(self.segmentTitle[$0]).tag($0)
       }
    }
    .pickerStyle(SegmentedPickerStyle())
    .padding()
}
复制代码

上述代码中，我们声明了两个变量segmentTitle、selectedSegment。

segmentTitle用来存储分段器的标题，selectedSegment来记录当前我们选中的是分段器的哪一项。然后我们使用Picker实现了分段器的样式，使用ForEach遍历分段器选项和内容，这里分段器的样式需要选择SegmentedPickerStyle。

然后我们在LogoView视图中展示，看起来还不错。

功能交互

背景颜色切换

背景颜色我们使用网格布局来实现，首先我们先声明了网格的列数为4列，然后颜色部分，我们取回之前色卡部分的颜色。

private var gridItemLayout = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
@State var cardItems: [CardModel] = []
复制代码

然后构建背景颜色选择的页面，示例：

//MARK: 背景颜色
private var BGColorView: some View {
    ScrollView {
        LazyVGrid(columns: gridItemLayout, spacing: 20) {
            ForEach(cardItems, id: \.cardColorRBG) { item in
                Rectangle()
                    .fill(Color.Hex(item.cardBGColor))
                    .frame(width: 80, height: 80)
                    .cornerRadius(8)
            }
        }
    }.padding()
}
复制代码

上述代码中，我们构建了一个纵向网格视图，spacing间距为20，然后通过遍历cardItems色卡数组中的数据，然后遍历出一个个色块。

我们把网络请求补充上，然后将BGColorView在主视图展示看看效果：

交互部分，当我们点击背景颜色色块时，上面logo展示区域的logo也同时需要更改其背景颜色，我们来实现下。示例：

.onTapGesture {
    bgColor = Color.Hex(item.cardBGColor)
}
复制代码

我们给背景颜色部分的色卡添加一个点击事件，点击背景颜色色块时，将颜色赋予logo背景颜色。

这样，我们就完成了背景颜色的设置。

图标图片切换

图标部分切换的原理类似，我们这里换成本地的数据做一下演示，先准备一些Apple的系统图标作为示例：

private var appleSymbols = ["house.circle", "person.circle", "bag.circle", "location.circle", "bookmark.circle", "gift.circle", "globe.asia.australia.fill", "lock.circle", "pencil.circle", "link.circle"]
复制代码

然后也通过LazyVGrid纵向网格和ForEach循环的方式遍历appleSymbols图片数组的数据，示例：

// MARK: 图标切换
private var SwitchIconView: some View {
    ScrollView {
        LazyVGrid(columns: gridItemLayout, spacing: 20) {
            ForEach(appleSymbols.indices, id: \.self) { item in
                Image(systemName: appleSymbols[item])
                    .font(.system(size: 30))
                    .frame(width: 80, height: 80)
                    .background(bgColor)
                    .cornerRadius(8)
                    .onTapGesture {
                        logoImage = appleSymbols[item]
                    }
            }
        }
    }.padding()
}
复制代码

上述代码中，当我们创建了一个图标网格，然后遍历appleSymbols图片数组的数据，在点击每个图片时，我们把点击的图片赋值到logo区域中logoImage的变量，就实现了切换图标的效果。

我们来运行下看看效果：

同理，图标填充色我们就把背景颜色那块内容复制一份过来，然后当点击颜色的时候，赋值给logoColor变量就完成了，这里就不做演示了。

分段选项切换

最后是分段器的切换，我们可以根据selectedSegment变量作为切换状态值，当selectedSegment处于不同的值时，我们切换不同的视图。示例：

VStack(spacing: 60) {
    Spacer()
    ShowLogoView
    Spacer()
    VStack(spacing: -10) {
        SegmentView
        if selectedSegment == 0 {
            BGColorView
        } else if selectedSegment == 1 {
            SwitchIconView
        } else {
            LogoColorView
        }
    }
}
复制代码

完成后，我们尝试更改Logo背景颜色、Logo图标、Logo填充色来看看效果。

功能进阶

完成上述内容后，总觉得好像还差点东西，思来想去总算发现一个问题。

当前我们的颜色和Logo图标都是内置的，没有办法自定义。背景颜色和填充色还好，但是Logo图片不能自定义，就…….不够优雅。

接下来，我们来实现自定义Logo图标的方法，最简单的就是本地上传图片。

我们设想下通用的交互，当我们点击图标时，它弹出一个弹窗，让我们选择修改的来源。常用的图片来源有2种：相册、拍照，这里我们只完成相册的部分，毕竟应该很少人会直接拍照作为Logo图标。

打开Sheet弹窗

我们使用官方提供的Sheet弹窗来完成来源选择交互，示例：

// MARK: - 选择来源弹窗
private var chooseImageSheet: ActionSheet {
    let action = ActionSheet(title: Text("选择来源"), buttons: [.default(Text("相册"), action: {
        // 打开相册
    }), .cancel(Text("取消"), action: {
    })])
    return action
}
复制代码

上述代码中，我们构建了一个打开Sheet弹窗的视图chooseImageSheet，它的类型是ActionSheet，即触发Sheet弹窗。

然后我们完善了Sheet弹窗里的相关内容，标题、操作（相册、取消）。

然后我们需要声明一个变量，判断是否打开Sheet弹窗，示例：

@State var showChooseImageSheet: Bool = false
复制代码

完成后，我们在LogoView中使用.actionSheet修饰符实现打开Sheet弹窗的交互。示例：

// 选择来源
.actionSheet(isPresented: $showChooseImageSheet, content: {chooseImageSheet })
复制代码

选择本地图片

我们已经成功调用Sheet弹窗了，可选项为相册、取消，取消即自动收起Sheet弹窗，而当我们点击相册的时候，需要调用本地相册。

接下来，我们来实现唤起本地相册的功能。

我们新建一个Swift文件，命名为ImagePickerView，然后实现以下方法：

import SwiftUI
public struct ImagePickerView: UIViewControllerRepresentable {
    private let sourceType: UIImagePickerController.SourceType
    private let onImagePicked: (UIImage) -> Void
    @Environment(\.presentationMode) private var presentationMode
    public init(sourceType: UIImagePickerController.SourceType, onImagePicked: @escaping (UIImage) -> Void) {
        self.sourceType = sourceType
        self.onImagePicked = onImagePicked
    }
    public func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.sourceType = self.sourceType
        picker.delegate = context.coordinator
        return picker
    }
    public func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}
    public func makeCoordinator() -> Coordinator {
        Coordinator(
            onDismiss: { self.presentationMode.wrappedValue.dismiss() },
            onImagePicked: self.onImagePicked
        )
    }
    final public class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
        private let onDismiss: () -> Void
        private let onImagePicked: (UIImage) -> Void
        init(onDismiss: @escaping () -> Void, onImagePicked: @escaping (UIImage) -> Void) {
            self.onDismiss = onDismiss
            self.onImagePicked = onImagePicked
        }
        public func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
            if let image = info[.originalImage] as? UIImage {
                self.onImagePicked(image)
            }
            self.onDismiss()
        }
        public func imagePickerControllerDidCancel(_: UIImagePickerController) {
            self.onDismiss()
        }
    }
}
复制代码

上述代码中，创建了一个公开的结构体ImagePickerView，遵循UIViewControllerRepresentable协议。

然后调用系统的UIImagePickerController选择图片方法，调用成功后就关闭弹窗并且返回选中的图片。

代码中大部分内容为实现选择图片的相关协议和返回UIImage类型图片的方法，在这里就不赘述了。

我们回到LogoView文件中，我们先声明必要的参数。示例：

@State var showImagePicker: Bool = false
@State var image: UIImage?
复制代码

上述代码中，showImagePicker是我们是否打开选择图片的弹窗，而image则用来接收我们相册中选择的图片。

我们使用.sheet调用打开本地相册的方法。示例：

// 本地图片选择弹窗
.sheet(isPresented: $showImagePicker) {
    ImagePickerView(sourceType: .photoLibrary) { image in
        self.image = image
    }
}
复制代码

我们使用showImagePicker绑定了打开本地图片弹窗的条件，我们把这个触发条件放在我们点击“相册”选项的操作。示例：

图标图片替换

上述代码中，我们已经通过调用本地相册的方法，获得了选中的图片，这时我们需要替换当前Logo的图标。

我们创建多一个视图来展示选中图片后回调的内容。示例：

// MARK: 本地图片
private var ShowImageView: some View {
    Image(uiImage: image!)
        .resizable()
        .frame(width: 68, height: 68, alignment: .center)
        .clipShape(Circle())
        .padding(20)
        .background(bgColor)
        .cornerRadius(8)
        .onTapGesture {
            self.showChooseImageSheet.toggle()
        }
}
复制代码