Ios HStack，图像扩展到屏幕之外

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

这是我的主要观点：

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))
        }
    }
}

我遇到的问题是，如果有许多图像要绘制，视图将扩展到屏幕之外，并且变得非常不稳定。你知道我如何保证，尽管有很多图像，但它总是被清晰地画出来吗

在渲染

Price

的地方，我尝试编写了一个长文本，视图也相应地进行了调整。为什么它对图像没有同样的效果

---

谢谢

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

---

我通过实现一个只水平滚动的

ScrollView

实现了一个可接受的结果。

一行显示多少图像？@Asperi这取决于具体情况。它是动态的。取决于服务器返回的内容。你能添加问题的屏幕截图或创建一个最小的可复制示例吗？@nicksarno我刚刚添加了一个打印。谢谢你能把鞋钉的框架调好吗？

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)
                }
            }
        }
    }