๐๏ธSizeRatioControl
Last updated
Last updated
SwiftUI โฉ Layout โฉ Grids โฉ examples โฉ ItemsView โฉ
import SwiftUI
struct SizeRatioControl: View {
@Binding var size: CGSize // proposed size
@Binding var idealRatio: CGFloat // ideal cell aspect ratio
var body: some View {
VStack {
HStack(alignment: .top, spacing: 40) {
// ๐ SliderWithSubtitle: control ideal cell ratio
SliderWithSubtitle(
value: $idealRatio,
range: 0.3...3, step: 0.01,
subtitle: "ideal ratio",
decimalPlaces: 2,
tint: .green
)
// ๐ SlidersForSize: control proposed size
SlidersForSize($size)
}
}
.padding()
}
}
// ----------------
// Previews
// ----------------
struct SizeRatioControl_Previews: PreviewProvider {
static var previews: some View {
SizeRatioControl(
size: .constant(CGSize(x: 300, y: 200)),
idealRatio: .constant(1)
).preferredColorScheme(.dark)
}
}// 2022.02.15
// 2022.02.17 (f) bug : step can be < 1
import SwiftUI
// โโโโโโโโโโโโโโโโโโโโโโโโ
// โ SlidersForSize โ
// โโโโโโโโโโโโโโโโโโโโโโโโ
/// ๐ sliders to control width/height
/// ```
/// SlidersForSize($size)
/// ```
struct SlidersForSize: View {
// โญ๏ธ Binding variable
@Binding var size: CGSize
var body: some View {
VStack(spacing: 20) {
// ๐ Slider: control offered width
SliderWithSubtitle(
value : $size.width,
range : 50...300,
subtitle: "width"
)
// ๐ Slider: control offered height
SliderWithSubtitle(
value : $size.height,
range : 100...500,
subtitle: "height",
tint : .blue
)
}
}
}
// convenience init
extension SlidersForSize {
/// convenience init.
/// ```
/// SlidersForSize($size)
/// ```
init(_ size: Binding<CGSize>) {
// โญ๏ธ ๆณจๆ๏ผไธๆฏ `self.size = size` โ๏ธโ๏ธโ๏ธ
self._size = size
}
}
// โโโโโโโโโโโโโโโโโโ
// โ Previews โ
// โโโโโโโโโโโโโโโโโโ
struct SlidersForSize_Previews: PreviewProvider {
static var previews: some View {
SlidersForSize(size: .constant(.init(300,200)))
}
}
// 2022.02.15
// 2022.02.17 (f) bug : step can be < 1
import SwiftUI
// โโโโโโโโโโโโโโโโโโโโโโโโ
// โ SlidersForSize โ
// โโโโโโโโโโโโโโโโโโโโโโโโ
/// ๐ sliders to control width/height
/// ```
/// SlidersForSize($size)
/// ```
struct SlidersForSize: View {
// โญ๏ธ Binding variable
@Binding var size: CGSize
var body: some View {
VStack(spacing: 20) {
// ๐ Slider: control offered width
SliderWithSubtitle(
value : $size.width,
range : 50...300,
subtitle: "width"
)
// ๐ Slider: control offered height
SliderWithSubtitle(
value : $size.height,
range : 100...500,
subtitle: "height",
tint : .blue
)
}
}
}
// convenience init
extension SlidersForSize {
/// convenience init.
/// ```
/// SlidersForSize($size)
/// ```
init(_ size: Binding<CGSize>) {
// โญ๏ธ ๆณจๆ๏ผไธๆฏ `self.size = size` โ๏ธโ๏ธโ๏ธ
self._size = size
}
}
// โโโโโโโโโโโโโโโโโโ
// โ Previews โ
// โโโโโโโโโโโโโโโโโโ
struct SlidersForSize_Previews: PreviewProvider {
static var previews: some View {
SlidersForSize(size: .constant(.init(300,200)))
}
}
// 2022.02.17 (+) struct: SliderWithSubtitle
import SwiftUI
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// โ SliderWithSubtitle โ
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโ
/// slider with subtitle below it.
/// ```
/// SliderWithSubtitle(
/// value : $size.width,
/// subtitle: "width"
/// )
///
/// SliderWithSubtitle(
/// value : $size.height,
/// range : 100...300,
/// subtitle: "height",
/// tint : .blue
/// )
struct SliderWithSubtitle: View {
// โญ๏ธ Binding variable
@Binding var value: CGFloat
var range: ClosedRange<CGFloat> = 20...500
var step: CGFloat = 1
let subtitle: String
var decimalPlaces = 0
var tint: Color = .pink
var body: some View {
VStack {
// ๐ `Slider` to control the `value`
Slider(value: $value, in: range, step: step)
.tint(tint)
// subtitle for slider
Text("\(subtitle): \(value.decimalPlaces(decimalPlaces))")
.font(.system(.caption, design: .monospaced))
.foregroundColor(.secondary)
}
}
}
need to initialize a Binding var.