我有一个List
,用于显示当前月份的日期。每行包括简写的星期几,一个Divider
和当天的数字,这些内容都在VStack
中。然后将VStack
嵌入到一个HStack
中,以便我可以在日期右侧加上更多文本。
struct DayListItem : View {
// MARK: - Properties
let date: Date
private let weekdayFormatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateFormat = "EEE"
return formatter
}()
private let dayNumberFormatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateFormat = "d"
return formatter
}()
var body: some View {
HStack {
VStack(alignment: .center) {
Text(weekdayFormatter.string(from: date))
.font(.caption)
.foregroundColor(.secondary)
Text(dayNumberFormatter.string(from: date))
.font(.body)
.foregroundColor(.red)
}
Divider()
}
}
}
在 ContentView
中使用 DayListItem
的实例:
struct ContentView : View {
// MARK: - Properties
private let dataProvider = CalendricalDataProvider()
private var navigationBarTitle: String {
let formatter = DateFormatter()
formatter.dateFormat = "MMMM YYY"
return formatter.string(from: Date())
}
private var currentMonth: Month {
dataProvider.currentMonth
}
private var months: [Month] {
return dataProvider.monthsInRelativeYear
}
var body: some View {
NavigationView {
List(currentMonth.days.identified(by: \.self)) { date in
DayListItem(date: date)
}
.navigationBarTitle(Text(navigationBarTitle))
.listStyle(.grouped)
}
}
}
代码的结果如下:
可能不太明显,但是分隔符没有对齐,因为文本的宽度从一行到另一行会有所变化。我想实现的是让包含日期信息的视图具有相同的宽度,以便它们在视觉上对齐。我尝试使用
GeometryReader
和frame()
修饰符来设置最小宽度、理想宽度和最大宽度,但我需要确保文本可以根据动态类型设置而收缩和增长;我选择不使用父级的百分比宽度,因为我不确定本地化文本是否始终适合允许的宽度。我如何修改我的视图,使每一行中的每个视图具有相同的宽度,而不考虑文本的宽度?
关于动态类型,我将创建不同的布局用于更改该设置时使用。
PreferenceKey
。他们目前只发布了几篇文章,但这些文章已经对我有很大帮助了,所以我会关注他们发布更多文章的情况。 - graycampbellscaledToFill
会导致我的内容挤压行中其余的内容。如果我将其移除,那么修改后的内容就会变得非常瘦。我该如何测量要修改的原始内容的宽度? - Ian Warburton