SwiftUI中创建类似ButtonStyle的CellStyle协议遇到问题

我们可以模仿ButtonStyle的设计思路，完成CellStyle协议的定义，并实现一个仅负责核心文本内容的CellView容器，其余UI元素（如图片、装饰布局等）完全通过CellStyle来定制。

1. 完善CellStyle协议与配置结构 #

先调整协议和配置结构，确保能传递CellView的核心内容，同时保留样式扩展的灵活性：

import SwiftUI

// 定义CellStyle协议，对齐ButtonStyle的设计逻辑
protocol CellStyle {
    associatedtype Body: View
    typealias Configuration = CellStyleConfiguration
    
    func makeBody(configuration: Configuration) -> Body
}

// 配置结构体，用于传递CellView的核心内容给样式
struct CellStyleConfiguration {
    // 核心标题视图，由CellView提供基础文本内容
    struct Title: View {
        let text: String
        var body: some View {
            Text(text)
        }
    }
    
    let title: Title
}

// 可选：给CellStyle添加环境键，支持全局设置默认样式
struct CellStyleKey: EnvironmentKey {
    static var defaultValue: any CellStyle = DefaultCellStyle()
}

extension EnvironmentValues {
    var cellStyle: any CellStyle {
        get { self[CellStyleKey.self] }
        set { self[CellStyleKey.self] = newValue }
    }
}

2. 实现CellView容器 #

CellView作为通用容器，仅接收标题文本和样式，核心布局逻辑完全交给CellStyle处理：

struct CellView<Style: CellStyle>: View {
    let title: String
    let style: Style
    
    // 直接指定样式的初始化方法
    init(title: String, style: Style) {
        self.title = title
        self.style = style
    }
    
    // 重载初始化方法，支持从环境中获取默认样式
    init(title: String) where Style == AnyCellStyle {
        self.title = title
        self.style = AnyCellStyle(style: EnvironmentValues().cellStyle)
    }
    
    var body: some View {
        // 创建配置并传递给样式的makeBody方法
        style.makeBody(configuration: .init(title: .init(text: title)))
    }
}

// 样式类型擦除包装器，支持环境默认样式的传递
struct AnyCellStyle: CellStyle {
    private let _makeBody: (CellStyleConfiguration) -> AnyView
    
    init<S: CellStyle>(style: S) {
        _makeBody = { configuration in
            AnyView(style.makeBody(configuration: configuration))
        }
    }
    
    func makeBody(configuration: CellStyleConfiguration) -> some View {
        _makeBody(configuration)
    }
}

3. 示例自定义CellStyle #

下面是两个自定义样式的例子，展示如何通过CellStyle添加额外UI元素：

示例1：带左侧图标的单元格样式 #

struct IconCellStyle: CellStyle {
    let iconName: String
    
    func makeBody(configuration: CellStyleConfiguration) -> some View {
        HStack(spacing: 12) {
            Image(systemName: iconName)
                .foregroundColor(.blue)
            configuration.title
                .font(.system(size: 16))
            Spacer()
        }
        .padding(.vertical, 12)
        .padding(.horizontal, 16)
        .background(Color(.systemGray6))
        .cornerRadius(8)
    }
}

示例2：带右侧箭头的列表单元格样式 #

struct ArrowCellStyle: CellStyle {
    func makeBody(configuration: CellStyleConfiguration) -> some View {
        HStack {
            configuration.title
                .font(.system(size: 16))
            Spacer()
            Image(systemName: "chevron.right")
                .foregroundColor(.gray)
        }
        .padding(.vertical, 12)
        .padding(.horizontal, 16)
        .background(Color.white)
        .overlay(
            Rectangle()
                .frame(height: 0.5)
                .foregroundColor(.gray.opacity(0.3))
                .alignmentGuide(.bottom) { $0[.bottom] }
        )
    }
}

// 默认样式：仅展示标题
struct DefaultCellStyle: CellStyle {
    func makeBody(configuration: CellStyleConfiguration) -> some View {
        configuration.title
            .padding(.vertical, 12)
            .padding(.horizontal, 16)
    }
}

4. 使用示例 #

在视图中直接调用CellView并指定样式即可：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 8) {
            CellView(title: "个人信息", style: IconCellStyle(iconName: "person.circle"))
            
            CellView(title: "设置", style: ArrowCellStyle())
            
            // 使用环境中的默认样式
            CellView(title: "帮助与反馈")
        }
        .padding()
        .environment(\.cellStyle, DefaultCellStyle())
    }
}

这种设计实现了视图核心内容与样式的解耦，CellView只负责传递标题信息，所有额外的UI元素、布局逻辑都通过CellStyle协议来扩展，完全对齐ButtonStyle的设计思路。

内容的提问来源于stack exchange，提问作者Rocker