ViewModifier/视图修饰符, ButtonStyle/按钮样式 的使用

1. ViewModifier 视图修饰符

1.1 创建默认按钮视图修饰符 ViewModifierBootcamp.swift

Swift 复制代码
import SwiftUI

/// 默认按钮修饰符
struct DefaultButtonViewModifier: ViewModifier{
    let bcakgroundColor: Color
    func body(content: Content) -> some View {
        content
            .foregroundColor(.white)
            .frame(height: 55)
            .frame(maxWidth: .infinity)
            .background(bcakgroundColor)
            .cornerRadius(10)
            .shadow(radius: 10)
    }
}

// 扩展 View
extension View {
    func withDefaultButtonFormatting(backgroundColor: Color = .blue) -> some View{
        modifier(DefaultButtonViewModifier(bcakgroundColor: backgroundColor))
    }
}

/// 视图修饰符
struct ViewModifierBootcamp: View {
    var body: some View {
        VStack(spacing: 10) {
            Text("Hello,world!")
                .font(.headline)
                .withDefaultButtonFormatting(backgroundColor: .orange)
            
            Text("Hello,everyone!")
                .font(.subheadline)
                .withDefaultButtonFormatting()
            
            Text("Hello !!!")
                .font(.title)
                .withDefaultButtonFormatting(backgroundColor: .red)
        }
        .padding()
    }
}

struct ViewModifierBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        ViewModifierBootcamp()
    }
}

1.2 效果图:

2. ButtonStyle 自定义按钮样式

2.1 创建按下按钮样式,ButtonStyleBootcamp.swift

Swift 复制代码
import SwiftUI

///  按下按钮样式
struct PressableButtonStyle: ButtonStyle{
    let scaledAmount: CGFloat
    
    init(scaledAmount: CGFloat) {
        self.scaledAmount = scaledAmount
    }
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
        // 缩放
            .scaleEffect(configuration.isPressed ? scaledAmount : 1.0)
        // 点亮度
        //.brightness(configuration.isPressed ? 0.05 : 0)
            .opacity(configuration.isPressed ? 0.86 : 1)
    }
}

/// 扩展 View
extension View{
    /// 按钮的样式
    func withPressableStyle(scaledAmount: CGFloat = 0.9) -> some View{
       buttonStyle(PressableButtonStyle(scaledAmount: scaledAmount))
    }
}

/// 按钮样式
struct ButtonStyleBootcamp: View {
    var body: some View {
        Button {
            
        } label: {
            Text("Click Me")
                .font(.headline)
                .withDefaultButtonFormatting()
        }
        .withPressableStyle(scaledAmount: 0.86)
        .padding(40)
    }
}

struct ButtonStyleBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        ButtonStyleBootcamp()
    }
}

2.2 效果图:

相关推荐
大熊猫侯佩3 小时前
桃花岛 Xcode 构建秘籍:Swift 中的 “Feature Flags” 心法
app·xcode·swift
用户093 小时前
SwiftUI Charts 函数绘图完全指南
ios·swiftui·swift
YungFan3 小时前
iOS26适配指南之UIColor
ios·swift
HarderCoder5 小时前
Swift 6.2 新特性 `@concurrent` 完全导读
swift
HarderCoder5 小时前
Swift 里的“橡皮擦”与“标签”——搞懂 existentials 与 primary associated type
swift
权咚20 小时前
阿权的开发经验小集
git·ios·xcode
用户0920 小时前
TipKit与CloudKit同步完全指南
ios·swift
法的空间1 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
Yasin Chen1 天前
Unity UI坐标说明
ui·unity