.badge()

方法一：.overlay(_:alignment)

.badge()

extension View {
    
    /// ⭐️ add a badge to the view
    ///
    /// Example
    /// ```
    /// calendarImage
    ///   .badge(badge, alignment: .topLeading)
    /// ```
    /// 注意：SwiftUI 內建也有許多 `.badge(_:)` view modifier，例如：
    /// - [`.badge(_ label: Text?)`][1]
    /// - [`.badge<S: StringProtocol>(_ label: S?)`][2]
    /// - [`.badge(_ key: LocalizedStringKey?)`][3]
    /// - [`.badge(_ count: Int)`][4]
    ///
    /// 所以在自製 `View` extension 或 view modifier 的時候，要避免
    /// 與它們相衝。
    ///
    /// 注意：這些內建的 `.badge(_:)` 只適用於 `List` rows 與 iOS tab bars❗️
    ///
    /// [1]: https://developer.apple.com/documentation/swiftui/navigationview/badge(_:)-3fnhw
    /// [2]: https://developer.apple.com/documentation/swiftui/navigationview/badge(_:)-3069i
    /// [3]: https://developer.apple.com/documentation/swiftui/navigationview/badge(_:)-cc1t
    /// [4]: https://developer.apple.com/documentation/swiftui/navigationview/badge(_:)-57jkr
    func badge<Badge: View>(_ badge: Badge, alignment: Alignment = .topTrailing) -> some View {
            overlay(alignment: alignment) {
                badge.alignmentGuide(alignment.horizontal) { dim in
                    dim[HorizontalAlignment.center]
                }.alignmentGuide(alignment.vertical) { dim in
                    dim[VerticalAlignment.center]
                }
            }
    }
}

💈 範例

badge

struct CalendarView: View {
    
    var body: some View {
        calendarImage
            .badge(badge, alignment: .topLeading)    // ⭐️
    }
    
    var calendarImage: some View {
        Image(systemName: "calendar")
            .resizable()
            .frame(width: 50, height: 50)
            .padding()
            .background(Color.red)
            .cornerRadius(10)
            .foregroundColor(.white)
    }
    
    var badge: some View {
        Image(systemName: "checkmark.circle.fill")
            .font(.system(size: 60))
            .foregroundColor(.green)
            .shadow(radius: 4)
    }
}

📗 參考

• Thinking in SwiftUI, Ch. 4, Exercises

📘 手冊

• SwiftUI ⟩ Layout & Presentation ⟩ NavigationView ⟩ View Modifiers

  • func badge(_ key: LocalizedStringKey?) -> some View

  • func badge(_ count: Int) -> some View

方法二：view preference

利用 view preference 來通知上(外)層的 view 自己的 size，並將自己的 view 放在右上角。

雖然可以用 view preference 來排版，但比較建議的方式還是用上面的 alignment。

view.addBadge()

import SwiftUI

/// 問：可以用 anchor preference 讓 badge 的擺放更簡單嗎？

/// ⭐️ 1. define size preference key:
///       pass view size to its ancestors (by using preference key)
struct SizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

/// ⭐️ 2. define a view modifier to set size preference key:
///       get view size and set size preference key
struct SetSizePreference: ViewModifier {
    /// body: `ViewModifier` requirement
    func body(content: Content) -> some View {
        /// ⭐️ 2.1 use `GeometryReader` to read view size
        content.background(GeometryReader { geo in
            /// ⭐️ 2.2 use .preference() method to set `SizePreferenceKey`
            ///        on a transparent background
            Color.clear.preference(
                key: SizePreferenceKey.self,
                value: geo.size
            )
        })
    }
}


/// ⭐️ 3. define a convenience extension to set size preference
extension View {
    func getSize() -> some View {
        modifier(SetSizePreference())
    }
}


/// ⭐️ 4. define a view modifier to add badge view
struct AddBadge<Badge: View>: ViewModifier {
    
    var badge: Badge
    var showBadge: Bool
    
    /// ⭐️ 4.1 prepare to read badge size from child's size preference
    @State private var badgeSize: CGSize = .zero
    
    func body(content: Content) -> some View {
        
        ZStack(alignment: .topTrailing) {
            
            /// original view
            content
            
            /// add a badge to it if `showBadge`
            if showBadge {
                badge
                    /// ⭐️ 4.2 get badge size and let ancestors know about it
                    ///        by setting size preference.
                    .getSize()
                    /// ⭐️ 4.3 when get badge size from child's size preference,
                    ///        update view state to reflect the change.
                    .onPreferenceChange(SizePreferenceKey.self) {
                        self.badgeSize = $0
                    }
                    /// ⭐️ 4.4 center badge to the parent's top right corner
                    ///        according to its size.
                    .offset(x: badgeSize.width / 2, y: -badgeSize.height / 2)
                    .shadow(radius: 4)
            }
        }
    }
}

/// ⭐️ 5. define a convenience extension to add badge
extension View {
    func addBadge<Badge: View>(_ badge: Badge,`if` showBadge: Bool) -> some View {
        modifier(AddBadge(badge: badge, showBadge: showBadge))
    }
}

💈 範例

image with a badge

import SwiftUI

struct CalendarView: View {
    
    var isVerified = true
    
    var body: some View {
        calendarImage
            /// ⭐️ 6. add badge conditionally
            .addBadge(badge, if: isVerified)
    }
    
    var calendarImage: some View {
        Image(systemName: "calendar")
            .resizable()
            .frame(width: 50, height: 50)
            .padding()
            .background(Color.red)
            .cornerRadius(10)
            .foregroundColor(.white)
    }
    
    var badge: some View {
        Image(systemName: "checkmark.circle.fill")
            .font(.system(size: 60))
            .foregroundColor(.green)
    }
}

📗 參考

• Sundell ⟩ A guide to the SwiftUI layout system - Part 1

• Swift with Majid ⟩

  • The magic of view preferences in SwiftUI ⭐️

  • Anchor preferences in SwiftUI

  • Alignment guides in SwiftUI

👥 相關

• PreferenceKey