SwiftUI में "संरेखण" एक अत्यंत महत्वपूर्ण अवधारणा है, लेकिन कई डेवलपर्स इस लेआउट टूल में महारत हासिल करने के लिए संघर्ष करते हैं। WWDC 2022 में, Apple ने SwiftUI में लेआउट प्रोटोकॉल जोड़ा, जिससे हमें SwiftUI के लेआउट सिद्धांतों को समझने और मान्य करने के अधिक अवसर मिले।

यह लेख लेआउट प्रोटोकॉल की सामग्री के संयोजन में SwiftUI के "संरेखण" के माध्यम से कंघी करेगा, जिससे पाठकों को "संरेखण" की स्पष्ट समझ और महारत हासिल करने की उम्मीद है।

आप इस आलेख के लिए आवश्यक स्रोत कोड यहां डाउनलोड कर सकते हैं ।

संरेखण क्या है?

संरेखण एक व्यवहार है जो कई वस्तुओं के बीच होता है। उदाहरण के लिए, एक डेस्क पर किताबों के ढेर को व्यवस्थित करना, ध्यान में खड़े रहना और प्रशिक्षण के दौरान बाएं (दाएं) को संरेखित करना आदि। SwiftUI में, संरेखण गाइड के अनुसार एक लेआउट कंटेनर में कई दृश्यों को संरेखित करना संदर्भित करता है। उदाहरण के लिए, निम्नलिखित कोड को ZStack कंटेनर के अंदर सभी दृश्यों को उनके संबंधित केंद्र बिंदुओं के अनुसार संरेखित करने की आवश्यकता होती है:

ZStack(alignment: .center) {
    Text("Hello")
    Text("World")
    Circle()
        .frame(width: 50, height: 50)
}

• संरेखण गाइड के रूप में क्या उपयोग करें
• किन विचारों को "गठबंधन" किया जा रहा है

अवलोकन

संरेखण मार्गदर्शिका का उपयोग दृश्यों को संरेखित करने के आधार की पहचान करने के लिए किया जाता है। इसकी निम्नलिखित विशेषताएं हैं:

• संरेखण मार्गदर्शिकाएँ न केवल बिंदुओं की पहचान कर सकती हैं, बल्कि रेखाएँ भी

HorizontalAlignment.leading, HorizontalAlignment.center, HorizontalAlignment.trailing, क्रमशः, अग्रणी किनारे, केंद्र और अनुगामी किनारे (दृश्य के क्षैतिज अक्ष के साथ) की पहचान करें।

VerticalAlignment.top, VerticalAlignment.center, VerticalAlignment.bottom, क्रमशः, ऊपर, केंद्र और नीचे (दृश्य के ऊर्ध्वाधर अक्ष के साथ) की पहचान करें।

Alignment.topLeadingHorizontalAlignment.leadingऔर से बना है VerticalAlignment.top, और दो संदर्भ रेखाओं का प्रतिच्छेदन दृश्य के शीर्ष अग्रणी की पहचान करता है।

• संरेखण गाइड कार्यों से बने होते हैं।

• संरेखण मार्गदर्शिकाएँ एकाधिक लेआउट दिशाओं का समर्थन करती हैं।

VStack(alignment:.leading){
    Text("Hello world")
    Text("WWDC 2022")
}
.environment(\.layoutDirection, .rightToLeft)

      
                

                    
                    
                
            

      
                

                    
                    
                
            

कस्टम संरेखण मार्गदर्शिकाएँ

SwiftUI द्वारा प्रदान किए गए प्रीसेट अलाइनमेंट गाइड के अलावा, डेवलपर निम्नलिखित कोड के साथ अलाइनमेंट गाइड को भी कस्टमाइज़ कर सकते हैं:

struct OneThirdWidthID: AlignmentID {
    static func defaultValue(in context: ViewDimensions) -> CGFloat {
        context.width / 3
    }
}
// Define a custom HorizontalAlignment with a reference value of one third of the view's width
extension HorizontalAlignment {
    static let oneThird = HorizontalAlignment(OneThirdWidthID.self)
}

// You can also define a reference point that has two dimensional values for ZStack and frame.
extension Alignment {
    static let customAlignment = Alignment(horizontal: .oneThird, vertical: .top)
}

संरेखणगाइड संशोधक

SwiftUI में, डेवलपर alignmentGuideकिसी दृश्य के लिए किसी विशेष संरेखण मार्गदर्शिका के मान को संशोधित करने के लिए संशोधक का उपयोग कर सकते हैं (स्पष्ट मान सेट करने के लिए, अगला भाग देखें)। उदाहरण के लिए:

struct AlignmentGuideDemo:View{
    var body: some View{
        VStack(alignment:.leading) {
            rectangle // Rectangle1
                .alignmentGuide(.leading, computeValue: { viewDimensions in
                    let defaultLeading = viewDimensions[.leading] // default is 0
                    let newLeading = defaultLeading + 30
                    return newLeading
                })

            rectangle // Rectangle2
        }
        .border(.pink)
    }
    var rectangle:some View {
        Rectangle()
            .fill(.blue.gradient)
            .frame(width: 100, height: 100)
    }
}

संरेखण मार्गदर्शिकाओं के लिए स्पष्ट मान

संरेखण गाइड मूल्य = स्पष्ट मूल्य ?? डिफ़ॉल्ट मान

एक दृश्य में प्रत्येक संरेखण गाइड का एक डिफ़ॉल्ट मान होता है ( defaultValueसंरेखण गाइड परिभाषा में विधि के माध्यम से प्राप्त)। यदि संरेखण मार्गदर्शिका के लिए स्पष्ट मान सेट नहीं है (स्पष्ट मान शून्य है), तो संरेखण मार्गदर्शिका डिफ़ॉल्ट मान वापस कर देगी।

Rectangle()
    .fill(.blue.gradient)
    .frame(width: 100, height: 100)
// Default alignment guide values:
// leading: 0 , HorizontalAlignment.center: 50, trailing: 100
// top: 0 , VerticalAlignment.center: 50 , bottom: 100
// firstTextBaseline : 100 , lastTextBaseline : 100

Rectangle()
    .fill(.blue.gradient)
    .frame(width: 100, height: 100)
    .alignmentGuide(.leading, computeValue: { viewDimensions in
        let leading = viewDimensions[.leading] // As the explicit value is nil at this time, the value of leading is 0
        return viewDimensions.width / 3 // Set the explicit value of leading to one third of the width
    })
    .alignmentGuide(.leading, computeValue: { viewDimensions in
        let leading = viewDimensions[.leading] // As an explicit value has been set above, the value of leading is now 33.33
        let explicitLeading = viewDimensions[explicit: .leading] // Explicit value, which is Optional(33.33) at this time
        return viewDimensions[HorizontalAlignment.center] // Set the explicit value of leading again. The explicit value is Optional(50) at this time, and the value of .leading is 50.
    })

Rectangle()
    .fill(.blue.gradient)
    .frame(width: 100, height: 100)
    .alignmentGuide(.leading, computeValue: { viewDimensions in
        let leading = viewDimensions[.leading] // At this time, the explicit value of leading is nil
        return leading  // At this time, leading is 0, and the explicit value of leading is 0
    })

पिछले पाठ में, हमने जानबूझकर दो संरेखण मार्गदर्शिकाओं से परहेज किया जो भ्रमित करना आसान है: firstTextBaselineऔर lastTextBaseline। ये दो संरेखण मार्गदर्शिकाएँ दृश्य की सामग्री के आधार पर भिन्न होती हैं।

निम्नलिखित कोड को पढ़ते समय, कृपया अपने दिमाग में संबंधित दृश्य के लिए संरेखण मार्गदर्शिका firstTextBaselineकी स्थिति का विश्लेषण करें :lastTextBaseline

Rectangle()
    .fill(.orange.gradient)
    .frame(width: 100, height: 100)

      
                

                    
                    
                
            

Text("Hello world")
    .border(.red)

      
                

                    
                    
                
            

Text("山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？")
    .frame(width:200)

      
                

                    
                    
                
            

भ्रम का मुख्य कारण SwiftUI में firstTextBaselineऔर lastTextBaselineलेआउट कंटेनर (समग्र दृश्य) के लिए अपारदर्शी गणना पद्धति है।

Button("Hello world"){}
    .buttonStyle(.borderedProminent)
    .controlSize(.large)

      
                

                    
                    
                
            
Button(action: {}, label: {
    Capsule(style: .circular).fill(.yellow.gradient).frame(width: 30, height: 15)
})
.buttonStyle(.borderedProminent)
.controlSize(.large)

      
                

                    
                    
                
            
Text("Hello world")
    .frame(width: 100, height: 100, alignment: .topLeading)
    .border(.red)

      
                

                    
                    
                
            
VStack {
    Rectangle().fill(.red.gradient).frame(width: 50, height: 10)
    Text("Hello world")
    Text("WWDC 2022")
    Text("肘子的 Swift 记事本")
    Rectangle().fill(.blue.gradient).frame(width: 50, height: 10)
}
.border(.red)

      
                

                    
                    
                
            
VStack {
    Rectangle().fill(.red.gradient).frame(width: 50, height: 50)
    Rectangle().fill(.blue.gradient).frame(width: 50, height: 50)
}
.border(.red)

      
                

                    
                    
                
            
HStack(alignment: .center) {
    Rectangle().fill(.blue.gradient).frame(width: 20, height: 50)
    Text("Hello world")
        .frame(width: 100, height: 100, alignment: .top)
    Text("山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？")
        .frame(width: 100)
    Text("WWDC 2022")
        .frame(width: 100, height: 100, alignment: .center)
    Rectangle().fill(.blue.gradient).frame(width: 20, height: 50)
}
.border(.red)

      
                

                    
                    
                
            
ZStack {
    Text("Hello world")
        .frame(width: 100, height: 100, alignment: .topTrailing)
        .border(.red)
    Color.blue.opacity(0.2)
    Text("肘子的 Swift 记事本")
        .frame(width: 100, height: 100, alignment: .bottomLeading)
        .border(.red)
}
.frame(width: 130, height: 130)
.border(.red)

      
                

                    
                    
                
            
Grid {
    GridRow(alignment:.lastTextBaseline) {
        Text("Good")
        Text("Hello world")
            .frame(width: 50, height:50, alignment: .top)
            .border(.red)
        Text("Nice")
    }
    GridRow {
        Color.red.opacity(0.3)
        Color.green.opacity(0.2)
        Color.pink.opacity(0.2)
    }
    GridRow(alignment:.top) {
        Text("Start")
        Text("WWDC 2022")
            .frame(width: 70, height:50, alignment: .center)
            .border(.red)
        Rectangle()
            .fill(.blue.gradient)
    }
}
.frame(maxWidth: 300, maxHeight: 300)
.border(.red)

      
                

                    
                    
                
            
HStack {
    Text("First")
    VStack {
        Text("Hello world")
        Text("肘子的 Swift 记事本")
        Text("WWDC")
    }
    .border(.red)
    .padding()
    Text("Second")
    Rectangle().fill(.red.gradient)
        .frame(maxWidth: 10, maxHeight: 100)
}
.border(.green)

      
                

                    
                    
                
            

…

…

…

…

…

…

…

…

…

…

firstTextBaselineके लिए और समग्र विचारों में गणना विधि lastTextBaselineइस प्रकार है:

• के लिए , यदि समग्र दृश्य (कंटेनर) के सबव्यू में firstTextBaselineके लिए एक स्पष्ट गैर-शून्य मान है , तो उच्चतम स्पष्ट मान (शीर्ष के निकटतम) के साथ वापस लौटें। अन्यथा, डिफ़ॉल्ट मान लौटाएं (आमतौर पर नीचे)।firstTextBaselinefirstTextBaseline
• के लिए , यदि समग्र दृश्य (कंटेनर) के सबव्यूज़ में lastTextBaselineके लिए एक स्पष्ट गैर-शून्य मान है , तो निम्नतम स्पष्ट मान (नीचे से निकटतम) के साथ वापस लौटें। अन्यथा, डिफ़ॉल्ट मान लौटाएं (आमतौर पर नीचे)।lastTextBaselinelastTextBaseline

लेआउट प्रोटोकॉल के अनुरूप कस्टम लेआउट के लिए स्पष्ट संरेखण दिशानिर्देश सेट करना

SwiftUI 4.0 में पेश किया गया लेआउट प्रोटोकॉल डेवलपर्स को कस्टम लेआउट कंटेनर बनाने की अनुमति देता है। लेआउट प्रोटोकॉल द्वारा प्रदान की गई विधि का उपयोग करके , हम यह सत्यापित कर सकते हैं कि लेआउट कंटेनर (समग्र दृश्य) के लिए explicitAlignmentएल्गोरिदम सही है या firstTextBaselineनहीं ।lastTextBaseline

explicitAlignmentलेआउट प्रोटोकॉल द्वारा प्रदान की गई विधि में और प्रकारों के अनुरूप दो अलग-अलग पैरामीटर प्रकार VerticalAlignmentहैं HorizontalAlignment। explicitAlignmentडेवलपर्स को लेआउट परिप्रेक्ष्य से संरेखण दिशानिर्देशों के लिए स्पष्ट मान सेट करने की अनुमति देता है। explicitAlignmentसंरेखण दिशानिर्देशों के किसी भी स्पष्ट मूल्य के लिए शून्य रिटर्न का डिफ़ॉल्ट कार्यान्वयन ।

निम्नलिखित कोड स्निपेट इस आलेख के साथ स्रोत कोड से है - ZStackलेआउट प्रोटोकॉल का उपयोग करके बनाई गई एक प्रतिकृति। firstTextBaselineमैं दोनों के लिए और विधि lastTextBaselineमें स्पष्ट संरेखण दिशानिर्देश निर्धारित करके अपनी पिछली धारणाओं को प्रदर्शित करूँगा ।explicitAlignment

// This method is used by SwiftUI to obtain explicit values for specific alignment guidelines
func explicitAlignment(of guide: VerticalAlignment,  // The alignment guideline to query
                       in bounds: CGRect, // The bounds of the custom container, which is calculated by the sizeThatFits method and is consistent with the bounds parameter of placeSubviews
                       proposal: ProposedViewSize,  // The proposed size of the parent view
                       subviews: Subviews,  // A proxy for the subviews within the container
                       cache: inout CacheInfo // Cache data. In this example, we save the viewDimension and virtual bounds information for each subview in the cache data
                      ) -> CGFloat? {
    let offsetY = cache.cropBounds.minY * -1
    let infinity: CGFloat = .infinity

    // Check if there are any views in the subviews with non-nil explicit firstTextBaseline. If so, return the highest position of firstTextBaseline values.
    if guide == .firstTextBaseline,!cache.subviewInfo.isEmpty {
        let firstTextBaseline = cache.subviewInfo.reduce(infinity) { current, info in
            let baseline = info.viewDimension[explicit: .firstTextBaseline] ?? infinity
            // Convert the explicit firstTextBaseline of the subview into an offset value in the bounds
            let transformBaseline = transformPoint(original: baseline + info.bounds.minY, offset: offsetY, targetBoundsMinX: 0)
            // Return the lowest value (the highest position)
            return min(current, transformBaseline)
        }
        return firstTextBaseline != infinity ? firstTextBaseline : nil
    }
    if guide == .lastTextBaseline,!cache.subviewInfo.isEmpty {
        let lastTextBaseline = cache.subviewInfo.reduce(-infinity) { current, info in
            let baseline = info.viewDimension[explicit: .lastTextBaseline] ?? -infinity
            let transformBaseline = transformPoint(original: baseline + info.bounds.minY, offset: offsetY, targetBoundsMinX: 0)
            return max(current, transformBaseline)
        }
        return lastTextBaseline != -infinity ? lastTextBaseline : nil
    }
    return nil
}

यदि आप चाहते हैं कि आपके कस्टम लेआउट कंटेनर में स्विफ्टयूआई प्रीसेट कंटेनर के अनुरूप संरेखण दिशानिर्देश हों, तो आप सीधे लेआउट प्रोटोकॉल के डिफ़ॉल्ट कार्यान्वयन (विधि को लागू किए बिना) का उपयोग कर सकते हैं explicitAlignment।

भले ही लेआउट कंटेनर के माध्यम से संरेखण दिशानिर्देशों के लिए स्पष्ट मान प्रदान करता है , फिर भी डेवलपर्स विधि explicitAlignmentके माध्यम से और समायोजन कर सकते हैं ।alignmentGuide

कौन से दृश्य "संरेखित करें"

पिछले अनुभाग में, हमने संरेखण दिशानिर्देशों को प्रस्तुत करने के लिए काफी जगह खर्च की थी। यह खंड विभिन्न संदर्भों में "संरेखण" के अन्य प्रमुख बिंदुओं का पता लगाएगा और देखेगा कि कौन से दृश्य "संरेखण" के लिए संरेखण दिशानिर्देशों का उपयोग करेंगे।

लेआउट कंटेनर जो कई दृश्यों का समर्थन करते हैं, जैसे VStack, HStack और ZStack

क्या आप SwiftUI के आमतौर पर उपयोग किए जाने वाले लेआउट कंटेनर निर्माण विधियों में संरेखण पैरामीटर का अर्थ समझते हैं? उन्हें कैसे कार्यान्वित किया जाता है?

VStack(alignment:.trailing) { ... }
ZStack(alignment: .center) { ... }
HStack(alignment:.lastTextBaseline) { ... }
GridRow(alignment:.firstTextBaseline) { ... }

इस स्टैक में सबव्यूज को अलाइन करने के लिए गाइड। इस गाइड में हर चाइल्ड व्यू के लिए एक ही वर्टिकल स्क्रीन कोऑर्डिनेट है। — के संरेखण के लिए Apple प्रलेखनVStack

इस व्यू डिक्लेरेशन कोड के लिए, आप निम्न में से कौन सा टेक्स्ट एक्सप्रेशन चुनेंगे:

ZStack(alignment: .bottomLeading) {
    Rectangle()
        .fill(.orange.gradient)
        .frame(width: 100, height: 300)
    Rectangle()
        .fill(.cyan.gradient).opacity(0.7)
        .frame(width: 300, height: 100)
}

1. ढेर Rectangle1और Rectangle2क्रम में और उनके संरेखित करें bottomLeading।

ZStack(alignment: .bottomLeading) {
    Rectangle()
        .fill(.orange.gradient)
        .frame(width: 100, height: 300)
    Rectangle()
        .fill(.cyan.gradient).opacity(0.7)
        .frame(width: 300, height: 100)
}
.alignmentGuide(.leading){
    $0[.leading] + 10
}

यह समझने के लिए कि “विवरण 2” सही क्यों है, हमें SwiftUI के लेआउट सिद्धांतों और कैसे ZStackकाम करता है, इसे समझने की आवश्यकता है।

जब एक लेआउट कंटेनर रखा जाता है, तो यह प्रत्येक सबव्यू के लिए एक प्रस्ताव आकार प्रदान करता है, और कंटेनर द्वारा प्रदान किए गए प्रस्ताव आकार के आधार पर सबव्यू अपना आवश्यक आकार लौटाएगा (सबव्यू कंटेनर के प्रस्ताव आकार को पूरी तरह से अनदेखा कर सकता है और कोई आवश्यक आकार प्रदान कर सकता है) ).

कंटेनर पूर्व निर्धारित व्यवहारों के अनुसार वर्चुअल कैनवास में सभी साक्षात्कारों को व्यवस्थित करता है (जैसे निर्दिष्ट अक्ष में व्यवस्थित करना, बिंदुओं और रेखाओं को संरेखित करना, अंतराल जोड़ना आदि)। व्यवस्था पूरी होने के बाद, कंटेनर सभी साक्षात्कारों की स्थिति को सारांशित करता है और इसके आवश्यक आकार को इसके मूल दृश्य (मूल कंटेनर) में लौटाता है।

इसलिए, लेआउट कंटेनर में सबव्यूज़ की संरेखण और व्यवस्था प्रक्रिया के दौरान, लेआउट कंटेनर का आकार निर्धारित नहीं किया गया है, इसलिए कंटेनर के साथ सबव्यूज़ के संरेखण दिशानिर्देशों को "संरेखित" करना असंभव है।

लेआउट प्रोटोकॉल का अनुपालन करने वाला एक लेआउट कंटेनर बनाकर, उपरोक्त प्रक्रिया प्रदर्शित की जा सकती है। निम्नलिखित कोड इस आलेख से जुड़े प्रदर्शन कोड से आता है, एक की प्रतिकृति ZStack:

// The container's parent view (parent container) calls the container's sizeThatFits method to get the container's required size. This method is usually called multiple times, providing different suggested sizes.
func sizeThatFits(
    proposal: ProposedViewSize, // The suggested size provided by the container's parent view (parent container).
    subviews: Subviews, // The delegate for all subviews currently in the container.
    cache: inout CacheInfo // Cache data, used in this example to save the required size returned by the subview and reduce the number of calls.
) -> CGSize {
    cache = .init() // Clear cache.
    for subview in subviews {
        // Provide a suggested size for the subview and get its required size (ViewDimensions).
        let viewDimension = subview.dimensions(in: proposal)
        // Get the point corresponding to the subview's alignmentGuide based on the MyZStack alignment setting.
        let alignmentGuide: CGPoint = .init(
            x: viewDimension[alignment.horizontal],
            y: viewDimension[alignment.vertical]
        )
        // Create bounds for the subview in the virtual canvas with the alignmentGuide corresponding to the point (0,0).
        let bounds: CGRect = .init(
            origin: .init(x: -alignmentGuide.x, y: -alignmentGuide.y),
            size: .init(width: viewDimension.width, height: viewDimension.height)
        )
        // Save the information about the subview in the virtual canvas.
        cache.subviewInfo.append(.init(viewDimension: viewDimension, bounds: bounds))
    }

// Generate the MyZStack bounds based on the data of all subviews in the virtual canvas.
    cache.cropBounds = cache.subviewInfo.map(\\\\.bounds).cropBounds()
    // Return the required size of the current container, which will be used by its parent view to lay it out.
    return cache.cropBounds.size
}
// The container's parent view (parent container) will call this method when needed to set the rendering size for the container's subviews.
func placeSubviews(
    in bounds: CGRect, // The bounds created at the actual rendering position based on the size provided by the current container in sizeThatFits.
    proposal: ProposedViewSize, // The suggested size provided by the container's parent view (parent container).
    subviews: Subviews, // The delegate for all subviews currently in the container.
    cache: inout CacheInfo // Cache data, used in this example to save the required size returned by the subview and reduce the number of calls.
) {
    // The offset value (to 0,0) of the top-left corner of the virtual canvas.
    let offsetX = cache.cropBounds.minX * -1
    let offsetY = cache.cropBounds.minY * -1
    for index in subviews.indices {
        let info = cache.subviewInfo[index]
        // Convert the position information in the virtual canvas to the position information in the rendering bounds.
        let x = transformPoint(original: info.bounds.minX, offset: offsetX, targetBoundsMinX: bounds.minX)
        let y = transformPoint(original: info.bounds.minY, offset: offsetY, targetBoundsMinX: bounds.minY)
        // Set the transformed position information to the subview.
        subviews[index].place(at: .init(x: x, y: y), anchor: .topLeading, proposal: proposal)
    }
}

