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

Posted 2023-02-24

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

【英文标题】：SwiftUI: Add List in to a scrollview with icon above

【发布时间】：2021-06-20 04:00:42

【问题描述】：

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

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)
        
    

【参考方案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
        
    

结果：

【讨论】：

感谢您的回答。是否可以将两者分开？这就是我想要的样子。 (i.stack.imgur.com/S4POJ.png) 就像您的示例一样，但列表位于中间，而不是边缘到边缘。

@DJ 你可以使用InsetGroupedListStyle 来获得这种外观。但这又产生了另一个问题：汽车图像与其他行一起分组。因此，您需要将图像放入它自己的Section 中。查看我的编辑。

.listRowBackground(...) 正是我所需要的。谢谢！