SwiftUI 调整矩形大小以适合内容 [英] SwiftUI resize a rectangle to fit the content

问题描述

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

using SwiftUI on my project I'm try to display some data in a list.

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

I would like to insert on the left side of my cell a rectangle(), but I can't find the way to fix the height.

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

(i don't want to manual input the height otherwise it doesn't look good on different device)

我正在尝试使用几何渲染但不起作用.

I'm try using geometry render but not working.

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

I highlight on the attached picture my idea...

这里是我的代码:

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 测试

Here is a demo of possible approach (simplified your code w/o dependent model). Prepared & tested with 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 调整矩形大小以适合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！