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

问题描述

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

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

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

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

我在所附图片上突出显示了我的想法...

RxSwifts Cheatsheet

这是我的代码：

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)
                
            }
        }
        }
        
    }
    
}

解决方法

这里是一个可行方法的演示（简化了没有相关模型的代码）。使用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)
    }
}