The library provides you with an alternative to the @ScaledMetric dynamic property.
It has several dynamic property wrappers:
@ScaledValue@ScaledPointSize@ScaledFont@ScaledInsets
All dynamic properties scale values according to the current Dynamic Type size and provide you with the ability to define minimum and maximum values.
With @ScaledValue you can scale an arbitrary layout value. It is the same as the standard @ScaledMetric, but it provides you with the ability to define minimum and maximum values.
import SwiftUI
import ScaledValues
struct ContentView: View {
@ScaledValue(min: 30, max: 60, relativeTo: .body)
private var shapeSize = 32.0
@ScaledValue(min: 8, max: 15, relativeTo: .body)
private var shapeRadius = 10.0
var body: some View {
RoundedRectangle(
cornerRadius: shapeRadius,
style: .continuous
)
.fill(.green)
.frame(width: shapeSize, height: shapeSize)
}
}With @ScaledPointSize you can scale a custom font size in points.
import SwiftUI
import ScaledValues
struct ContentView: View {
<...>
@ScaledPointSize(min: 15, max: 30, relativeTo: .body)
private var fontSize = 16
var body: some View {
RoundedRectangle(
cornerRadius: shapeRadius,
style: .continuous
)
.fill(.green)
.frame(width: shapeSize, height: shapeSize)
.overlay {
Image(systemName: "star.fill")
.foregroundColor(.yellow)
.font(.system(size: fontSize))
}
}
}As an alternative to @ScaledPointSize, you can define the font itself using @ScaledFont. This makes your code neater, as you can identify an accessible font in one place.
import SwiftUI
import ScaledValues
struct ArticleRow: View {
@ScaledFont(size: 18, leading: .tight, relativeTo: .headline)
private var titleFont: Font
@ScaledFont(size: 14, design: .serif, relativeTo: .caption)
private var summaryFont: Font
@ObservedObject var article: Article
var body: some View {
HStack {
VStack(alignment: .leading) {
Text(article.title)
.font(titleFont)
Text(article.summary)
.font(summaryFont)
}
Spacer()
}
}
}With @ScaledInsets you can scale the inset distances.
import SwiftUI
import ScaledValues
struct ArticlesView: View {
@ScaledInsets(max: maxRowInsets, relativeTo: .title)
private var rowInsets = defaultRowInsets
var articles: [Article]
var body: some View {
List(articles) {
ArticleRow($0)
.listRowInsets(rowInsets)
}
}
private static var defaultRowInsets: EdgeInsets {
.init(
top: 5,
leading: 10,
bottom: 5,
trailing: 15)
}
private static var maxRowInsets: EdgeInsets {
.init(
top: 10,
leading: 20,
bottom: 10,
trailing: 20)
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent