SwiftUI पाठ-संरेखण

Question

Textदृश्य के कई गुणों के बीच , मुझे पाठ संरेखण से संबंधित कोई भी नहीं मिला। मैंने एक डेमो में देखा है कि यह स्वचालित रूप से RTL को संभालता है, और जब व्यू का उपयोग करके सामान रखता है body, तो यह हमेशा इसे स्वचालित रूप से केंद्र में रखता है ।

क्या कुछ अवधारणा है जो मुझे लेआउट सिस्टम के बारे में याद आ रही है SwiftUIऔर यदि नहीं, तो मैं पाठ संरेखण गुणों को कैसे सेट कर सकता हूं Text?

Answer 1

आप इसे संशोधक के माध्यम से कर सकते हैं .multilineTextAlignment(.center)।

Apple प्रलेखन

Comments

क्या पाठ को सही ठहराने के लिए कुछ मौजूद है?

— TheMouk

Answer 2

SwiftUI बीटा 3 से आगे, आप एक पाठ दृश्य को फ्रेम संशोधक के साथ केन्द्रित कर सकते हैं:

Text("Centered")
    .frame(maxWidth: .infinity, alignment: .center)

Answer 3

इसे स्वयं समझने की कोशिश कर रहा था क्योंकि अन्य उत्तर यहाँ उल्लेख करते हैं Text.multilineTextAlignment(_:)/ VStack(alignment:)/ frame(width:alignment:)लेकिन प्रत्येक समाधान एक विशिष्ट समस्या को हल करता है। आखिरकार यह यूआई की आवश्यकता और इनमें से एक संयोजन पर निर्भर करता है।

---

VStack(alignment:)

alignmentयहां एक-दूसरे से संबंधित में आंतरिक दृश्यों के लिए हैं।
इसलिए निर्दिष्ट करने .leadingसे सभी आंतरिक विचारों को अपने प्रमुख को एक दूसरे के साथ गठबंधन करने में मदद मिलेगी।

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
        .background(Color.gray.opacity(0.2))
  Text("sit amet")
        .background(Color.gray.opacity(0.2))
}
.background(Color.gray.opacity(0.1))

---

.frame

में frame(width:alignment:)या frame(maxWidth:alignment:), alignmentदिया चौड़ाई के भीतर सामग्री के लिए है।

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
      .background(Color.gray.opacity(0.2))
  Text("sit amet")
      .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

इनर व्यूज एक दूसरे से जुड़े हुए हैं, लेकिन व्यूज खुद से जुड़े हुए हैं VStack।

---

.multilineTextAlignment

यह अंदर पाठ के संरेखण को निर्दिष्ट करता है और सबसे अच्छा तब देखा जा सकता है जब कई लाइनें होती हैं अन्यथा बिना परिभाषित किए frame(width:alignment), चौड़ाई स्वचालित रूप से समायोजित हो जाती है और डिफ़ॉल्ट alignmentएस से प्रभावित होती है ।

