SwiftUI में स्क्रीन की चौड़ाई भरने के लिए VStack बनाएं

Question 1

इस कोड को दिया:

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)

            Text("Content")
                .lineLimit(nil)
                .font(.body)

            Spacer()
        }
        .background(Color.red)
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

यह इस अंतर में परिणत होता है:

VStackयदि लेबल / पाठ घटकों को पूरी चौड़ाई की आवश्यकता नहीं है, तो भी मैं स्क्रीन की चौड़ाई कैसे भर सकता हूं ?

एक चाल मैंने पाया है कि संरचना में एक खाली सम्मिलित HStackकरना है जैसे:

VStack(alignment: .leading) {
    HStack {
        Spacer()
    }
    Text("Title")
        .font(.title)

    Text("Content")
        .lineLimit(nil)
        .font(.body)

    Spacer()
}

जो वांछित डिज़ाइन देता है:

क्या कोई बेहतर तरीका है?

Question 2

निम्न विकल्पों के साथ .frame संशोधक का उपयोग करने का प्रयास करें:

.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Hello World").font(.title)
            Text("Another").font(.body)
            Spacer()
        }.frame(minWidth: 0,
                maxWidth: .infinity,
                minHeight: 0,
                maxHeight: .infinity,
                alignment: .topLeading
        ).background(Color.red)
    }
}

इसे एक लचीली फ्रेम ( प्रलेखन देखें ) के रूप में वर्णित किया गया है , जो पूरी स्क्रीन को भरने के लिए खिंचाव करेगा, और जब इसमें अतिरिक्त स्थान होगा तो यह इसके अंदर अपनी सामग्री को केंद्र में रखेगा।

Question 3

एक वैकल्पिक स्टैकिंग व्यवस्था जो काम करती है और शायद थोड़ी अधिक सहज है, निम्नलिखित है:

struct ContentView: View {
    var body: some View {
        HStack() {
            VStack(alignment: .leading) {
                Text("Hello World")
                    .font(.title)
                Text("Another")
                    .font(.body)
                Spacer()
            }
            Spacer()
        }.background(Color.red)
    }
}

Spacer()यदि आवश्यक हो तो सामग्री को आसानी से हटाकर फिर से तैनात किया जा सकता है।

Question 4

एक बेहतर रास्ता है!

इसे VStackभरने की चौड़ाई बनाने के लिए आप इसका उपयोग कर सकते हैं GeometryReaderऔर फ्रेम सेट कर सकते हैं । ( .relativeWidth(1.0)काम करना चाहिए, लेकिन जाहिर है अभी नहीं)

struct ContentView : View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("test")
            }
                .frame(width: geometry.size.width,
                       height: nil,
                       alignment: .topLeading)
        }
    }
}

VStackवास्तविक स्क्रीन की चौड़ाई बनाने के लिए आप UIScreen.main.bounds.widthएक का उपयोग करने के बजाय फ्रेम सेट करते समय उपयोग कर सकते हैं GeometryReader, लेकिन मुझे लगता है कि आप मूल दृश्य की चौड़ाई चाहते थे।

इसके अलावा, इस तरह से अपने में रिक्ति नहीं जोड़ने के अतिरिक्त लाभ है VStackजो हो सकता है (यदि आप रिक्ति है) अगर आप एक जोड़ा HStackएक साथ Spacer()करने के लिए यह की सामग्री के रूप में VStack।

अद्यतन - वहाँ एक बेहतर रास्ता नहीं है!

स्वीकृत उत्तर की जाँच करने के बाद, मैंने महसूस किया कि स्वीकृत उत्तर वास्तव में काम नहीं करता है! यह पहली नज़र में काम करता प्रतीत होता है, लेकिन यदि आप VStackएक हरे रंग की पृष्ठभूमि के लिए अपडेट करते हैं , तो आप देखेंगे कि VStackअभी भी वही चौड़ाई है।

