मैं एक दृश्य को एक साथ रखने की कोशिश कर रहा हूं जिसमें शीर्ष शीर्षलेख दृश्य, निचला सामग्री दृश्य, और एक दृश्य जो दो दृश्यों को विभाजित करने वाली रेखा पर केंद्रित शीर्ष पर बैठता है। मुझे लगा कि मुझे मध्य दृश्य की स्थिति के लिए ZStack के भीतर एक संरेखण मार्गदर्शिका की आवश्यकता है, लेकिन मुझे बिना किसी अंतराल के केंद्रित निचले सामग्री दृश्य में आइटम प्राप्त करने में समस्या हो रही है।

यह कोड:

extension VerticalAlignment {
    struct ButtonMid: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            return context[.bottom]
        }
    }
    static let buttonMid = VerticalAlignment(ButtonMid.self)
}

struct ContentView: View {
    var body: some View {
        VStack {
            ZStack(alignment: Alignment(horizontal: .center, vertical: .buttonMid)) {
                HeaderView()
                    .frame(maxWidth: .infinity, minHeight: 200, idealHeight: 200, maxHeight: 200, alignment: .topLeading)
                
//                BodyView()
//                    .alignmentGuide(.buttonMid, computeValue: { dimension in
//                        return dimension[VerticalAlignment.top]
//                    })
                
                Color.red
                    .frame(width: 380, height: 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .alignmentGuide(.buttonMid, computeValue: { dimension in
                        return dimension[VerticalAlignment.center]
                    })
            }
            
            BodyView()
        }
        .edgesIgnoringSafeArea(.top)
    }
}

struct HeaderView: View {
    var body: some View {
        Color.green
    }
}

struct BodyView: View {
    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                BodyContent()
                Spacer()
            }
            Spacer()
        }
        .background(Color.blue)
    }
}

struct BodyContent: View {
    var body: some View {
        VStack {
            Text("Line 1")
            Text("Line 2")
            Text("Line 3")
        }
    }
}

आपको यह दें:

enter image description here

जो कम सामग्री को केंद्र में रखता है जिस तरह से मैं इसे चाहता हूं हालांकि यह ऊपरी और निचले विचारों के बीच एक अंतर छोड़ देता है। अगर मैं ZStack में बॉडी व्यू कोड को असम्बद्ध करता हूं और इसे VStack में इस तरह टिप्पणी करता हूं:

struct ContentView: View {
    var body: some View {
        VStack {
            ZStack(alignment: Alignment(horizontal: .center, vertical: .buttonMid)) {
                HeaderView()
                    .frame(maxWidth: .infinity, minHeight: 200, idealHeight: 200, maxHeight: 200, alignment: .topLeading)
                
                BodyView()
                    .alignmentGuide(.buttonMid, computeValue: { dimension in
                        return dimension[VerticalAlignment.top]
                    })
                
                Color.red
                    .frame(width: 380, height: 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .alignmentGuide(.buttonMid, computeValue: { dimension in
                        return dimension[VerticalAlignment.center]
                    })
            }
            
//            BodyView()
        }
        .edgesIgnoringSafeArea(.top)
    }
}

आप को देंगे:

enter image description here

जो सामग्री को केंद्रित नहीं करता है। मैं इसे कैसे केंद्रित रख सकता हूं? मैंने इसे एक ज्यामिति रीडर में डालने का प्रयास किया और इसके समान परिणाम थे।

2
GilroyKilroy 16 फरवरी 2021, 23:06

1 उत्तर

सबसे बढ़िया उत्तर

आपको कस्टम VerticalAlignment की आवश्यकता नहीं है। इसके बजाय आप मध्य दृश्य को एक ओवरले के रूप में रख सकते हैं और इसे नीचे के दृश्य की शीर्ष सीमा पर संरेखित कर सकते हैं:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            HeaderView()
                .frame(height: 200)
            BodyView()
                .overlay(
                    Color.red
                        .frame(width: 380, height: 50)
                        .alignmentGuide(.top) { $0[VerticalAlignment.center] },
                    alignment: .top
                )
        }
        .edgesIgnoringSafeArea(.top)
    }
}
1
pawello2222 17 फरवरी 2021, 19:51
1
VStack पर "स्पेसिंग: 0" की आवश्यकता के अलावा इसने बहुत अच्छा काम किया। धन्यवाद।
 – 
GilroyKilroy
17 फरवरी 2021, 19:30