VStack(alignment: .trailing, spacing: 6) {
  Text("0. automatic frame\n+ view at parent's specified alignment\n+ multilineTA not set by default at leading")
    .background(Color.gray.opacity(0.2))
  Text("1. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .background(Color.gray.opacity(0.2))
  Text("2. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

---

संयोजन के साथ टेस्ट:

VStack(alignment: .trailing, spacing: 6) {
  Text("1. automatic frame, at parent's alignment")
  .background(Color.gray.opacity(0.2))
  Text("2. given full width & leading alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .leading)
  .background(Color.gray.opacity(0.2))
  Text("3. given full width & center alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("4. given full width & center alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("5. given full width & center alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("6. given full width but no alignment\n+ multilineTA at default leading\n+ leading is based on content, looks odd sometimes as seen here")
  .frame(maxWidth: .infinity)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380)
.background(Color.gray.opacity(0.1))

Comments

यह बहुत ही सम्मोहक जवाब है। धन्यवाद। मैं इसे एक स्वीकृत उत्तर बनाने पर भी विचार करूंगा।

— inokey

@inokey अपनी टिप्पणियों को साझा करने के लिए खुश हैं :) मुझे बाद में एक दिलचस्प लेख मिला जो सामान्य रूप से दृश्य संरेखण के साथ गहराई से अधिक हो रहा था: स्विफ्टयूआई में संरेखण मार्गदर्शिकाएँ

— staticVoidMan

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

— inokey

Answer 4

मैं वास्तव में उस समस्या में भाग गया हूँ जहाँ मुझे एक पंक्ति में पाठ संरेखित करना था। मैंने जो काम किया है वह यह है:

Text("some text")
    .frame(alignment: .leading)

यदि आप इसे फ्रेम चौड़ाई पैरामीटर के साथ जोड़ते हैं तो आप लेबल और इस तरह के कुछ अच्छे टेक्स्ट ब्लॉक फॉर्मेटिंग प्राप्त कर सकते हैं।

Answer 5

मुझे लगता है SwiftUIकि हम ऐसी चीजों के लिए ढेर जैसे रैपर का उपयोग करना चाहते हैं।

इसलिए कुछ लिखने की बजाय Text("Hello World").aligned(.leading), निम्नलिखित को प्रोत्साहित किया जाता है:

VStack(alignment: .leading) {
    Text("Hello World")
}

Comments

इसलिए मैं सिर्फ एक लेबल नहीं गिरा सकता जो स्टैक से स्वतंत्र है?

— inokey

@inokey मुझे इसके लिए कम से कम एक संशोधक नहीं मिला।

— फ्रेडपी

मैंने भी नहीं किया। ऐसा लगता है जैसे मुझे SUI से किसी तरह का बेस कांसेप्ट याद आ रहा है। मैं भी दो चीजों के बीच में सिर्फ "दृश्य" की तरह नहीं छोड़ सकता, और इसे एक रंग दे सकता हूं, जैसे कि उनके पास सादे-ला-यूएवीयू ऑब्जेक्ट नहीं है।

— inokey

फ़्रेम संशोधक में एक संरेखण पैरामीटर है

— एमिलियोपेलेज

मूर्खतापूर्ण लगता है (हालांकि यह काम करता है)। आपने कहाँ सुना कि यह प्रोत्साहित किया गया था?

— मोबाइलमोन

Answer 6

हमें पाठ को संरेखित करने की आवश्यकता है, न कि स्टैक इसके अंदर। इसलिए रेखाओं को कॉल करना multilineTextAlignment(.center)और सेट करना मैं उन ग्रंथों को केंद्र में संरेखित करने में सक्षम हो सकता हूं। मुझे नहीं पता कि मुझे लाइन की सीमा क्यों निर्धारित करनी है, मुझे लगा कि यदि आपके पास एक बड़ा पाठ है तो इसका विस्तार होगा।

Text("blahblah")
        .font(.headline)
        .multilineTextAlignment(.center)
        .lineLimit(50)

Answer 7

यदि आप पाठ के लिए निरंतर चौड़ाई रखना चाहते हैं, तो ".multilineTextAlignment (.leading)" तब तक कोई प्रभाव नहीं डालेगा जब तक कि पाठ की केवल एक पंक्ति न हो।

यह वह उपाय है जो मेरे लिए काम करता है:

struct LeftAligned: ViewModifier {
    func body(content: Content) -> some View {
        HStack {
            content
            Spacer()
        }
    }
}


extension View {
    func leftAligned() -> some View {
        return self.modifier(LeftAligned())
    }
}

उपयोग:

Text("Hello").leftAligned().frame(width: 300)

Answer 8

आप वर्टिकल स्टैक व्यू के लिए अलाइनमेंट सेट कर सकते हैं। नीचे की तरह

 VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)
        }

Answer 9

मैं Spacer()टेक्स्ट ब्लॉक संरेखित करने के लिए दृश्य का उपयोग करना चाहूंगा । यह उदाहरण अनुगामी पक्ष पर पाठ दिखाता है:

HStack{
    Spacer()
    Text("Wishlist")
}