如何在 SwiftUI 中创建彼此分开的列表行

Posted

技术标签:

【中文标题】如何在 SwiftUI 中创建彼此分开的列表行【英文标题】:How to create List row seperate one another in SwiftUI 【发布时间】:2021-02-16 09:47:58 【问题描述】:

我是 SwiftUI 的新手

我正在尝试像这样创建我的部分,其中每一行都相互分隔。有点像背景没有相互连接的部分。看图:(图来自dribbble)

但我的结局是这样的: (我创建了背景蓝色,以便大家可以清楚地看到行)

这是我的代码:

import SwiftUI

struct ProductPageView: View 

init() 
        UITableView.appearance().backgroundColor = .clear // Uses UIColor
    

var body: some View 
    NavigationView 
        ZStack 
            Color.blue.edgesIgnoringSafeArea(.all)
            VStack 
                List 
                    ForEach(arrayProduct, id: \.name)  dataProduct in
                        ProductListCell(item: dataProduct)
                    
                    .listRowInsets(EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10))
                
                .listStyle(InsetGroupedListStyle())
            
        
        .navigationTitle("Produk")
    


我用过listRowInsets,但它只是拉伸它。 如何在行之间创建这种分隔?

任何帮助将不胜感激。

谢谢

【问题讨论】:

它们是insets,所以试试负值。 喜欢.listRowInsets(EdgeInsets(top: -10, leading: 0, bottom: -10, trailing: 0)) ?没用的人 【参考方案1】:

我没有尝试像素完美复制,因为我没有资源,但以下概述了您可以完成此操作的一种方法。

代码中的注释用于解释一些关键部分:

import SwiftUI

struct ContentView: View 
    var body: some View 
        NavigationView 
            ZStack 
                Color.blue.edgesIgnoringSafeArea(.all)
                VStack 
                    // This handles the display of the
                    // section header
                    HStack 
                        // The text & spacer are grouped
                        // so that you can pad accordingly
                        Text("Stuff")
                        Spacer()
                    
                    .padding(.bottom, 2)
                    .padding(.leading, 10)
                    // A VStack contains your list of items
                    VStack 
                        ForEach(0...3, id: \.self)  element in
                            // Each grouping (a product for you)
                            // will exist within this top level
                            // HStack
                            HStack 
                                // A new HStack (or another view of
                                // your choice) will contain the views
                                // that compose your product entry
                                HStack 
                                    Text("\(element)")
                                    Spacer()
                                
                                .padding() // Provides some buffer around the product
                                .background(Color.white)
                                .contentShape(Rectangle()) // For tapping
                                .cornerRadius(5.0)// Rounding!
                            
                            // Custom padding can tailor your spacing needs
                            .padding([.top, .bottom], 2)
                            .padding([.trailing, .leading], 10)
                        
                    
                    Spacer()
                
            
            .navigationTitle("Produk")
        
    

【讨论】:

以上是关于如何在 SwiftUI 中创建彼此分开的列表行的主要内容,如果未能解决你的问题,请参考以下文章

如何在 SwiftUI 中创建一个列表视图,每个列表项都是一个 WKWebView(我的实现非常慢并且有问题)

如何在 SwiftUI ForEach 内容中将多个按钮操作分开?

如何在 swiftUI 中创建一个普通视图

如何在 SwiftUI 中创建指数

如何在 SwiftUI 中创建分段按钮?

如何在 SwiftUI 中创建图像按钮