ios - 图像扩展超出屏幕的 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)€&quot;)
                                        .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通过实现仅水平滚动的 a，我能够获得可接受的结果。