如何在SwiftUI中准确对齐形状和文本

rjee0c15 于 2022-11-28 发布在 Swift

关注(0)|答案(1)|浏览(109)

是否有一种方法来对齐对象，使它们根据未使用的空间调整大小？
这里有一个例子--有三个对象，一个背景正方形和前景文本，文本下面有一个高亮矩形。文本和高亮的间距应该相等（或者足够近）。

这是我所得到的（我已经尝试了各种不同的迭代，虽然太空人命令似乎有点ideosynchratic（取决于各种因素，我还没有完全理解）...

struct hlGroup: View {
    var body : some View {
        Color(red:20/255,green: 45/255, blue:71/255)
            .frame(width:50, height:56)
            .cornerRadius(6)
            .overlay(alignment:.center){
                Spacer()
                VStack(){
            Text(String(0))
                .foregroundColor(.white)
                .font(Font.system(size:30, weight:.bold))
            HStack(spacing: 2){
                hlShow(hlColor: Color(red:100/255, green: 227/255, blue: 50/255))
            }
            Spacer()
}}}}

struct hlShow: View {
    let hlColor :Color
    var body: some View {
            Rectangle()
                .foregroundColor(hlColor)
                .frame(width:30, height:6)
                .cornerRadius(2)
}}

swift

来源：https://stackoverflow.com/questions/74586992/how-to-align-shapes-and-text-accurately-in-swiftui

1条答案

按热度按时间

lnlaulya1#

除非我遗漏了一些特定的要求，否则使用VStack作为主容器可以很容易地实现布局（为文本添加一个边框作为边界指示器--以80 × 80预览）：

struct SODemo: View {
    var body: some View {
        VStack {
            Spacer()
            Text("Text")
                .foregroundColor(.white)
                .font(Font.system(size: 30, weight: .bold))
                .border(.red)
            Spacer()
            Color.green.frame(height: 6)
            Spacer()
        }
        .background(Color.blue)
        .cornerRadius(6)
    }
}

x1c 0d1x

赞(0）回复(0）举报 2022-11-28

我来回答

如何在SwiftUI中准确对齐形状和文本

1条答案

相关问题

热门标签

最新问答