防止视图超出屏幕宽度

Posted 2023-02-24

【中文标题】防止视图超出屏幕宽度

【英文标题】：prevent views from expanding out of screen width

【发布时间】：2020-05-25 20:49:05

【问题描述】：

我有这个观点

import SwiftUI

struct DoctorCard: View 
    let data: Doctor

    var body: some View 
        HStack(alignment: .top, spacing: 8) 
            Image(data.image)
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .cornerRadius(35)
                .frame(width: 86, height: 86, alignment: .center)
                .padding(.trailing, 5)

            VStack(alignment: .leading, spacing: 4) 
                Text(data.name.capitalized)
                    .foregroundColor(Colors.darkBlue)
                    .font(.system(size: 16, weight: .bold))
                    .fixedSize(horizontal: true, vertical: false)
                    .multilineTextAlignment(.leading)

                Text(data.specialist)
                    .foregroundColor(Colors.gray)
                    .font(.system(size: 13, weight: .regular))
                    .fixedSize(horizontal: true, vertical: false)
                    .multilineTextAlignment(.leading)

                Text(data.work)
                    .foregroundColor(Colors.gray)
                    .font(.system(size: 13, weight: .regular))
                    .fixedSize(horizontal: true, vertical: false)
                    .multilineTextAlignment(.leading)

                HStack 
                    Image("location")
                    Text(data.location)
                        .foregroundColor(Colors.gray)
                        .font(.system(size: 13, weight: .regular))
                        .fixedSize(horizontal: true, vertical: false)
                        .multilineTextAlignment(.leading)
                
            .frame(maxWidth: .infinity)
//            Spacer()
        .frame(maxWidth: screenSize.width - 30)
            .padding()
            .background(Color.white)
            .cornerRadius(12)
    



struct DoctorCard_Previews: PreviewProvider 
    static var previews: some View 
        DoctorCard(data: Doctor(id: UUID().uuidString,
                name: "Dr. Basma Saber",
                specialist: "Dentist | General Dentistry | General Dentistry Dentistry",
                work: "Works in West Bay Medicare",
                location: "Al Dafna, Westbay",
                image: "avatar",
                review: 4))
    

如何防止视图超出屏幕？我错过了什么？

【问题讨论】：

请不要发布真实人物的照片。删除/匿名并再次标记，以便我们可以编辑它

完成@Jean-FrançoisFabre

【参考方案1】：

问题是您的 Dentist-line 太长并且您的代码处理方式错误。

这样做：

                    Text("Dentist | General Dentistry | General Dentistry Dentistry")
                        .fixedSize(horizontal: false, vertical: true) // <--- like this
                        .lineLimit(2)
                        .foregroundColor(Color.gray)
                        .font(.system(size: 13, weight: .regular))
//                        .fixedSize(horizontal: true, vertical: false)
                         .multilineTextAlignment(.leading)