代码之家 › 专栏 › 技术社区 › tech_human

将列表部分行变成按钮

swiftui-list swiftui

tech_human · 技术社区 · 12 月前

我有一个由三部分组成的清单。第一部分和第二部分显示行中的数据,但中间有一个按钮,所以我在一个部分中创建了按钮。然而,由于它在列表部分,我看到按钮旁边有白色填充。

密码

import SwiftUI
import Foundation

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                List {
                    Section(header: Text("Section A")) {
                        Text("Section A")
                    }
                    
                    Button { } label: {
                        HStack {
                            Spacer()
                            Image(systemName: "calendar.badge.plus").font(.body.bold()).foregroundColor(Color.blue).padding(.trailing, 5.0)
                            Text("Add to Calendar").font(.body.bold()).foregroundColor(Color.blue)
                            Spacer()
                        }
                        .frame(maxWidth: .infinity)
                        .contentShape(Rectangle())
                    }
                    .frame(width: UIScreen.main.bounds.width - 60.0, height: 44.0)
                    .background(Color.blue.opacity(0.5))
                    .cornerRadius(10.0)
                    .contentShape(Rectangle())
                    
                    Section(header: Text("Section C")) {
                        Text("Section C")
                    }
                }
            }
        }
    }
}

如何删除“添加到日历”按钮周围的白色填充?或者其他选项是如何将白色填充设置为蓝色,即按钮背景色?

1 回复 | 直到 12 月前

El Tomato 12 月前

以下行有问题,因为 UIScreen 在SwiftUI中很少使用。

.frame(width: UIScreen.main.bounds.width - 60.0, height: 44.0)

不管怎样,在加了两行之后,以下就是我所拥有的。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                List {
                    Section(header: Text("Section A")) {
                        Text("Section A")
                    }
                    
                    Button { } label: {
                        HStack {
                            Spacer()
                            Image(systemName: "calendar.badge.plus").font(.body.bold()).foregroundColor(Color.blue).padding(.trailing, 5.0)
                            Text("Add to Calendar").font(.body.bold()).foregroundColor(Color.blue)
                            Spacer()
                        }
                        .frame(maxWidth: .infinity)
                        .contentShape(Rectangle())
                    }
                    .frame(width: .infinity, height: 44.0)
                    .background(Color.blue.opacity(0.5))
                    .cornerRadius(10.0)
                    .contentShape(Rectangle())
                    .listRowInsets(EdgeInsets()) //<<<<<<<< here
                    
                    Section(header: Text("Section C")) {
                        Text("Section C")
                    }
                }
                .environment(\.defaultMinListRowHeight, 0) //<<<<<<<< here
            }
        }
    }
}

下面的屏幕截图显示了上面代码的结果。