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_916007471 天前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
白玉cfc1 天前
【OC】单例模式
开发语言·ios·单例模式·objective-c
Digitally1 天前
比较 iPhone:全面比较 iPhone 17 系列
android·ios·iphone
2501_915909061 天前
HTTPS 错误解析,常见 HTTPS 抓包失败、443 端口错误与 iOS 抓包调试全攻略
android·网络协议·ios·小程序·https·uni-app·iphone
HarderCoder2 天前
在同步代码里调用 async/await:Task 就是你的“任意门”
swift
他们都不看好你,偏偏你最不争气2 天前
【iOS】UIViewController
开发语言·macos·ios·objective-c·cocoa
前端小超超2 天前
如何配置capacitor 打包的ios app固定竖屏展示?
前端·ios·web app
HarderCoder2 天前
Swift 三目运算符指南:写法、场景与避坑
swift
CocoaKier2 天前
AI让35岁程序员再次伟大
ios·微信小程序·aigc
库奇噜啦呼2 天前
【iOS】单例模式
ios·单例模式