✨TestFrameView

⬆️ 需要： .dimension(), .shadowedBorder()

// 2022.02.14

import SwiftUI

struct TestFrameView: View {
    
    // view state
    @State private var offeredWidth: CGFloat = 50
    var width: Int { Int(offeredWidth) }    // integral width
    
    // view body
    var body: some View {
        VStack(spacing: 20) {
            
            // child views
            Group {
                
                // Texts
                Group {
                    // adaptive text
                    Text("an adaptive line of text that will try its best to fit the offered size.")
                    // text of "fixed" size
                    Text(#"a long line of text that is fixed at its "ideal width". "#)
                        // ⭐️ fixed at "ideal width"
                        .fixedSize(horizontal: true, vertical: false)
                }
                .foregroundColor(.secondary)
                .border(Color.blue)
                
                // ⭐️ a subview that'll always be wider than 100
                WiderThan100View()
                    // ⭐️ show child view's frame
                    // 🌀View+.dimension() (show frame visually)
                    .dimension(arrow: .blue, label: .yellow)
                    .overlay {
                        Text("\(width)").bold()
                            .shadow(radius: 4)
                    }
            }
            // ⭐️ parent's offered size
            .frame(width: offeredWidth, height: 60)
            .shadowedBorder()
            
            // slider
            VStack {
                Slider(value: $offeredWidth, in: 20...300, step: 1)
                    .padding(.horizontal)
                Text("offered width: \(width)")
                    .font(.system(.caption, design: .monospaced))
                    .foregroundColor(.secondary)
            }.padding(.top, 50)
        }
        .padding()
    }
}

/// a view that will always be wider than 100 points
struct WiderThan100View: View {
    var color: Color = .yellow
    var body: some View {
        // ⭐️ width >= 100
        color.frame(minWidth: 100)
    }
}

History

  1. 2022.02.14

PreviousTestIdealSizeViewNextview size

Last updated

Was this helpful?