我有一个列表,其中填充了
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 部分时,我很难理解。
当您在 SwiftUI 中使用异步等待时,您不再需要旧的合并
@StateObject
,所以它变得只是:
@State var data: [Data] = []
@Environment(\.Service) var service
.task {
data = await service.getData()
}
Service
应该是一个包含用于获取数据的异步函数的结构。它是 EnvironmentKey
的原因是它可以替换为预览版。
由于
.task
会在每次出现时运行,因此您可能需要在再次出现之前检查是否已经拥有上次的数据。另外,如果您想在视图使用不同的参数(如 postID 或选择更改)初始化时重新运行,请使用 .task(id: postID)
。