Question

我似乎找不到一种在列表项之间创建间距的方法。也许我不应该排在第一位吗？

您怎么看？

这是生成视图的代码

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

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 2

您可以使用Spacer（）/ padding

Answer 3

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

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 4

填充无效，因为它只会增加项目/单元格的大小，而不会增加它们之间的间距，但是 .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 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")
}

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

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

5 个答案: