如何在 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(我的实现非常慢并且有问题)