โจ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)
}
}
struct TestFrameView_Previews: PreviewProvider {
static var previews: some View {
TestFrameView()
}
}
.dimension() - draw dimension for width.
.shadowedBorder() - show frame's border.
fixedSize(), fixedSize(horizontal:vertical:) - fixed ideal size.
uses .dimension() (View extension) to show view's frame.
History
2022.02.14
โฌ๏ธ ้่ฆ๏ผ .dimension(), .clamped(in:)
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: 50) {
// โญ๏ธ child view
childview(offeredWidth: offeredWidth)
// โญ๏ธ child view's frame
// ๐View + .dimension(): show frame visually
.dimension(arrow: .blue, label: .yellow)
// โญ๏ธ parent's offered size
.frame(width: offeredWidth, height: 100)
.overlay {
Text("\(width)").bold()
.shadow(radius: 4)
Rectangle()
.stroke(lineWidth: 4)
.shadow(radius: 4)
}
// slider
VStack {
Slider(value: $offeredWidth, in: 20...200, step: 1)
.padding(.horizontal)
Text("offered width: \(width)")
.font(.system(.caption, design: .monospaced))
.foregroundColor(.secondary)
}
}
.padding()
}
}
extension TestFrameView {
/// โญ๏ธ child view for this demo
func childview(offeredWidth width: CGFloat) -> some View {
Color.yellow
// ๐ Comparable + .clamped(in:)
.frame(width: offeredWidth.clamped(in: 100...))
}
}
Last updated