SwiftUI 调整矩形大小以适合内容

Question

在我的项目中使用 SwiftUI 我尝试在列表中显示一些数据。

我想在单元格的左侧插入一个矩形()，但找不到固定高度的方法。

（我不想手动输入高度，否则它在不同设备上看起来不太好）

我正在尝试使用几何渲染但无法正常工作。

我在附图上强调了我的想法...

这里是我的代码：

import SwiftUI

struct MatchViewUser: View {
    var match : MatchModel
    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        return formatter
    }
    
    var timeFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.locale = Locale(identifier: "en_US_POSIX")
        
        formatter.dateFormat = "HH:mm a"
        formatter.amSymbol = "AM"
        formatter.pmSymbol = "PM"
        return formatter
    }
    var body: some View {
        GeometryReader { geometry in
        HStack {
            
            Rectangle().frame(width: 30,height: geometry.size.height  ,alignment: .leading)
            VStack(alignment:.leading){
                HStack{
                    Text("\(self.match.dateMatch, formatter: self.dateFormatter)")
                    Spacer()
                    Text("Time:\(self.match.dateMatch, formatter: self.timeFormatter)")
                }.font(.headline).foregroundColor(.blue)
                
                Divider().padding(.horizontal)
                HStack{
                    VStack(alignment:.leading){
                        Text("Match Name:").bold()
                        Text("\(self.match.matchName)").font(.body)
                    }
                    Spacer()
                    VStack(alignment:.leading){
                        Text("Pitch Name").bold()
                        Text("\(self.match.pitchName)").font(.body)
                    }
                    Spacer()
                    VStack(alignment:.trailing){
                        Text("Player").bold()
                        Text("\(self.match.maxPlayer)").font(.body)
                    }
                }.font(.headline)
                
            }
        }
        }
        
    }
    
}

Answer 1

这是一个可能的方法演示（简化了代码 w/o 依赖模型）。使用 Xcode 11.4 / iOS 13.4

准备和测试

struct DemoView: View {

    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        return formatter
    }
    let dateMatch = Date()
    var timeFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.locale = Locale(identifier: "en_US_POSIX")

        formatter.dateFormat = "HH:mm a"
        formatter.amSymbol = "AM"
        formatter.pmSymbol = "PM"
        return formatter
    }
    var body: some View {
        HStack {
            VStack(alignment:.leading){
                HStack{
                    Text("\(self.dateMatch, formatter: self.dateFormatter)")
                    Spacer()
                    Text("Time:\(self.dateMatch, formatter: self.timeFormatter)")
                }.font(.headline).foregroundColor(.blue)

                Divider().padding(.horizontal)
                HStack{
                    VStack(alignment:.leading){
                        Text("Match Name:").bold()
                        Text("Demo1").font(.body)
                    }
                    Spacer()
                    VStack(alignment:.leading){
                        Text("Pitch Name").bold()
                        Text("Demo2").font(.body)
                    }
                    Spacer()
                    VStack(alignment:.trailing){
                        Text("Player").bold()
                        Text("10").font(.body)
                    }
                }.font(.headline)
            }.padding(.leading, 38)
        }.overlay(
            Rectangle().frame(width: 30)
        , alignment: .leading)
    }
}

SwiftUI 调整矩形大小以适合内容

SwiftUI resize a rectangle to fit the content

xcode

geometry

view

swift

swiftui