如何在 SwiftUI 列表视图中的项目之间创建间距？

Question

我似乎找不到一种方法来在

List

项目之间创建间距。 也许我一开始就不应该列出清单？

你觉得怎么样？

这是生成视图的代码：

struct ContentView: View {
    
    @ObservedObject var ratesVM = RatesViewModel()
    
    init() {
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        UITableView.appearance().backgroundColor = UIColor.init(named: "midnight blue")
        UITableViewCell.appearance().backgroundColor = .green
        UITableView.appearance().separatorStyle = .none
    }
    
    var body: some View {
        
        NavigationView {
            List (ratesVM.ratesList, id: \.self) { rate in
                    Image(systemName: "plus")
                    
                    Button(action: {print("pressed")}) {
                        Text(rate.hebrewCurrencyName)
                }
            }
            .navigationBarTitle("המרות מטבע")
            .navigationBarItems(leading:
                Button(action: {
                    print("button pressed")
                    self.ratesVM.callService()
                }) {
                    Image(systemName: "plus")
                        .foregroundColor(Color.orange)})
        }.environment(\.layoutDirection, .rightToLeft)
    }
}

Answer 1

您可以将最小列表行高定义得更大，这样行之间就会有更多的间隔。

List (ratesVM.ratesList, id: \.self) { rate in
       Image(systemName: "plus")
       Button(action: {print("pressed")}) {
                    Text(rate.hebrewCurrencyName)
       }
}.environment(\.defaultMinListRowHeight, 50) //minimum row height

或者，您可以将行构建为 HStack 并指定框架高度。

List (ratesVM.ratesList, id: \.self) { rate in
    HStack {
       Image(systemName: "plus")
       Button(action: {print("pressed")}) {
          Text(rate.hebrewCurrencyName)
       }
    }.frame(height: 50) //your row height 
}.environment(\.defaultMinListRowHeight, 20) 

或者作为 VStack 并使用 Spacers

List (ratesVM.ratesList, id: \.self) { rate in
    VStack{
        Spacer()
        HStack {
           Image(systemName: "plus")
           Button(action: {print("pressed")}) {
              Text(rate.hebrewCurrencyName)
           }
        }
        Spacer()
    }.frame(height: 50)
}.environment(\.defaultMinListRowHeight, 20) 

Answer 2

SwiftUI 方式

您可以通过删除列表行分隔符

.listRowSeparator(.hidden)

并将列表行背景设置为定义顶部和底部 EdgeInsets 填充的 InsettableShape

.listRowBackground()

来实现此目的。顺便说一句，不要忘记将

.listStyle(.plain)

设置为

.plain

。

您可以在这篇开发帖子SwiftUI List Card View中找到更好的实现。

//
//  ContentView.swift
//  My App
//
//  Created by Kolmar Kafran on 25/08/22.
//  https://www.linkedin.com/in/kolmar-kafran/
//

import SwiftUI

struct ContentView: View {
    @State private var someList = [0, 1, 2, 3, 4]
    
    var body: some View {
        List {
            ForEach(someList, id: \.self) { n in
                Text("\(n)")
                    .foregroundColor(.white)
                    .listRowBackground(
                        RoundedRectangle(cornerRadius: 5)
                            .background(.clear)
                            .foregroundColor(.blue)
                            .padding(
                                EdgeInsets(
                                    top: 2,
                                    leading: 10,
                                    bottom: 2,
                                    trailing: 10
                                )
                            )
                    )
                    .listRowSeparator(.hidden)
            }
            .onDelete { idx in
                someList.remove(atOffsets: idx)
            }
        }
        .listStyle(.plain)
    }
}

Answer 3

填充不起作用，因为它只增加了项目/单元格的大小，而不增加了项目/单元格之间的间距，但是 .environment(.defaultMinListRowHeight, 20) 似乎有效

我还实现了按钮样式的自定义视图，以调整按钮相对于项目/单元格的框架和“可按压区域”。

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.black)
            .opacity(configuration.isPressed ? 0.5 : 1.0)
            .frame(width: 350, height: 50, alignment: Alignment.center)
            .background(Color.orange)
    }
}

struct ContentView: View {

    @ObservedObject var ratesVM = RatesViewModel()

    init() {
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        UITableView.appearance().backgroundColor = UIColor.init(named: "midnight blue")
        UITableViewCell.appearance().backgroundColor = .clear
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {

        NavigationView {
            List (ratesVM.ratesList, id: \.self) { rate in
                Button(action: {print("pressed")}) {
                    Text(rate.hebrewCurrencyName)
                }.buttonStyle(MyButtonStyle())
            }
            .navigationBarTitle("המרות מטבע")
            .navigationBarItems(leading:
                Button(action: {
                    print("button pressed")
                    self.ratesVM.callService()
                }) {
                    Image(systemName: "plus")
                        .foregroundColor(Color.orange)})
        }.environment(\.layoutDirection, .rightToLeft)
            .environment(\.defaultMinListRowHeight, 150)
    }
}

Answer 4

SwiftUI 允许我们使用 padding() 修饰符在视图周围设置单独的填充。如果您在不带任何参数的情况下使用它，您将在所有边上获得系统默认的填充，如下所示：

VStack {
    Text("SwiftUI")
        .padding()
    Text("rocks")
}

但您也可以自定义要应用的填充量和位置。因此，您可能只想将系统填充应用于一侧：

Text("SwiftUI")
    .padding(.bottom)

或者您可能想控制向所有边应用多少填充：

Text("SwiftUI")
    .padding(100)

或者您可以将两者结合起来，向视图的一侧添加特定量的填充：

Text("SwiftUI")
    .padding(.bottom, 100)

所以你可以做

Text(rate.hebrewCurrencyName)
      .padding(50)

Answer 5

这里的一个快速解决方案是将相应的

listStyle

设置为

SidebarListStyle

。例如：

List {
    Text("First row")
    Text("Second row")
    Text("Third row")
}
.listStyle(SidebarListStyle())

但请注意，在 macOS 和 iOS 上，侧边栏列表样式还会在部分标题中显示公开指示符，允许用户折叠和展开部分。

另一个快速替代方案是使用

Divider()

辅助视图（即可用于分隔其他内容的视觉元素）：

List {
    Text("First row")
    Divider()
    Text("Second row")
    Divider()
    Text("Third row")
}

两种解决方案都不允许直接控制垂直间距，但至少提供了更宽敞的布局替代方案。

Answer 6

工作示例

struct AuthView_Previews: PreviewProvider {
static var previews: some View {
    let t = ["1","2","3","4","5","6","7","8","9"]
    GeometryReader { geometry in
        List(t, id: \.self){ item in
                HStack{
                    Text(item)
                }
                .frame(width: geometry.size.width - 40, height: 39, alignment: .center)
                .padding(10)
                .background(Color("AppRecommended"))
                .cornerRadius(10)
                .listRowSeparator(.hidden)
        }
        .listStyle(.plain)
    }
}

}

注意：.listRowSeparator(.hidden) 适用于 iOS 15 及以上版本

Answer 7

就我而言，我需要将以下内容添加到我的

Section

：

List {
    Section {
        ForEach(nearbyLocations, id: \.id) { location in
            LocationCard(location: location)
        }
    }
    .listStyle(.plain)
    .listRowSeparator(.hidden)
    .listRowBackground(Color.clear)
    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 10, trailing: 0))
}

要更改卡片的间距，请根据需要更新

EdgeInsets

的

bottom

。

将其发布在这里，以防有人需要类似的结果。