我已经制作了一个在我的应用程序中使用的按钮样式,但我找不到用文本来完成此操作的方法,所以我最终不得不每次都手动添加 .font 内容。我想知道是否有一种方法可以设置它,以便我可以采用一致的方式来设置文本样式。这是我用来设置按钮样式的代码。
struct mainPageButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.frame(width: 200, height: 60, alignment: .center)
.overlay(RoundedRectangle(cornerRadius: 25)
.stroke(Color(colorManager.secondaryGreen), lineWidth: 8)
)
.padding(.all, 20)
}
}
没有像
...Style
那样的 Text
协议,但你有很多其他选择(也许 Prestyled
不是最好的名字,但你明白了):
单独视图
struct PrestyledText: View {
private let text: String
init(_ text: String) {
self.text = text
}
var body: some View {
Text(text)
.font(.body)
.foregroundColor(.blue)
}
}
修改器
struct Prestyled: ViewModifier {
func body(content: Content) -> some View {
content
.font(.body)
.foregroundColor(.blue)
}
}
扩展
extension View {
var prestyled: some View {
self.font(.body).foregroundColor(.blue)
}
}
// or
extension View {
var prestyled: some View {
self.modifier(Prestyled())
}
}
范围继承
VStack {
Text("Hello")
Text("There")
}
.font(.body)
.foregroundColor(.blue)
以及使用所有这些的示例:
struct ContentView: View {
var body: some View {
VStack {
PrestyledText("Hello")
Text("Hello").prestyled
VStack {
Text("Hello")
Text("There")
}
.font(.body)
.foregroundColor(.blue)
}
}
}
为了扩展 @alladinian 的答案,我们还可以引入一个名为
TextStyle
的独特协议。该协议将使我们能够保持清晰度,确保进一步的可扩展性,并有效地组织我们的代码库。
protocol TextStyle: ViewModifier {}
在这里,为了防止不同样式的
View
扩展溢出,我将继续使用一个扩展,该扩展接收特定的 TextStyle
作为参数,类似于我们的 .buttonStyle
extension Text {
func textStyle<T: TextStyle>(_ style: T) -> some View {
modifier(style)
}
}
struct HeaderTextStyle: TextStyle {
func body(content: Content) -> some View {
content
.font(.system(size: 34, weight: .black, design: .serif))
.foregroundColor(Color(red: 0.968, green: 0.968, blue: 0.968))
}
}
struct SubheadingTextStyle: TextStyle {
func body(content: Content) -> some View {
content
.font(.system(size: 26, weight: .semibold, design: .serif))
.foregroundColor(Color(red: 0.968, green: 0.968, blue: 0.968))
}
}
struct ContentView: View {
var body: some View {
VStack {
Text("Hello, Heading!")
.textStyle(HeadingTextStyle())
Text("Hello, subheading")
.textStyle(SubheadingTextStyle())
}
.containerRelativeFrame([.horizontal, .vertical])
.background(Color(red: 0.149, green: 0.149, blue: 0.149))
}
}