स्क्रॉलव्यू टेक्स्ट अलाइनमेंट स्विफ्टयूआई

Question

मेरे पास एक ForEach लूप के साथ एक लंबवत ScrollView है जिसमें HStack के अंदर Text, Image, और दो Text हैं। मैं प्रत्येक पंक्ति की वस्तुओं को एक दूसरे के साथ संरेखण में रखना चाहता हूं। मैंने VStack को alignment .leading के साथ लपेटने का प्रयास किया है, लेकिन कुछ नहीं किया। मेरे पास जो समस्या है वह यह है कि पाठ पंक्तिबद्ध नहीं है। स्विफ्टयूआई के लिए अभी भी बहुत नया है इसलिए किसी भी मदद की सराहना की जाएगी।

Issue

ScrollView(.vertical) {
    ForEach(self.daily.forecast, id: \.date) { forecast in
        HStack (spacing : 10){
            Text(forecast.date ?? "")
                .fontWeight(.bold)
            Spacer()
            RequestImage(Url("IMAGE_URL"))
                .aspectRatio(contentMode: .fit)
                .frame(width: 30, height: 30)
                .clipped()
            Spacer()
            Text("\(forecast.maxTemp)")
                .fontWeight(.bold)
            Text("\(forecast.minTemp)")
                .fontWeight(.bold)
        }
    }
}
.padding(.all, 15)
.onAppear() {
    authorize {_ in
        loadForecast()
    }
}

अद्यतन: मैं थोड़ा और करीब आने में सक्षम था लेकिन चीजें अभी भी गठबंधन नहीं हैं जहां मैं उन्हें चाहता हूं।

ScrollView(.vertical) {
    ForEach(self.daily.forecast, id: \.date) { forecast in
        HStack (spacing : 10){
            Text(date)
                .font(.title3)
                .fontWeight(.bold)
                .frame(minWidth: 45)
            Spacer()
            RequestImage(Url("IMAGE_URL"))
                .aspectRatio(contentMode: .fit)
                .frame(width: 35, height: 35)
                .frame(minWidth: 50)
                .clipped()
            Spacer()
            Text(maxTemp)
                .font(.title3)
                .fontWeight(.bold)
                .frame(minWidth: 45)
            Text(minTemp)
                .font(.title3)
                .fontWeight(.bold)
                .foregroundColor(Color.secondary)
                .frame(minWidth: 45)
        }
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
    }
}
.padding(.all, 15)
.onAppear() {
    authorize {_ in
        loadForecast()
    }
}

enter image description here

swiftui

2

cole 31 जिंदा 2021, 07:28

Answer 1

यहां संभावित समाधान का एक डेमो है। Xcode 12.4 / iOS 14.4 . के साथ तैयार

demo

struct DemoWeatherLayout: View {
    private var dayOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sut"]
    var body: some View {
        ScrollView {
            VStack {
                ForEach(dayOfTheWeek, id: \.self) {
                    WeatherRowView(day: $0, 
                       icon: ["sun.max", "cloud.sun", "cloud", "cloud.snow"].randomElement()!,
                       low: Array(-5..<0).randomElement()!, 
                       high: Array(1..<15).randomElement()!)
                }
            }.padding()
        }
    }
}

struct WeatherRowView: View {
    var day: String
    var icon: String
    var low: Int
    var high: Int

    var body: some View {
        HStack {
            Text(day)
                .frame(maxWidth: .infinity, alignment: .leading)
            Image(systemName: icon)
                .frame(maxWidth: .infinity, alignment: .leading)
            HStack {
                Text("+XXº").foregroundColor(.clear)
                    .overlay(Text(String(format: "%+d", low)), alignment: .leading)
                Text("+XXº").foregroundColor(.clear)
                    .overlay(Text(String(format: "%+d", high)), alignment: .leading)
            }
        }
    }
}

1

Asperi 31 जिंदा 2021, 14:20

Answer 2

तीन सुझाव:

alignment पैरामीटर को HStack में जोड़ें:

HStack(alignment: .lastTextBaseline, spacing: 10) { ... //others options: .top, .center, .firstTextBaseline...
minLength पैरामीटर को Spacer में जोड़ें:

Spacer(minLength: 0) लेकिन रिक्ति के साथ: 10 HStack में यह थोड़ा बेमानी है। आप spacing: 10 को Spacer(minLength: 10) के लिए हटा सकते हैं
Text("\(forecast.minTemp)").fontWeight(.bold) के बाद अंत में एक Spacer(minLength: 0) जोड़ें

0

Joannes 31 जिंदा 2021, 13:27

Answer 3

मैं @Asperi उत्तर को सही के रूप में स्वीकार करने जा रहा हूं। यूआई वास्तव में तब से बदल गया है जब से कहा गया लेबल बेहतर फिट हो गया है। बाकी सभी की सराहना करें। कोड बहुत बदसूरत है लेकिन काम करता है। सुनिश्चित नहीं है कि यह 100% सही है।

HStack (spacing: 10){
    Text(date)
        .font(.title3)
        .fontWeight(.bold)
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
    Spacer()
    RequestImage(Url("IMAGE_URL_HERE"))
        .aspectRatio(contentMode: .fit)
        .frame(width: 35, height: 35)
        .frame(minWidth: 55)
        .clipped()
    Spacer()
    Text(maxTemp)
        .font(.title3)
        .fontWeight(.bold)
        .frame(minWidth: 50)
        .background(Color.orange)
        .cornerRadius(5)
    Text(minTemp)
        .font(.title3)
        .fontWeight(.bold)
        .frame(minWidth: 50)
        .background(Color.blue)
        .cornerRadius(5)
}

enter image description here

0

cole 2 फरवरी 2021, 07:55

स्क्रॉलव्यू टेक्स्ट अलाइनमेंट स्विफ्टयूआई

3 जवाब

संबंधित सवाल

नए सवाल

swiftui