如何在适合视图的同时使文本大小一致

Posted 2023-02-24

【中文标题】如何在适合视图的同时使文本大小一致

【英文标题】：How do I get the Text to be uniform size while fitting to the view

【发布时间】：2021-10-16 04:00:43

【问题描述】：

我正在 swiftui 中创建一个 TimerView，在按下按钮时获取开始时间和停止时间。

我在一个 HStack 中使用了两个 VStack 来确保文本正确对齐，但我无法考虑时间戳文本大小有时太大并且不对齐（时间戳低于标签！） （单击开始）或两个不同的时间戳具有不同的大小（单击停止）

我应该如何确保文本在适合窗口的同时大小一致（文本太长并且超出范围）？

import SwiftUI

struct TimerView: View 
    @State var fromTime = ""
    @State var toTime = ""
    
    var body: some View 
        VStack (alignment: .leading)
            HStack
                VStack (alignment: .leading)
                    Text("From Time: ").padding(.bottom, 3.0)
                    Text("To Time: ")
                
                
                VStack (alignment: .leading) 
                    Text(fromTime).minimumScaleFactor(0.2).padding(.bottom, 3.0)
                    Text(toTime).minimumScaleFactor(0.2)
                
                //Text(fromTime).minimumScaleFactor(0.2)
            .padding(.bottom, 60.0)
            //            HStack
            //                Text("To Time: ")
            //                Text(toTime).minimumScaleFactor(0.2)
            //            .padding(.bottom, 60.0)
            HStack
                Button(action: fromTime = getDate()) 
                    Text("Start")
                .padding(.top, 10.0)
                .padding(.bottom, 10.0)
                .padding(.trailing,40.0)
                .padding(.leading, 40.0)
                .overlay(
                    RoundedRectangle(cornerRadius: 10.0).stroke(lineWidth: 2.0)
                )
                
                Button(action: toTime = getDate()) 
                    Text("Stop")
                .padding(.top, 10.0)
                .padding(.bottom, 10.0)
                .padding(.trailing, 40.0)
                .padding(.leading, 40.0)
                .overlay(
                    RoundedRectangle(cornerRadius: 10.0)
                        .stroke(lineWidth: 2.0)
                )
            
        
    


struct TimerView_Previews: PreviewProvider 
    static var previews: some View 
        TimerView()
    


extension TimerView 
    func getDate()->String
        let time = Date()
        let timeFormatter = DateFormatter()
        timeFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
        let stringDate = timeFormatter.string(from: time)
        return stringDate
    

【参考方案1】：

添加第一个TextBaseline

struct TimerView: View 
    @State var fromTime = ""
    @State var toTime = ""
    
    var body: some View 
        VStack (alignment: .leading)
           HStack(alignment: .firstTextBaseline) // <----- Add this line
                VStack (alignment: .leading)
                    Text("From Time: ").padding(.bottom, 3.0)
                    Text("To Time: ")
                
                
                VStack (alignment: .leading) 
                    Text(fromTime).minimumScaleFactor(0.2).padding(.bottom, 3.0)
                    Text(toTime).minimumScaleFactor(0.2)
                
                //Text(fromTime).minimumScaleFactor(0.2)
            .padding(.bottom, 60.0)
            //            HStack
            //                Text("To Time: ")
            //                Text(toTime).minimumScaleFactor(0.2)
            //            .padding(.bottom, 60.0)
            HStack
                Button(action: fromTime = getDate()) 
                    Text("Start")
                .padding(.top, 10.0)
                .padding(.bottom, 10.0)
                .padding(.trailing,40.0)
                .padding(.leading, 40.0)
                .overlay(
                    RoundedRectangle(cornerRadius: 10.0).stroke(lineWidth: 2.0)
                )
                
                Button(action: toTime = getDate()) 
                    Text("Stop")
                .padding(.top, 10.0)
                .padding(.bottom, 10.0)
                .padding(.trailing, 40.0)
                .padding(.leading, 40.0)
                .overlay(
                    RoundedRectangle(cornerRadius: 10.0)
                        .stroke(lineWidth: 2.0)
                )
            
        
    

【讨论】：

嗨@Ray Xu，虽然您的回答帮助我解决了文本的对齐问题，但缩放文本时的文本格式并没有解决，所以我选择删除文本缩放并使用以下内容：@ 987654321@

尽管您的回答最接近解决我的问题，同时保留了我尝试使用的外观。谢谢你的回答！

【参考方案2】：

你可以简单地根据屏幕大小调整字体大小， 例如：一种小字体用于小型设备，另一种用于大型设备。 看到这个How to get device width and height?

然后使用它，给定所需的字体fsize：

HStack 
    VStack (alignment: .leading) 
        Text("From Time: " + fromTime)
        Text("To Time:   " + toTime)
    
    .font(.system(size: fsize))  // <--- here to fit the screen width
    .padding(.bottom, 3.0)
.padding(.bottom, 60.0)

【讨论】：

嗨@workingdog，虽然您的解决方案附加到文本要简单得多，但它没有提供我在模拟器中想要的用户界面的“外观”，这就是我选择另一个的原因回答。谢谢你的回答！