SwiftUI 组件命名指南

你是否习惯于用 View 结尾你的组件名称？按照以下步骤为你的组件提供更好的描述性名称。

1. 查看 body 中的根视图，例如 Image、Text、Label、Button、List 等。
2. 用该根视图名称替换组件的 View 后缀。

以下一些示例可以通过使用 …Style 来实现，但是这些示例故意保持简洁，并且随着组件超出 …Style 的能力，这个想法仍然适用。

Permalink示例

以下设计作为灵感。

// ✅ TransactionCategoryImage instead of...
struct TransactionCategoryView: View {
    let image: String
    var body: some View {
        Image(image)
            .resizable()
            .frame(width: 20, height: 20)
    }
}

// ✅ TransactionDescriptionText instead of...
struct TransactionDescriptionView: View {
    let description: String
    var body: some View {
        Text(description)
            .font(.caption2)
            .foregroundStyle(.primary)
    }
}

// ✅ TransactionCostLabel instead of...
struct TransactionCostView: View {
    let amount: Double
    var body: some View {
        Label(String(describing: amount), systemImage: "dollarsign")
            .font(.caption)
            .foregroundStyle(.secondary)
    }
}

// ✅ TransactionButton instead of...
struct TransactionView: View {
    let transaction: Transaction
    let action: () -> Void
    var body: some View {
        Button(action: action) {
            HStack {
                TransactionCategoryImage(image: transaction.image)
                TransactionDescriptionText(description: transaction.description)
                TransactionCostLabel(amount: transaction.amount)
            }
        }
    }
}

// ✅ TransactionsList instead of...
struct TransactionsView: View {
    let transactions: [Transaction]
    var body: some View {
        List(transactions) { transaction in
            TransactionButton(transaction: transaction) { }
        }
        .listStyle(.plain)
    }
}

Permalink结论

如果你在代码中发现太多以 View 命名的组件实例，导致你打开文件只是为了检查里面有什么，那么这个提示可能适合你。

• 原文(英文)：https://blog.ptrkstr.com/swiftui-component-naming