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

相关推荐
Larry_Yanan1 小时前
QML学习笔记(三十四)QML的GroupBox、RadioButton
c++·笔记·qt·学习·ui
Digitally2 小时前
如何将iPhone上的HEIF图像下载到电脑
ios·iphone
书弋江山2 小时前
iOS一直讲的单元格优化
macos·ios·cocoa
00后程序员张5 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
2501_929382655 小时前
iphone IOS3~IOS9游戏 旧iphone 单机游戏合集分享
游戏·ios·iphone
2501_9159214311 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159214311 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
猪哥帅过吴彦祖15 小时前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
东坡肘子17 小时前
高通收购 Arduino:历史的轮回 | 肘子的 Swift 周报 #0106
swiftui·arduino·swift
HarderCoder17 小时前
Swift 基础语法全景(二):可选型、解包与内存安全
swift