我在 SwiftUI 列表中显示了一组项目，如下所示:
struct MissionCell_Previews: PreviewProvider {
static var missions: [Mission] = [
Mission(name: "Cassini",
launchDate: "10/15/97",
launchLocation: "Cape Canaveral",
missionEndDate: "09/15/17",
status: "Past"),
Mission(name: "Galaxy Evolution Explorer",
launchDate: "04/28/03",
launchLocation: "Cape Canaveral",
missionEndDate: "06/28/13",
status: "Past"),
Mission(name: "IRAS",
launchDate: "01/25/83",
launchLocation: "Vandenberg",
missionEndDate: "11/21/83",
status: nil),
Mission(name: "NuSTAR",
launchDate: "06/13/12",
launchLocation: "Central Pacific Ocean",
missionEndDate: nil,
status: "Current"),
Mission(name: "Voyager 1",
launchDate: "09/05/77",
launchLocation: "Central Pacific Ocean",
missionEndDate: nil,
status: nil)
]
static var previews: some View {
List {
ForEach(missions) { mission in
MissionCell(mission: mission)
}
}
}
}
我正在使用以下代码创建一个单元格 View :
struct MissionCell: View {
var mission: Mission
var body: some View {
VStack(alignment: .missionOptionalInfoAlignment, spacing: 2) {
Text(mission.name)
.lineLimit(1)
.truncationMode(.middle)
HStack(alignment: .top) {
VStack(alignment: .leading) {
HStack {
Image(systemName: "calendar")
.foregroundColor(Color(UIColor.systemGray))
Text(mission.launchDate)
.foregroundColor(Color(UIColor.systemGray))
}
HStack {
Image(systemName: "location.fill")
.foregroundColor(Color(UIColor.systemGray))
Text(mission.launchLocation)
.foregroundColor(Color(UIColor.systemGray))
}
}
VStack(alignment: .leading) {
if mission.missionEndDate != nil {
HStack {
Image(systemName: "hand.raised.slash.fill")
.foregroundColor(Color(UIColor.systemGray))
Text(mission.missionEndDate!)
.foregroundColor(Color(UIColor.systemGray))
}
}
if mission.status != nil {
HStack {
Image(systemName: "checkmark")
.foregroundColor(Color(UIColor.systemGray))
Text(mission.status ?? "")
.foregroundColor(Color(UIColor.systemGray))
}
}
}
}
}
.padding([.leading, .trailing], 16)
}
}
我正在努力实现 2 种对齐方式:
missionEndDate和status值的对齐方式。我使用堆栈对齐成功实现了这一目标。- 将显示
missionEndDate和status值的HStack与MissionCell的中心对齐> 查看。我无法做到这一点。我尝试使用自定义对齐方式，但我无法使用自定义对齐方式来做到这一点，因为没有任何东西可以将此HStack与(即我无法告诉它对齐)对齐到它的父中心)。这是它目前的图像:
我曾考虑过使用 GeometryReader 获取顶层 VStack 的几何形状，但后来我丢失了所有间距信息并且无法再使用对齐方式.
有没有办法将 subview 在自定义 View 树的深处对齐，使其位于其父容器的中心？
最佳答案
这是 Zstack 的一个例子:
struct ListMissionView : View{
var missions: [Mission] = [
Mission(name: "Cassini",
launchDate: "10/15/97",
launchLocation: "Cape Canaveral",
missionEndDate: "09/15/17",
status: "Past"),
Mission(name: "Galaxy Evolution Explorer",
launchDate: "04/28/03",
launchLocation: "Cape Canaveral",
missionEndDate: "06/28/13",
status: "Past"),
Mission(name: "IRAS",
launchDate: "01/25/83",
launchLocation: "Vandenberg",
missionEndDate: "11/21/83",
status: nil),
Mission(name: "NuSTAR",
launchDate: "06/13/12",
launchLocation: "Central Pacific Ocean",
missionEndDate: nil,
status: "Current"),
Mission(name: "Voyager 1",
launchDate: "09/05/77",
launchLocation: "Central Pacific Ocean",
missionEndDate: nil,
status: nil)
]
var body: some View {
GeometryReader{ proxy in
List {
ForEach(self.missions, id: \.name) { mission in
MissionCell(mission: mission, proxy: proxy)
}
}
}
}
}
struct MissionCell: View {
var mission: Mission
var proxy: GeometryProxy
var body: some View {
// VStack(alignment: .missionOptionalInfoAlignment, spacing: 2) {
VStack(alignment: .leading, spacing: 2) {
Text(self.mission.name)
.lineLimit(1)
.truncationMode(.middle)
ZStack(alignment: .topLeading) {
VStack(alignment: .leading) {
HStack {
Image(systemName: "calendar")
.foregroundColor(Color(UIColor.systemGray))
Text(self.mission.launchDate)
.foregroundColor(Color(UIColor.systemGray))
}
HStack {
Image(systemName: "location.fill")
.foregroundColor(Color(UIColor.systemGray))
Text(self.mission.launchLocation)
.foregroundColor(Color(UIColor.systemGray))
}
}
VStack(alignment: .leading) {
if self.mission.missionEndDate != nil {
HStack {
Image(systemName: "hand.raised.slash.fill")
.foregroundColor(Color(UIColor.systemGray))
Text(self.mission.missionEndDate!)
.foregroundColor(Color(UIColor.systemGray))
}
}
if self.mission.status != nil {
HStack {
Image(systemName: "checkmark")
.foregroundColor(Color(UIColor.systemGray))
Text(self.mission.status ?? "")
.foregroundColor(Color(UIColor.systemGray))
}
}
}.alignmentGuide(.leading){ _ in return -self.proxy.size.width / 2.0}
}
}
.padding([.leading, .trailing], 16)
}
}
关于ios - SwiftUI:将 View 与其父 View 的中心对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59146350/