我似乎无法想出在同一个 ForEach 中包含文本和图像的方法

Question

 
    let items = Array(1...9).map({"Image\([=10=])"})
    let items1 = Array(11...14).map({"Image\([=10=])"})
    let items2 = Array(15...20).map({"Image\([=10=])"})
    let items3 = Array(21...25).map({"Image\([=10=])"})
    let items4 = Array(26...39).map({"Image\([=10=])"})
    
    
    struct MyData: Identifiable{
        var id = UUID()
        var title: String
        
    }
    
    
    var mData = [
        MyData(title: "Men's Clothing"),
        MyData(title: "Men's Shoes"),
        MyData(title: "Men's Accessories"),
        MyData(title: "Children's Clothing"),
        MyData(title: "Women's Clothing"),
        MyData(title: "Women's Shoes"),
        MyData(title: "Women's Accessories"),
        MyData(title: "Children's Shoes"),
        MyData(title: "Children's Accessories")
        
    ]
    
    
    
    @State var text = ""
    
    let layout = [
        GridItem(.flexible(minimum: 80)),
        GridItem(.flexible(minimum: 80)),
        GridItem(.flexible(minimum: 80)),
        GridItem(.flexible(minimum: 80))
      
    ]
    
 
    
   
    
    var body: some View {
        
       
        NavigationView{
           
            ScrollView(.vertical, showsIndicators: false){
                SearchCategories(text: $text)
                
                Spacer()
                
                LazyVGrid(columns: layout, pinnedViews: [.sectionHeaders] ) {
                    Section(header: Text("Clothing & Accessories")
                        .font(.system(size:16))
                            .foregroundColor(.white)
                            .frame(height: 0)
                            .padding()
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .background(Color("MainF"))
                            
                            
                             
                             ) {
                    
                    
                        ForEach(mData.filter({"\([=10=])".contains(text) || text.isEmpty})){ item in
                        
                        VStack{
                            
                            
                        Text(item.title)
                        .foregroundColor(Color.white)
                        .frame(alignment: .center)
                        .font(.system(size: 10))
                        
                                                    
                    }
                }
                  
            }
                        
        }      
               LazyVGrid(columns: layout, pinnedViews: [.sectionHeaders] ){
                    
                    Section(header: Text("Vehicles")
                        .font(.system(size:16))
                            .foregroundColor(.white)
                            .frame(height: 0)
                            .padding()
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .background(Color("MainF"))
                    ) {
                    ForEach(items1, id: \.self) {
                        item in
                        VStack{
                        Image(item)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .padding()
                            
                            Button("Motorbike"){
                                
                            }
                            .foregroundColor(Color.white)
                            .font(.system(size: 12))
                           
                        }
                    }
                    
                    }
                }

我正在尝试同时显示图文并茂的腰带。但我无法立即实施。要么是文字网格，要么是图片网格。

我已经为我从项目数组中提取的图像下方想要的所有文本实现了 mData。我正在尝试通过 LazyVgrid 实现网格布局。我还添加了 pinnedViews 来为每个网格添加标题。

我最近在学习 switfUI，解决这个问题会很有帮助。

Answer 1

欢迎来到 Stack Overflow！请拍tour and see: How do I ask a good question? and How to create a Minimal, Reproducible Example (MRE)。这对 post 可构建的 MRE 非常有帮助。这个问题本身问得很好。

这是一个让您入门的示例。关键是让图像和文本包含在同一个数据模型中，这样它们就可以同时访问。我向 MyData 结构添加了一个 image 变量，您可以看到这如何让视图轻松组合在一起。由于我无法访问您的图片，因此我使用了 SF Symbols。

struct MyData: Identifiable{
    let id = UUID()
    let title: String
    let image: String
}

struct GridTextAndImageView: View {
    
    let myData = [
        MyData(title: "Pencil", image: "pencil"),
        MyData(title: "Trash Can", image: "trash"),
        MyData(title: "Paper Airplane", image: "paperplane.fill"),
        MyData(title: "Umbrella", image: "umbrella.fill"),
        MyData(title: "Megaphone", image: "megaphone.fill"),
        MyData(title: "Speaker", image: "speaker.fill"),
        MyData(title: "Flashlight", image: "flashlight.on.fill"),
        MyData(title: "Camera", image: "camera"),
        MyData(title: "Wrench", image: "wrench"),
        MyData(title: "Screwdriver", image: "screwdriver.fill"),
        MyData(title: "Paintbrush", image: "paintbrush"),
        MyData(title: "Printer", image: "printer"),
        MyData(title: "Briefcase", image: "briefcase.fill"),
        MyData(title: "AirPods Max", image: "airpodsmax"),
    ]
    
    let layout = [
        GridItem(.flexible(minimum: 80)),
        GridItem(.flexible(minimum: 80)),
        GridItem(.flexible(minimum: 80)),
        GridItem(.flexible(minimum: 80))
    ]
    
    var body: some View {
        NavigationView{
            
            ScrollView(showsIndicators: false) {
                LazyVGrid(columns: layout, spacing: 25, pinnedViews: [.sectionHeaders] ) {
                    Section(header: Text("Various SF Symbols")
                        .font(.system(size:16))
                        .foregroundColor(.white)
                        .frame(height: 0)
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .background(Color.orange)
                    ) {
                        ForEach(myData) { item in
                            VStack{
                                Image(systemName: item.image)
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .padding()
                                    .foregroundColor(.white)
                                    .frame(width: 80, height: 80)
                                    .background(LinearGradient(colors: [Color.blue, Color.blue.opacity(0.4)], startPoint: .top, endPoint: .bottom))
                                    .clipShape(RoundedRectangle(cornerRadius: 15))
                                Text(item.title)
                                    .frame(alignment: .center)
                                    .font(.system(size: 10))
                            }
                        }
                        
                    }
                }
            }
        }
    }
}

我似乎无法想出在同一个 ForEach 中包含文本和图像的方法

I can't seem to figure out a way to include text and image in a same ForEach

foreach

swiftui