Question

我确定这是超级简单的东西，但是我似乎无法弄清楚。我正在尝试创建一个由三行垂直堆叠的文本组成的“窗口小部件”。此信息应放置在“框架”或“边框”内，使其类似于卡片。这些卡将有一排将水平滚动。

信不信由你，我唯一不知道的部分是如何在小部件周围绘制边框。我已经尝试过.border，但这恰好紧贴文本边框。我知道我可以添加填充，但是我真正需要的是一张固定尺寸的卡片，因此滚动列表中的每个元素都是相同的。

我用这个最接近了

.frame(width: geometry.size.width/1.3, height: 200)
.background(Color.white)
.border(Color.blue)
.cornerRadius(20)

...但是所有角落都被剪掉了。作为参考，下面是完整的代码清单：

struct AccountTile: View {
    var body: some View {
        GeometryReader { geometry in
            VStack(alignment: .leading, spacing: 8) {
                Text("Account Balance").font(.largeTitle)
                Text("Account Name").font(.headline)
                HStack(spacing: 0) {
                    Text("There are ").font(.caption).foregroundColor(.gray)
                    Text("6 ").font(.caption).fontWeight(.bold).foregroundColor(.blue)
                    Text("unreconciled transactions.").font(.caption).foregroundColor(.gray)
                }
            }
            .frame(width: geometry.size.width/1.3, height: 200)
            .background(Color.white)
            .border(Color.blue)
            .cornerRadius(20)
        }
    }
}

...这就是代码产生的内容：

这几乎是我正在寻找的-他们只需要完整的边框即可。

Answer 1

使用一些填充和overlay创建边框。这是代码（：

struct AccountTile: View {
    var body: some View {
        GeometryReader { geometry in
            VStack(alignment: .leading, spacing: 8) {
                Text("Account Balance").font(.largeTitle)
                Text("Account Name").font(.headline)
                HStack(spacing: 0) {
                    Text("There are ").font(.caption).foregroundColor(.gray)
                    Text("6 ").font(.caption).fontWeight(.bold).foregroundColor(.blue)
                    Text("unreconciled transactions.").font(.caption).foregroundColor(.gray)
                }
            }.frame(width: geometry.size.width/1.3, height: 200)
                .background(Color.white)
                .overlay(
                    RoundedRectangle(cornerRadius: 20)
                        .stroke(Color.blue, lineWidth: 2))
        }
    }
}

如何在SwiftUI中创建“未填充的框架”？

1 个答案: