फ़्लटर में किन परिस्थितियों में TextAlign प्रॉपर्टी काम करती है?

Question 1

नीचे दिए गए कोड में, textAlignसंपत्ति काम नहीं करती है। यदि आप DefaultTextStyleरैपर को हटाते हैं, जो ऊपर कई स्तरों पर है,textAlign काम करना शुरू कर देता है।

यह सुनिश्चित करने के लिए क्यों और कैसे यह हमेशा काम कर रहा है?

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new DefaultTextStyle(style: new TextStyle(fontSize: 10.0), child: new Column(children: <Widget>[
        new Text("Should be left", textAlign: TextAlign.left,),
        new Text("Should be right", textAlign: TextAlign.right,)
      ],))
    );
  }
}

रेमी द्वारा सुझाए गए दोनों दृष्टिकोण, "जंगली में" काम नहीं करते हैं। यहाँ एक उदाहरण है जिसे मैंने पंक्तियों और स्तंभों के अंदर निहित किया है। पहला दृष्टिकोण संरेखित नहीं करता है और दूसरा दृष्टिकोण अनुप्रयोग को केवल दुर्घटना बनाता है:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Directionality(textDirection: TextDirection.ltr, child: new DefaultTextStyle(
            style: new TextStyle(fontSize: 10.0, color: Colors.white),
            child: new Column(children: <Widget>[
              new Row(children: <Widget>[
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new Align(alignment: Alignment.centerLeft, child: new Text("left")),
                  new Align(alignment: Alignment.centerRight, child: new Text("right")),
                ],)),
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new Align(alignment: Alignment.centerLeft, child: new Text("left")),
                  new Align(alignment: Alignment.centerRight, child: new Text("right")),
                ],)),
              ],),
              /*new Row(children: <Widget>[
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left,)),
                  new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
                ],)),
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left)),
                  new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
                ],)),
              ],)*/]
    )));
  }
}

मुझे कोड से जो मिलता है

Alignतत्व के संरेखण को अनदेखा करते हुए, पाठ को केंद्रित किया जाता है ।

Question 2

DefaultTextStyleसमस्या से असंबंधित है। इसे हटाने से बस डिफ़ॉल्ट शैली का उपयोग होता है, जो आपके द्वारा उपयोग किए गए से बहुत बड़ा है, इसलिए यह समस्या को छुपाता है।

textAlign द्वारा कब्जे में अंतरिक्ष में पाठ संरेखित करता है Text जब उस कब्जे वाली जगह वास्तविक सामग्री से बड़ी होती है।

बात यह है कि Column, आपके अंदर , Textनंगे न्यूनतम स्थान लेता है। यह तो वह है Columnजो अपने बच्चों को संरेखित करता है crossAxisAlignmentजिसके उपयोग से चूक होती है center।

इस तरह के व्यवहार को पकड़ने का एक आसान तरीका इस तरह से अपने ग्रंथों को लपेटना है:

Container(
   color: Colors.red,
   child: Text(...)
)

आपके द्वारा प्रदान किए गए कोड का उपयोग करते हुए, निम्नलिखित को प्रस्तुत करें:

समस्या अचानक स्पष्ट हो जाती है: Textपूरी Columnचौड़ाई न लें ।

अब आपके पास कुछ उपाय हैं।

आप अपने नकल करने वाले व्यवहार Textमें लपेट सकते हैंAligntextAlign

Column(
  children: <Widget>[
    Align(
      alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
        ),
      ),
    ),
  ],
)

जो निम्नलिखित को प्रस्तुत करेगा:

या आप चौड़ाई Textभरने के लिए मजबूर कर सकते हैं Column।

या तो crossAxisAlignment: CrossAxisAlignment.stretchपर निर्दिष्ट करके Column, या SizedBoxएक अनंत के साथ उपयोग करके width।

Column(
  children: <Widget>[
    SizedBox(
      width: double.infinity,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
          textAlign: TextAlign.left,
        ),
      ),
    ),
  ],
),

