Почему два VSTACK внутри родительского HSTACK имеют разные высоты? ⇐ IOS

[Anonymous]

Я пытаюсь создать шаг с временной шкалой, используя следующий код. < /p>

Код: Выделить всё

import SwiftUI

struct ContentView: View {
var body: some View {
// Timeline Steps Container
VStack(alignment: .leading, spacing: 0) {
TimelineStep(icon: "checkmark.circle.fill", title: "Install & Set up", description: "You've successfully personalized your experience", isCompleted: true, isLast: false)
TimelineStep(icon: "lock.fill", title: "Today: Get Instant Access", description: "Access 50+ premium actions: professional PDF editing, files converter, and scanner", isCompleted: true, isLast: false)
TimelineStep(icon: "bell.fill", title: "Day 5: Trial Reminder", description: "We'll send you an email/notification that your trial is ending", isCompleted: false, isLast: false)
TimelineStep(icon: "star.fill", title: "Day 7: Trial Ends", description: "Your subscription will start on Apr 19", isCompleted: false, isLast: true)

Spacer().layoutPriority(1)
}
.padding(.vertical, 30)

}
}

// --- PLEASE REPLACE YOUR OLD TimelineStep WITH THIS ---
struct TimelineStep: View {
let icon: String
let title: String
let description: String
let isCompleted: Bool
let isLast: Bool

var body: some View {
HStack(alignment: .top, spacing: 20) {
// --- FIX #1: ICON AND LINE CONNECTION ---
// This VStack now has spacing set to 0 to remove the gap.
VStack(alignment: .center, spacing: 0) {
//Rectangle()
//    .fill(isCompleted ? Color.blue : Color(UIColor.systemGray5))
//    .frame(width: 2)
//    .frame(maxHeight: .infinity)

ZStack {
Circle()
.fill(isCompleted ? Color.blue : Color(UIColor.systemGray5))
.frame(width: 40, height: 40)

Image(systemName: icon)
.foregroundColor(isCompleted ? .white : .gray)
.font(.title3)
}

if !isLast {
Rectangle()
.fill(isCompleted ? Color.blue : Color(UIColor.systemGray5))
.frame(width: 2)
}
}
.frame(width: 40) // Give the icon column a fixed width
.frame(maxHeight: .infinity) // 1. Expand the frame to fill the available height
.background(.red)

// --- FIX #2: TEXT WRAPPING ---
VStack(alignment: .leading, spacing: 4) {
Text(title)
.font(.headline)
.fontWeight(.bold)

Text(description)
.font(.subheadline)
.foregroundColor(.gray)
.fixedSize(horizontal: false, vertical: true)
// The .lineLimit modifier has been removed to allow wrapping.
}
.padding(.bottom, 32)
.background(.green)
// This is crucial for the text to wrap correctly by taking available space.
.frame(maxWidth: .infinity, alignment: .leading)
}
.background(.yellow)
.padding(.horizontal, 30) // Add padding to the whole row
.padding(.bottom, isLast ? 0 : 0) // Control space between timeline steps
}
}

#Preview {
ContentView()
}

Я получаю этот вывод.

my nfect wry wrice






< /ol>
Почему это так? Я работал вместе с ИИ довольно долго. Мы оба все еще не можем понять, почему

Подробнее здесь: https://stackoverflow.com/questions/796 ... nt-heights