struct ContentView : View {
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                Text("Hello World")
                    .font(.title)
                Text("Another")
                    .font(.body)
                Spacer()
                }
                .background(Color.green)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
                .background(Color.red)
        }
    }
}

ऐसा इसलिए है क्योंकि .frame(...)वास्तव में पदानुक्रम को देखने के लिए एक और दृश्य जोड़ रहा है और वह दृश्य स्क्रीन को भरना समाप्त कर देता है। हालाँकि, VStackअभी भी नहीं है।

यह समस्या मेरे उत्तर में भी समान प्रतीत होती है और इसे ऊपर की तरह (अलग-अलग पृष्ठभूमि के रंग डालते हुए और बाद में) एक ही दृष्टिकोण का उपयोग करके जांच की जा सकती है .frame(...)। वास्तव में चौड़ी करने के लिए प्रकट होने वाला एकमात्र तरीका स्पेसर्स VStackका उपयोग करना है:

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            HStack{
                Text("Title")
                    .font(.title)
                Spacer()
            }
            Text("Content")
                .lineLimit(nil)
                .font(.body)
            Spacer()
        }
            .background(Color.green)
    }
}

Question 5

स्विफ्ट 5.2 और आईओएस 13.4 के साथ, अपनी आवश्यकताओं के अनुसार, आप अपने VStackशीर्ष अग्रणी बाधाओं और एक पूर्ण आकार के फ्रेम के साथ संरेखित करने के लिए निम्न उदाहरणों में से एक का उपयोग कर सकते हैं ।

ध्यान दें कि एक ही प्रदर्शन में सभी परिणाम नीचे दिए कोड स्निपेट, लेकिन के प्रभावी फ्रेम गारंटी नहीं है VStackऔर न ही की संख्या Viewतत्वों है कि जब तक दृश्य पदानुक्रम डिबगिंग प्रकट हो सकता है।

1. `frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)`विधि का उपयोग करना

सबसे सरल तरीका यह है कि VStackअधिकतम चौड़ाई और ऊंचाई के साथ अपने फ्रेम को सेट करें और इसमें आवश्यक संरेखण भी पास करें frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:):

struct ContentView: View {

    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)
            Text("Content")
                .font(.body)
        }
        .frame(
            maxWidth: .infinity,
            maxHeight: .infinity,
            alignment: .topLeading
        )
        .background(Color.red)
    }

}

एक विकल्प के रूप में, यदि आपके Views के लिए विशिष्ट संरेखण के साथ अधिकतम फ्रेम सेट करना आपके कोड बेस में एक सामान्य पैटर्न है, तो आप इस पर एक एक्सटेंशन विधि बना सकते हैं View:

extension View {

    func fullSize(alignment: Alignment = .center) -> some View {
        self.frame(
            maxWidth: .infinity,
            maxHeight: .infinity,
            alignment: alignment
        )
    }

}

struct ContentView : View {

    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)
            Text("Content")
                .font(.body)
        }
        .fullSize(alignment: .topLeading)
        .background(Color.red)
    }

}

2. `Spacer`संरेखण को मजबूर करने के लिए एस का उपयोग करना

आप अपने VStackपूर्ण आकार के अंदर एम्बेड कर सकते हैं HStackऔर Spacerअपने VStackशीर्ष अग्रणी संरेखण को मजबूर करने के लिए ट्रेलिंग और बॉटम एस का उपयोग कर सकते हैं :

struct ContentView: View {

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text("Title")
                    .font(.title)
                Text("Content")
                    .font(.body)

                Spacer() // VStack bottom spacer
            }

            Spacer() // HStack trailing spacer
        }
        .frame(
            maxWidth: .infinity,
            maxHeight: .infinity
        )
        .background(Color.red)
    }

}

3. एक `ZStack`और एक पूर्ण आकार की पृष्ठभूमि का उपयोग करना`View`

इस उदाहरण से पता चलता है कि किस प्रकार आपके VStackअंदर ZStackएक शीर्ष अग्रणी संरेखण है। ध्यान दें कि Colorअधिकतम चौड़ाई और ऊंचाई निर्धारित करने के लिए दृश्य का उपयोग कैसे किया जाता है:

