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 效果图:

相关推荐
2501_915918419 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手10 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
Digitally11 小时前
[5种方法] 如何将iPhone短信保存到电脑
ios·iphone
UI罐头12 小时前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
杂雾无尘14 小时前
Swift 5.9 新特性揭秘:非复制类型的安全与高效
ios·swift·apple
UI前端开发工作室16 小时前
UI前端与数字孪生融合新领域拓展:智慧教育的虚拟实验室建设
ui
Thomas_YXQ18 小时前
Unity3D iOS闪退问题解决方案
ios
Daniel_Coder20 小时前
iOS Widget 开发-7:TimelineProvider 机制全解析:构建未来时间线
ios·swift·widget
Swift社区21 小时前
Swift 图论实战:DFS 算法解锁 LeetCode 323 连通分量个数
算法·swift·图论
Daniel_Coder21 小时前
iOS Widget 开发-3:Widget 的种类与尺寸(主屏、锁屏、灵动岛)
ios·swift·widget