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

相关推荐
Swift社区8 小时前
Swift LeetCode 246 题解:中心对称数(Strobogrammatic Number)
开发语言·leetcode·swift
Alger_Hamlet12 小时前
Photoshop 2025 Mac中文 Ps图像编辑软件
macos·ui·photoshop
鸿蒙布道师12 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
刘小哈哈哈14 小时前
封装了一个iOS多分区自适应宽度layout
macos·ios·cocoa
Lexiaoyao2014 小时前
SwiftUI 字体系统详解
swiftui·swift
YungFan14 小时前
Swift 6.1 新特性
swift
布多18 小时前
Tagged Pointer:苹果工程师的内存优化艺术
ios·源码
Rudon滨海渔村20 小时前
新旧iPhone相册复制 - 相册图片视频对拷 - 换机 - 迁移设备数据 - 免费开源爱思助手
ios·iphone
清晨細雨1 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
余多多_zZ1 天前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统