struct ContentView: View {

    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.red
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            VStack(alignment: .leading) {
                Text("Title")
                    .font(.title)
                Text("Content")
                    .font(.body)
            }
        }
    }

}

4. उपयोग करना `GeometryReader`

GeometryReaderनिम्नलिखित घोषणा है :

एक कंटेनर दृश्य जो अपनी सामग्री को अपने स्वयं के आकार के कार्य के रूप में परिभाषित करता है और अंतरिक्ष को समन्वित करता है। [...] यह दृश्य अपने मूल लेआउट के लिए एक लचीला पसंदीदा आकार देता है।

नीचे दिए गए कोड स्निपेट से पता चलता है कि शीर्ष अग्रणी बाधाओं और एक पूर्ण आकार फ्रेम के साथ GeometryReaderअपने संरेखित करने के लिए कैसे उपयोग करें VStack:

struct ContentView : View {

    var body: some View {
        GeometryReader { geometryProxy in
            VStack(alignment: .leading) {
                Text("Title")
                    .font(.title)
                Text("Content")
                    .font(.body)
            }
            .frame(
                width: geometryProxy.size.width,
                height: geometryProxy.size.height,
                alignment: .topLeading
            )
        }
        .background(Color.red)
    }

}

5. `overlay(_:alignment:)`विधि का उपयोग करना

यदि आप VStackकिसी मौजूदा पूर्ण आकार के शीर्ष पर अपने शीर्ष अग्रणी अवरोधों के साथ संरेखित करना चाहते हैं View, तो आप overlay(_:alignment:)विधि का उपयोग कर सकते हैं :

struct ContentView: View {

    var body: some View {
        Color.red
            .frame(
                maxWidth: .infinity,
                maxHeight: .infinity
            )
            .overlay(
                VStack(alignment: .leading) {
                    Text("Title")
                        .font(.title)
                    Text("Content")
                        .font(.body)
                },
                alignment: .topLeading
            )
    }

}

प्रदर्शित करें:

Question 6

सबसे आसान तरीका है कि मैं इस मुद्दे को हल करने का प्रबंधन एक ZStack + .edgesIgnoringSafeArea।

struct TestView : View {

    var body: some View {
        ZStack() {
            Color.yellow.edgesIgnoringSafeArea(.all)
            VStack {
                Text("Hello World")
            }
        }
    }
}

Question 7

इसे इस्तेमाल करो

.edgesIgnoringSafeArea(.all)

Question 8

आप इसका उपयोग करके कर सकते हैं GeometryReader

GeometryReader

कोड:

struct ContentView : View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
               Text("Turtle Rock").frame(width: geometry.size.width, height: geometry.size.height, alignment: .topLeading).background(Color.red)
            }
        }
    }
}

आपका आउटपुट जैसे:

Question 9

एक अच्छा समाधान और "गर्भनिरोधक" के बिना भूल गया है ZStack

ZStack(alignment: .top){
    Color.red
    VStack{
        Text("Hello World").font(.title)
        Text("Another").font(.body)
    }
}

परिणाम:

Question 10

एक और विकल्प के अंदर HStackएक के Spacer()बाद एक साक्षात्कारों को रखना और उसके बाद रखना है :

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {

            HStack {
                Text("Title")
                    .font(.title)
                    .background(Color.yellow)
                Spacer()
            }

            Text("Content")
                .lineLimit(nil)
                .font(.body)
                .background(Color.blue)

            Spacer()
            }

            .background(Color.red)
    }
}

जिसके परिणामस्वरूप :

Question 11

मेरे लिए यह काम किया गया है (यदि ScrollViewवैकल्पिक हो तो और अधिक सामग्री जोड़ी जा सकती है, यदि आवश्यक हो, तो सामग्री केंद्रित है):

import SwiftUI

