ButtonUp, ButtonDown 📦

用來當作 Tab Bar Button 彈起與按下的兩個狀態,這兩個只是單純的 View 而已,還不能真的按。

import SwiftUI
import ViewModifiers

public struct ButtonUp: View {
    
    // button properties
    let size: CGFloat      // icon size
    let icon: String       // icon name (SF Symbol)
    
    // public init
    public init(icon: String, size: CGFloat = 32){
        self.icon = icon
        self.size = size
    }
    
    // button body
    public var body: some View {
        ZStack {
            
            // 1. 用漸層為底紙,遮在圖示下面
            Neu.buttonUpIconBackground
                .frame(width: size, height: size)  // 這個大小只夠遮住 icon
            
            // 2. 再鋪上挖洞的方紙
            Rectangle()
                .foregroundColor(Neu.color.cardBackground)         // 上色
                .frame(width: size * 2, height: size * 2)          // 方紙為圖示的兩倍大
                .inverseMask(IconCard(icon, size: size))           // 以圖示挖洞
                // shadow & highlight
                .shadow(color: Neu.color.iconShadow, radius: 6, x: 6, y: 6)
                .shadow(color: .white, radius: 3, x: -3, y: -3)
                .cornerRadius(size * 0.5)                          // 剪圓角
            
        } // container (ZStack)
            // ⭐️ 合併所有圖層(為了幫整個 ZStack 製作陰影)
            .compositingGroup()
            // ⭐️ 讓打光與陰影都「收斂」一點(radius 大,x y 小)
            .shadow(color: Color.white.opacity(0.9), radius: 4, x: -2, y: -2)
            .shadow(color: Neu.color.iconShadow.opacity(0.9), radius: 4, x: 2, y: 2)
    }
}

Last updated

Was this helpful?