स्पंदन में पाठ को कैसे रेखांकित करें

Question

Textविजेट के अंदर स्पंदन में पाठ को कैसे रेखांकित करें ?

मैं अंदर की fontStyleसंपत्ति को खोजने के लिए प्रतीत नहीं कर सकतेTextStyle

Answer 1

सब कुछ रेखांकित करते समय आप टेक्स्ट विजेट पर एक टेक्स्ट सेट सेट कर सकते हैं।

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

यदि आप केवल पाठ के भाग को रेखांकित करना चाहते हैं, तो आपको Text.rich()(या एक रिचटेक्स्ट विजेट) का उपयोग करने की आवश्यकता है और स्ट्रिंग को टेक्स्टस्पैन में तोड़ दें जिसे आप एक शैली जोड़ सकते हैं।

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)

TextSpan थोड़ा अजीब है। textपैरामीटर डिफ़ॉल्ट शैली है, लेकिन childrenसूची स्टाइल (और संभवतः unstyled) पाठ है कि यह पालन होता है। textयदि आप स्टाइल टेक्स्ट से शुरुआत करना चाहते हैं तो आप एक खाली स्ट्रिंग का उपयोग कर सकते हैं ।

सजावट कैसे दिखती है, इसे बदलने के लिए आप एक TextDecorationStyle भी जोड़ सकते हैं। यहाँ धराशायी है:

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

और TextDecorationStyle.dotted:

और TextDecorationStyle.double:

और TextDecorationStyle.wavy:

Comments

क्या शब्दों के बीच स्थान जोड़ना और रेखा को रेखांकित करना संभव है?

— felangga

@felangga, यह एक अच्छा सवाल है। यह संभवतः आधार रेखा से संबंधित होगा। यह कुछ ऐसा है जिसे मैं और अधिक जानना चाहता हूं, लेकिन मुझे नहीं पता कि यह कैसे करना है। स्रोत कोड का अन्वेषण करें और मुझे बताएं कि क्या आप इसका पता लगाते हैं।

— सुरगाच

टेक्स्ट और अंडरलाइन के बीच जगह जोड़ने के लिए एक खुला मुद्दा है। github.com/flutter/flutter/issues/30541

— जो मुलर

@felangga दो समाधानों के लिए नीचे दिए गए मेरे उत्तर को देखें जो आपको पाठ और रेखांकन के बीच के स्थान को बढ़ाते हैं

— जो मुलर

प्रयास और स्पष्टीकरण के लिए धन्यवाद

— सना अल-अवध

Answer 2

आप इसे एक आवेदन decoration: TextDecoration.underlineकरने TextStyleसे करते हैं Text।

थीम उदाहरण के साथ:

          Text(
            "text",
            style: Theme
                .of(context)
                .accentTextTheme
                .subhead
                .copyWith(decoration: TextDecoration.underline),
          )

मूल उदाहरण:

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )

Answer 3

आप दिए गए पाठ को रेखांकित करने के लिए TextDecoration को शैली में उपयोग कर सकते हैं।

उदाहरण के लिए

Text(
    "Your text here",
    style: TextStyle(
        decoration: TextDecoration.underline),
    )
)

Answer 4

रोमांचक समाधान
यदि आप पाठ और रेखांकन के बीच की दूरी पर नियंत्रण रखना चाहते हैं, तो आप इस हैक का उपयोग कर सकते हैं। संक्षेप में, आप Colors.transparent का उपयोग करके वास्तविक पाठ को छिपाते हैं और फिर एक ऑफसेट छाया प्रदर्शित करते हैं जो पाठ को रेखांकित करता है।

        Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

जैसा कि आप नीचे देखेंगे, अगर आप आउट-ऑफ-द-बॉक्स टेक्स्ट का उपयोग करते हैं, तो यह टेक्स्ट के निचले हिस्से से चिपक जाता है और थोड़ा बदसूरत दिख सकता है,

बोरिंग सॉल्यूशंस

सिर्फ टेक्स्ट विजेट का उपयोग करके आप कस्टम स्टाइल और रंग के साथ अंडरलाइन जोड़ सकते हैं:

Text(
  "Forgot Password?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

इस दृष्टिकोण के साथ मेरे पास एकमात्र मुद्दा यह है कि आपके पास इस बात पर कोई नियंत्रण नहीं है कि टेक्स्ट के निचले भाग में अंडरलाइन कितना करीब है।

यदि आप रिक्ति को बढ़ाना चाहते हैं, तो आपको एक अपरंपरागत दृष्टिकोण का उपयोग करना होगा जो कंटेनर का उपयोग करता है और यह संपत्ति को पैडिंग कर रहा है।

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Space between underline and text
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Underline thickness
        ))
      ),
     child: Text(
        "Forgot Password?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

एक सरल समाधान के लिए इस GitHub मुद्दे पर नज़र रखें ।

Comments

फिर भी छाया का उपयोग कर एक और बदसूरत समाधान। अंतिम उत्तरपट्टी = पाठ शैली (सजावट: TextDecoration.underline, सजावट शैली: TextDecorationStyle.dashed, रंग: Colors.transparent, सजावटColor: Colors.black, छाया: एक छाया (रंग: रंग, रंग: ऑफसेट: ऑफसेट (0, -5)) ];);

— सतीश कुमार

यह बहुत अच्छा है धन्यवाद

— roun paleum

@ जो, बहुत चालाक! मैंने आपके समाधान का कुछ हिस्सा चुराया और इसे अपनी समस्या के लिए यहाँ लागू किया (आपको श्रेय देने की कोशिश की, लेकिन यह आपकी प्रोफ़ाइल से लिंक नहीं हुआ): stackoverflow.com/q/65293992/1459653 धन्यवाद!

— मार्क गावगन

Answer 5

उदाहरण के लिए

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),