struct SomeView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(Axis.Set.horizontal) {
                HStack(alignment: .center) {
                    ForEach(0..<8) { _ in
                        Text("🥳")
                    }
                }.frame(width: geometry.size.width, height: 50)
            }
        }
    }
}

// MARK: - Preview

#if DEBUG
struct SomeView_Previews: PreviewProvider {
    static var previews: some View {
        SomeView()
    }
}
#endif

परिणाम

Question 12

मुझे पता है कि यह सभी के लिए काम नहीं करेगा, लेकिन मुझे यह दिलचस्प लगा कि इसके लिए सिर्फ एक डिवाइडर को जोड़ना है।

struct DividerTest: View {
var body: some View {
    VStack(alignment: .leading) {
        Text("Foo")
        Text("Bar")
        Divider()
    }.background(Color.red)
  }
}

Question 13

यह एक उपयोगी कोड है:

extension View {
    func expandable () -> some View {
        ZStack {
            Color.clear
            self
        }
    }
}

.expandable()संशोधक के साथ और उसके बिना परिणामों की तुलना करें :

Text("hello")
    .background(Color.blue)

-

Text("hello")
    .expandable()
    .background(Color.blue)

Question 14

पेज डिजाइन का उपयोग कर लॉगिन करें SwiftUI

import SwiftUI

struct ContentView: View {

    @State var email: String = "william@gmail.com"
    @State var password: String = ""
    @State static var labelTitle: String = ""


    var body: some View {
        VStack(alignment: .center){
            //Label
            Text("Login").font(.largeTitle).foregroundColor(.yellow).bold()
            //TextField
            TextField("Email", text: $email)
                .textContentType(.emailAddress)
                .foregroundColor(.blue)
                .frame(minHeight: 40)
                .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color.green))

            TextField("Password", text: $password) //Placeholder
                .textContentType(.newPassword)
                .frame(minHeight: 40)
                .foregroundColor(.blue) // Text color
                .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color.green))

            //Button
            Button(action: {

            }) {
                HStack {
                    Image(uiImage: UIImage(named: "Login")!)
                        .renderingMode(.original)
                        .font(.title)
                        .foregroundColor(.blue)
                    Text("Login")
                        .font(.title)
                        .foregroundColor(.white)
                }


                .font(.headline)
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .padding(.horizontal, 20)

                .frame(width: 200, height: 50, alignment: .center)
            }
            Spacer()

        }.padding(10)

            .frame(minWidth: 0, idealWidth: .infinity, maxWidth: .infinity, minHeight: 0, idealHeight: .infinity, maxHeight: .infinity, alignment: .top)
            .background(Color.gray)

    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Question 15

पैरेंट को भरने के लिए आप एक आसान एक्सटेंशन में जियोमेट्री राइडर का उपयोग कर सकते हैं

extension View {
    func fillParent(alignment:Alignment = .center) -> some View {
        return GeometryReader { geometry in
            self
                .frame(width: geometry.size.width,
                       height: geometry.size.height,
                       alignment: alignment)
        }
    }
}

इसलिए अनुरोधित उदाहरण का उपयोग करते हुए, आपको मिलता है

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)

            Text("Content")
                .lineLimit(nil)
                .font(.body)
        }
        .fillParent(alignment:.topLeading)
        .background(Color.red)
    }
}

(ध्यान दें कि स्पेसर की अब आवश्यकता नहीं है)

Question 16

 var body: some View {
      VStack {
           CarouselView().edgesIgnoringSafeArea(.all)           
           List {
                ForEach(viewModel.parents) { k in
                    VideosRowView(parent: k)
                }
           }
    }
 }

SwiftUI में स्क्रीन की चौड़ाई भरने के लिए VStack बनाएं

1. frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)विधि का उपयोग करना

2. Spacerसंरेखण को मजबूर करने के लिए एस का उपयोग करना

3. एक ZStackऔर एक पूर्ण आकार की पृष्ठभूमि का उपयोग करनाView

4. उपयोग करना GeometryReader

5. overlay(_:alignment:)विधि का उपयोग करना