HStack，图像扩展到屏幕之外

Question

我正在尝试实现一个视图，该视图具有一个子视图，该子视图只渲染一组图像。要绘制的图像数量各不相同。

这是我的主要观点：

var body: some View {
List {
if !routeTrips.isEmpty {
ForEach(routeTrips, id: .self) { trip in
Group {
Button(action: {
self.handleRouteTripTap(routeTrip: trip)
}) {
VStack {
HStack {
Image("bus")
.resizable()
.renderingMode(.template)
.foregroundColor(Color.black)
.frame(width:30, height: 30)
.padding(.leading, 10)
HStack {
Text("(trip.LineToShow)")
.fontWeight(.bold)
.foregroundColor(Color.black)
Text("(trip.Name)")
.foregroundColor(Color.black)

Spacer()

Text("(trip.ArrivalTimeToShow)")
.foregroundColor(Color.black)
}
}

HStack{
if nil != trip.SubTrips {
ChangesRow(subTrips: trip.SubTrips ?? [])
.padding(.leading, 10)
}

Spacer()

if 0 < trip.Price {
Text("(trip.Price)€")
.font(.subheadline)
.foregroundColor(.black)
}
}
}
}
.listRowBackground(Color(red: 239/255, green: 239/255, blue: 239/255, opacity: 1))
.padding(.top, 10)
}
}
} else {
Text("Sem viagens")
.foregroundColor(.black)
.listRowBackground(Color(red: 239/255, green: 239/255, blue: 239/255, opacity: 1))
}
}
}

ChangesRow是用图像绘制一行的视图，其实现方式如下：

var body: some View {
HStack {
ForEach(subTrips.indices, id: .self) { i in
if subTrips[i].IsWalking {
Image("walking")
.resizable()
.renderingMode(.original)
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
} else {
HStack(spacing: 0) {
Image("A" == subTrips[i].Provider ? "subway" : "B" == subTrips[i].Provider ? "train" : "bus")
.resizable()
.renderingMode(.original)
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
Image("logo_(subTrips[i].Provider)")
.resizable()
.renderingMode(.original)
.aspectRatio(contentMode: .fit)
.frame(width: 15, height: 15)
}
}

if(self.subTrips.count - 1 != i) {
Image(systemName: "chevron.right")
.resizable()
.renderingMode(.template)
.aspectRatio(contentMode: .fit)
.foregroundColor(.gray)
.frame(width: 10, height: 10)
}
}
}
}

我遇到的问题是，如果要绘制很多图像，视图就会扩展到屏幕之外，变得不稳定。你知道我如何保证尽管有很多图像，但它总是能被明显地画出来吗？

在渲染Price的地方，我尝试编写一个长文本，视图会相应地进行调整。为什么它对图像不做同样的处理？

谢谢！

Answer 1

对于想知道这是如何解决的人来说，事实并非如此。我无法设置边框宽度，因为要绘制的图像数量可能会有所不同，我希望图像边框为20/20或15/15。

通过实现仅水平滚动的ScrollView，我能够获得可接受的结果。