SwiftUIでMaterialDesignライクなIconText作ってみた
そもそもMaterial Designを使えばいいじゃんって話は置いておいて。。。
import SwiftUI
import SwiftUICore
struct IconText<LeadingImageContent, Content, TrailingImageContent>: View where LeadingImageContent: View, Content: View, TrailingImageContent: View {
let backgroundColor: Color
@ViewBuilder let leadingImage: () -> LeadingImageContent
@ViewBuilder let content: () -> Content
@ViewBuilder let trailingImage: () -> TrailingImageContent
init(
backgroundColor: Color,
@ViewBuilder leadingImage: @escaping () -> LeadingImageContent = { EmptyView() },
@ViewBuilder content: @escaping () -> Content,
@ViewBuilder trailingImage: @escaping () -> TrailingImageContent = { EmptyView() }
) {
self.backgroundColor = backgroundColor
self.leadingImage = leadingImage
self.content = content
self.trailingImage = trailingImage
}
var body: some View {
HStack {
leadingImage().padding(5)
content()
trailingImage().padding(5)
}
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background(
RoundedRectangle(cornerRadius: 10)
.fill(backgroundColor)
)
.padding(2)
}
}使い方はこんな感じ
#Preview {
VStack {
IconText(
backgroundColor: .blue,
content: {
Text("アイコンなし")
}
)
IconText(
backgroundColor: .blue,
leadingImage: {
Image(systemName: "paperplane")
},
content: {
Text("前アイコンのみ")
}
)
IconText(
backgroundColor: .blue,
content: {
Text("後ろアイコンのみ")
},
trailingImage: {
Image(systemName: "paperplane")
}
)
IconText(
backgroundColor: .blue,
leadingImage: {
Image(systemName: "paperplane")
},
content: {
Text("両アイコンあり")
},
trailingImage: {
Image(systemName: "paperplane")
}
)
}
}見た目はこんな感じ
今日の一言
iOS勉強してわかる、Androidがいかに親切か、わかりやすいか
Kotlin Love
