Swift UI 设计问题

Question

我有一个列表，其中填充了

GetListView()

视图中的 json 数据。现在我在 SecondView 中显示此列表。在这里，我想显示从白色视图底部到屏幕底部到 20 的 GetListView。但我只能为 GetListView 提供高度：500..我希望它应该位于屏幕底部到 20

如何在

SecondView

中显示从下到20的列表

如果我使用了任何不必要的代码，请指导我

GetListView代码：这里如何删除行黑白单元格和顶部空间

struct GetListView: View {

@StateObject var getData = GetServiceViewModel()

var body: some View {
    
    VStack(){
        
        Text("Friends List")
        List(getData.dataRes?.data ?? [], id: \.id ){ item in
            
            ZStack (){
                Color.yellow
                
                HStack(alignment: .top){
                    AsyncImage(url: URL(string: item.avatar), content: { image in
                        image.resizable()
                    }, placeholder: {
                        ProgressView()
                        Text("Load..")
                    })
                    .padding(.leading, 15)
                    .padding(.top, 10)
                    
                    .scaledToFit()
                    .frame(height: 70)
                    
                    VStack(alignment: .leading, spacing: 5) {
                        Text(item.firstName)
                        Text(item.email)
                        Text("description shjfgds fgds gf dsgf gds fyg dsygf ydsg fgyds gf ydsg fgyds gf dsy fgyds fgyd s...")
                            .padding(.bottom, 15)
                        
                        HStack(spacing: 15){
                            Spacer()
                            
                            Text("12/3/2024")
                                .foregroundColor(Color.green)
                            Text("New")
                                .foregroundColor(Color.green)
                        }
                        
                        Button("TestButton") {
                            print("index of list \(item)")
                        }
                    }
                    .padding(EdgeInsets(top: 10, leading: 5, bottom: 5 , trailing: 10))
                    Spacer()
                }
                
            }
            .cornerRadius(20)
            .padding(.bottom, 10)
            
            .listRowBackground(Color.clear)
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            
            .contentShape(Rectangle())  tappable
            .background(
                NavigationLink(destination: ThirdView(seltData: item)) {
                    EmptyView()
                }
                    .opacity(0)
            )
        }
        .task{
            getData.postAndGetGenericCall(completion: {
                print("Data loaded: \(String(describing: getData.dataRes?.data))")
            })
        }
        .background(Color.red)
    }
    
}
}

第二个查看代码：

struct SecondView: View {

var body: some View {
    ZStack {

        ScrollView {
            VStack {
                HStack {
                    VStack {
                        HStack(alignment: .top) {
                            Image(systemName: "person.circle.fill")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .modifier(ImageModifier(width: 70, height: 79))
                                .padding(.top, 10)

                            Rectangle()
                                .background(.red)
                                .frame(width: 5)
                        }
                    }
                    .frame(maxHeight: .infinity, alignment: .top)

                    VStack(spacing: 10) {

                        Group {

                            Text("Jhon Thomas")

                                .padding(EdgeInsets(top: 0, leading: 10, bottom: 10, trailing: 0))
                                .font(.system(size: 20))

                            RowItem(text: "000000000", icon: "phone.fill")

                            RowItem(text: "Singer", icon: "bag.fill")
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)

                        HStack {
                            RowItem(text: "Jhon Thomas", icon: "location.fill")

                            Spacer()

                            RowItem(text: "Jhon Thomas", icon: "map.fill")
                        }
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                }
                .padding()
                .frame(height: 200)
                .background(.white)
                .frame(maxWidth: .infinity, alignment: .leading)

                GetListView()
                    .frame(height: 500)
            }
            .padding()

        }
    }
    .background(.red)
}

如何在

SecondView

中显示从下到20个列表，请指导

o/p：Swift Ui 很奇怪:(它占用自己的空间和填充，无法提供所需的约束。我可以捕获编码，但当涉及到 UI 部分时，我很难理解。

Answer 1

当您在 SwiftUI 中使用异步等待时，您不再需要旧的合并

@StateObject

，所以它变得只是：

@State var data: [Data] = []
@Environment(\.Service) var service

.task {
    data = await service.getData()
}

Service

应该是一个包含用于获取数据的异步函数的结构。它是

EnvironmentKey

的原因是它可以替换为预览版。

由于

.task

会在每次出现时运行，因此您可能需要在再次出现之前检查是否已经拥有上次的数据。另外，如果您想在视图使用不同的参数（如 postID 或选择更改）初始化时重新运行，请使用

.task(id: postID)

。