SwiftUI：将列表添加到带有上方图标的滚动视图中

Question

我正在尝试将项目列表添加到视图中，同时上面有一个图标。目前，当我构建我的代码时，它将图标和列表分开，这是我正在寻找的，但它使图标静态而列表可滚动。我希望图标和列表一起移动。

let items = ["Text", "Text", "Text", "Text"]

struct SignInView: View {
    var body: some View {
        NavigationView {
            
            VStack {
                Image(systemName: "car.fill")
                    .font(.system(size: 40))
                    .foregroundColor(.blue)
                    .frame(width: 150, height: 150)
                   
                List {
                    ForEach(items, id: \.self) { item in
                        HStack {
                        Image(systemName: "house.fill")
                                .foregroundColor(.blue)
                        Text(item)
                            Spacer ()
                        Text("1")
                            Image(systemName: "chevron.forward")
                                .foregroundColor(.blue)
                    }
                    }
                    
                }
                
                
                
            }
            
        }.navigationBarTitle("Car", displayMode: .inline)
        
    }
}

Answer 1

如果您希望图像随 List 一起滚动，您需要将其放在 列表中 中。

struct ContentView15: View {
    let items = ["Text", "Text", "Text", "Text"] /// Note (unrelated to your question): this should be inside ContentView
    
    var body: some View {
        NavigationView {
            List {
                Section { /// separate the image from the rest of the List's contents
                    Image(systemName: "car.fill")
                        .font(.system(size: 40))
                        .foregroundColor(.blue)
                        .frame(width: 150, height: 100)
                        .frame(maxWidth: .infinity) /// make image centered
                        .listRowBackground(Color(.secondarySystemBackground)) /// match the List's background color
                }
                
                ForEach(items, id: \.self) { item in
                    HStack {
                        Image(systemName: "house.fill")
                            .foregroundColor(.blue)
                        Text(item)
                        Spacer ()
                        Text("1")
                        Image(systemName: "chevron.forward")
                            .foregroundColor(.blue)
                    }
                }
            }
            .listStyle(InsetGroupedListStyle()) /// grouped appearance
            .navigationBarTitle("Car", displayMode: .inline)
            /// navigationBarTitle (use navigationTitle for iOS14+) should be *inside* your NavigationView
            /// otherwise, title won't show
        }
    }
}

结果：

SwiftUI：将列表添加到带有上方图标的滚动视图中

SwiftUI: Add List in to a scrollview with icon above

swiftui

swiftui-list

swiftui-view