🔴Dynamic Type Sizes

DynamicTypeSize+ext (extension)

Human Interface Guidelines ⟩
- Dynamic Type Sizes (iOS)
- Dynamic Type Sizes (watchOS)
SwiftUI ⟩ State and Data Flow ⟩ EnvironmentValues (struct) ⟩
- .dynamicTypeSize : DynamicTypeSize (enum)
  - .isAccessibilitySize : Bool - case accessibility1 ~ accessibility5

Examples

例一：顯示各種 dynamic type size 的相對大小。
例二：根據 dynamic type size 將 HStack 調整為 VStack。

struct DynamicTypeSizeView: View {
    let sizes = DynamicTypeSize.allCases
    var body: some View {
        List(sizes, id: \.self){ size in
            // ⭐️ custom string interpolation with `LocalizedStringKey`
            Text("\(size)")
                // ⭐️ dynamic type size (for child views)
                .environment(\.dynamicTypeSize, size)
        }
    }
}

struct ContentView: View {
    
    // ⭐️ dynamic type size
    @Environment(\.dynamicTypeSize) var typeSize: DynamicTypeSize
    @State private var currentTypeSize: DynamicTypeSize = .medium
    
    let allSizes = DynamicTypeSize.allCases
    
    var typeSizeLargeThanXL: Bool {
        currentTypeSize > .xLarge
    }
    
    var body: some View {
        let _ = print("environ. type size: \(typeSize)")
        let _ = print("selected type size: \(currentTypeSize)")
        VStack {
            // ⭐️ AdaptiveHStack
            AdaptiveHStack(threshold: typeSizeLargeThanXL) {
                Text("Text A")
                Text("Text B")
                Text("Text C")
            }
            // ⭐️ set dynamic type size (for child views❗❗)
            // ❗ 注意：這裡的設定是給「child views」的，不會往外傳遞。
            .environment(\.dynamicTypeSize, currentTypeSize)
            
            Spacer()
            
            // Picker
            Picker("Type Size", selection: $currentTypeSize) {
                ForEach(allSizes, id: \.self) { size in
                    Text("\(size.abbreviation)")
                        .tag(size)
                }
            }.pickerStyle(.segmented)
        }
    }
}

PreviousSize Classes NextDynamicTypeSize+ext

Last updated 2 years ago

Was this helpful?

Examples

例一：顯示各種 dynamic type size 的相對大小。
例二：根據 dynamic type size 將 HStack 調整為 VStack。

struct DynamicTypeSizeView: View {
    let sizes = DynamicTypeSize.allCases
    var body: some View {
        List(sizes, id: \.self){ size in
            // ⭐️ custom string interpolation with `LocalizedStringKey`
            Text("\(size)")
                // ⭐️ dynamic type size (for child views)
                .environment(\.dynamicTypeSize, size)
        }
    }
}

struct ContentView: View {
    
    // ⭐️ dynamic type size
    @Environment(\.dynamicTypeSize) var typeSize: DynamicTypeSize
    @State private var currentTypeSize: DynamicTypeSize = .medium
    
    let allSizes = DynamicTypeSize.allCases
    
    var typeSizeLargeThanXL: Bool {
        currentTypeSize > .xLarge
    }
    
    var body: some View {
        let _ = print("environ. type size: \(typeSize)")
        let _ = print("selected type size: \(currentTypeSize)")
        VStack {
            // ⭐️ AdaptiveHStack
            AdaptiveHStack(threshold: typeSizeLargeThanXL) {
                Text("Text A")
                Text("Text B")
                Text("Text C")
            }
            // ⭐️ set dynamic type size (for child views❗❗)
            // ❗ 注意：這裡的設定是給「child views」的，不會往外傳遞。
            .environment(\.dynamicTypeSize, currentTypeSize)
            
            Spacer()
            
            // Picker
            Picker("Type Size", selection: $currentTypeSize) {
                ForEach(allSizes, id: \.self) { size in
                    Text("\(size.abbreviation)")
                        .tag(size)
                }
            }.pickerStyle(.segmented)
        }
    }
}