防止视图超出屏幕宽度

时间:2020-05-25 20:49:05

标签: swiftui

我有这个观点

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

如何防止视图跳出屏幕?我想念什么?

1 个答案:

答案 0 :(得分:0)

问题是您的牙医行太长,您的代码以错误的方式处理了它。

这样做:

                    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)