SwiftUI 调整矩形以适应内容

Posted 2023-02-24

【中文标题】SwiftUI 调整矩形以适应内容

【英文标题】：SwiftUI resize a rectangle to fit the content

【发布时间】：2020-09-01 10:06:43

【问题描述】：

在我的项目中使用 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)
                
            
        
        
        
    
    

【参考方案1】：

这是一个可能方法的演示（简化了您的代码，没有依赖模型）。使用 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)