जो निम्नलिखित का प्रतिपादन करता है:

उस उदाहरण में, यह है TextAlignकि पाठ को बाईं ओर रखा गया है।

Question 3

crossAxisAlignment: CrossAxisAlignment.startअपने कॉलम में निर्दिष्ट करें

Question 4

textAlignप्रॉपर्टी तभी काम करती है, जब Textसामग्री के लिए अधिक जगह बची हो । नीचे 2 उदाहरण दिए गए हैं जो दिखाता है कि TextAlign का प्रभाव कब पड़ता है और कब नहीं।

कोई प्रभाव नहीं

उदाहरण के लिए, इस उदाहरण में, इसका कोई प्रभाव नहीं पड़ेगा क्योंकि सामग्री की अतिरिक्त जगह नहीं है Text।

Text(
  "Hello",
  textAlign: TextAlign.end, // no impact
),

प्रभाव पड़ता है

यदि आप इसे एक में लपेटते हैं Containerऔर अतिरिक्त प्रदान करते widthहैं, तो इसमें अधिक जगह है।

Container(
  width: 200,
  color: Colors.orange,
  child: Text(
    "Hello",
    textAlign: TextAlign.end, // has impact
  ),
)

Question 5

Colum विजेट में पाठ संरेखण स्वचालित रूप से केंद्रित होगा, इसलिए crossAxisAlignment: CrossAxisAlignment.startप्रारंभ संरेखित करने के लिए उपयोग करें।

Column( 
    crossAxisAlignment: CrossAxisAlignment.start, 
    children: <Widget>[ 
    Text(""),
    Text(""),
    ]);

Question 6

alignment: Alignment.centerRightकंटेनर में सेट करें :

Container(
    alignment: Alignment.centerRight,
    child:Text(
       "Hello",
    ),
)

Question 7

अधिकतम लचीलेपन के लिए, मैं आमतौर पर इस तरह SizedBox के साथ काम करना पसंद करता हूं:

Row(
                                children: <Widget>[
                                  SizedBox(
                                      width: 235,
                                      child: Text('Hey, ')),
                                  SizedBox(
                                      width: 110,
                                      child: Text('how are'),
                                  SizedBox(
                                      width: 10,
                                      child: Text('you?'))
                                ],
                              )

मैंने अतीत में संरेखण का उपयोग करते समय पाठ संरेखण के साथ समस्याओं का अनुभव किया है, जबकि आकार बॉक्स हमेशा काम करता है।

Question 8

आप कंटेनर का उपयोग कर सकते हैं, यह आपको संरेखण सेट करने में मदद करेगा।

Widget _buildListWidget({Map reminder}) {
return Container(
  color: Colors.amber,
  alignment: Alignment.centerLeft,
  padding: EdgeInsets.all(20),
  height: 80,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Container(
        alignment: Alignment.centerLeft,
        child: Text(
          reminder['title'],
          textAlign: TextAlign.left,
          style: TextStyle(
            fontSize: 16,
            color: Colors.black,
            backgroundColor: Colors.blue,
            fontWeight: FontWeight.normal,
          ),
        ),
      ),
      Container(
        alignment: Alignment.centerRight,
        child: Text(
          reminder['Date'],
          textAlign: TextAlign.right,
          style: TextStyle(
            fontSize: 12,
            color: Colors.grey,
            backgroundColor: Colors.blue,
            fontWeight: FontWeight.normal,
          ),
        ),
      ),
    ],
  ),
);
}

Question 9

GestureDetector(
          onTap: () {},
          child: Container(
            padding: EdgeInsets.all(5),
            color: buttonContainerColor,
            margin: EdgeInsets.only(top: 10.0),
            width: double.infinity,
            height: bottomContainerHeight,
            alignment: Alignment.center,
            child: Text(
              "CALCULATE",
              style: TextStyle(fontSize: 25.0, color: Colors.white),
            ),
          ),
        )