VStack और HStack सबव्यू के लिए कई आकार के प्रस्ताव (आदर्श आकार, न्यूनतम आकार, अधिकतम आकार, विशिष्ट आकार, आदि सहित) बनाएंगे, और सबव्यू के आवश्यक आकार की गणना करने के लिए सबव्यू की लेआउट प्राथमिकता ( ) को संयोजित करेंगे और अंततः अपना आकार निर्धारित करेंगे layoutPriority।

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

ओवरले पृष्ठभूमि

VStackSwiftUI में, जाने-पहचाने , HStack, ZStack, Grid, और , के अलावा , , , , , और इसी तरह के Listलेआउट के माध्यम से कई संशोधक कार्यक्षमताओं को भी लागू किया जाता है ।overlaybackgroundframepadding

overlayआप और backgroundके एक विशेष संस्करण के रूप में सोच सकते हैं ZStack।

// Main view
Rectangle()
    .fill(.orange.gradient)
    .frame(width: 100, height: 100)
    // Additional view
    .overlay(alignment:.topTrailing){
        Text("Hi")
    }

_OverlayLayout {
    // Main view
    Rectangle()
        .fill(.orange.gradient)
        .frame(width: 100, height: 100)

    // Additional view
    Text("Hi")
        .layoutValue(key: Alignment.self, value: .topTrailing) // A way for the child view to pass information to the nearest container
}

// Main view
Rectangle()
    .fill(.orange.gradient)
    .frame(width: 100, height: 100)
    .alignmentGuide(.trailing, computeValue: {
        $0[.trailing] - 30
    })
    .alignmentGuide(.top, computeValue: {
        $0[.top] + 30
    })
    // Additional view
    .overlay(alignment:.topTrailing){
        Text("Hi")
    }

frameस्विफ्टयूआई में अनिवार्य रूप से एक लेआउट कंटेनर है जो इसकी सामग्री के आकार को समायोजित करता है। यह सबव्यूज़ को दिए गए सुझाए गए आकार को संशोधित कर सकता है और सबव्यूज़ द्वारा कंटेनर में लौटाए गए आवश्यक आकार को भी बदल सकता है। उदाहरण के लिए:

VStack {
    Text("Hello world")
       .frame(width: 10, height: 30, alignment: .top)
}

हालाँकि FrameLayoutइसमें केवल एक चाइल्ड व्यू होता है, लेकिन यह लेआउट के दौरान एक विशिष्ट आकार के वर्चुअल व्यू के साथ चाइल्ड व्यू को अलाइन करेगा। शायद उपरोक्त फ्रेम कोड को पृष्ठभूमि लेआउट मोड में परिवर्तित करना समझने में अधिक सुविधाजनक होगा। यहाँ ऐसा दिखता है:

_BackgroundLayout {
    Color.clear
        .frame(width: 10, height: 30)

    Text("Hello world")
        .layoutValue(key: Alignment.self, value: .top)
}

सारांश

यद्यपि यह आलेख विशिष्ट संरेखण तकनीक प्रदान नहीं करता है, जब तक आप संरेखण के दो प्रमुख बिंदुओं को समझते हैं और मास्टर करते हैं - संरेखण मार्गदर्शन के रूप में क्या उपयोग करें और "संरेखित" करने के लिए कौन सा दृश्य - मेरा मानना ​​है कि यह संरेखण समस्याओं को कम करेगा जो आपको विकास में आती हैं और ऐसे कई प्रभाव प्राप्त करें जिन्हें संरेखण के माध्यम से पहले हासिल करना आसान नहीं था।

मुझे उम्मीद है कि यह लेख आपके लिए मददगार हो सकता है।

यहाँ इस लेख के लिए कोड है ।

Want to Connect?

@fatbobman on Twitter.