पंक्ति के अंदर TextField लेआउट अपवाद का कारण बनता है: आकार की गणना करने में असमर्थ

Question

मुझे एक रेंडरिंग अपवाद मिल रहा है जो मुझे समझ नहीं आ रहा है कि कैसे ठीक किया जाए। मैं एक स्तंभ बनाने का प्रयास कर रहा हूं जिसमें 3 पंक्तियाँ हैं।

रो [छवि]

पंक्ति [पाठ पाठ]

रो [बटन]

यहाँ कंटेनर बनाने के लिए मेरा कोड है:

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

और मेरे buildAppEntryRow पाठ कंटेनर के लिए कोड

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

जब मैं चलता हूं तो मुझे निम्नलिखित अपवाद मिलते हैं:

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

अगर मैं buildAppEntryRow को इस तरह बदले सिर्फ एक TextField में बदल दूं

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

मुझे अब कोई अपवाद नहीं मिला। मैं पंक्ति कार्यान्वयन के साथ क्या याद कर रहा हूं, जिसके कारण यह उस पंक्ति के आकार की गणना करने में सक्षम नहीं है?

Answer 1

(मुझे लगता है कि आप उपयोग कर रहे हैं Rowक्योंकि आप TextFieldभविष्य में अन्य विजेट्स रखना चाहते हैं।)

Rowविजेट अपने गैर लचीला बच्चों के आंतरिक आकार निर्धारित करने तो यह जानता है कितनी जगह है कि यह लचीला लोगों के लिए छोड़ दिया है चाहता है। हालाँकि, TextFieldएक आंतरिक चौड़ाई नहीं है; यह केवल यह जानता है कि अपने मूल कंटेनर की पूरी चौड़ाई को कैसे आकार दें। इसे एक में लपेटने का प्रयास करें Flexibleया Expandedयह बताने के लिए Rowकि आप TextFieldशेष स्थान को लेने की अपेक्षा कर रहे हैं :

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),

Comments

कहीं यह स्पंदन डॉक्टर पर तो नहीं होना चाहिए?

— stt106

@ stt106 यह है -> flutter.io/docs/development/ui/layout/box-constraints लेकिन मैं सहमत हूं, यह खोजना आसान नहीं है। न ही वे समाधान को स्पष्ट करते हैं जैसा कि कोलिन जैक्सन ने ऊपर किया था।

— रैप

mainAxisAlignmentरो विजेट के लिए इस विधि का उपयोग करना टूट जाता है । दो टेक्स्ट विजेट्स के साथ कोई समस्या नहीं है, लेकिन टेक्स्ट विजेट और इसमें मौजूद टेक्स्टफील्ड विजेट Flexibleबिना किसी रिक्ति के साथ बाईं ओर संरेखित हो जाता है।

— हसन

क्या मैं आपसे यहाँ फ़्लटर से संबंधित प्रश्न पर एक नज़र डालने के लिए कह सकता हूँ: stackoverflow.com/questions/60565658/… ?

— इस्तियाक अहमद

Answer 2

आपको यह त्रुटि मिलती है क्योंकि TextFieldक्षैतिज दिशा में फैलता है और ऐसा ही होता है Row, इसलिए हमें इसकी चौड़ाई को बढ़ाने की आवश्यकता है TextField, इसे करने के कई तरीके हैं।

1. उपयोग Expanded

    Row(
     children: <Widget>[
       Expanded(child: TextField()),
       OtherWidget(),
     ],
   )

2. उपयोग Flexible

   Row(
     children: <Widget>[
       Flexible(child: TextField()),
       OtherWidget(),
     ],
   )

3. में लपेट Containerया SizedBoxऔर प्रदान करते हैंwidth

   Row(
     children: <Widget>[
       SizedBox(width: 100, child: TextField()),
       OtherWidget(),
     ],
   )       

Comments

यह सिफारिश इतनी उपयोगी है। जब आपके पास TextFieldएक पंक्ति में कई हैं ।

— बेन

Answer 3

आपको एक पंक्ति के अंदर एक टेक्स्टफील्ड का उपयोग करने के लिए लचीले का उपयोग करना चाहिए।

new Row(
              children: <Widget>[
                new Text("hi there"),
                new Container(
                  child:new Flexible(
                        child: new TextField( ),
                            ),//flexible
                ),//container


              ],//widget
            ),//row

Comments

मुझे लगता है कि आपको इसकी आवश्यकता नहीं है Container, आप Flexibleसीधे उपयोग कर सकते हैं ।

— फेलिप अगस्टो

Answer 4

समाधान अपने रैप करने के लिए है Text()या तो: निम्नांकित विजेट के अंदर एक Expandedया Flexible। इसलिए, विस्तारित का उपयोग करने वाला आपका कोड इस प्रकार होगा:

Expanded(
           child: TextField(
             decoration: InputDecoration(
               hintText: "Demo Text",
               hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
              ),
           ),
        ),

Answer 5

जैसा कि @ आसिफ़ शिराज ने उल्लेख किया था कि मेरे पास एक ही मुद्दा था और इसे एक लचीले में लपेटकर कॉलम द्वारा हल किया गया था, इस तरह से ,,

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 Scaffold(
          body: Row(
            children: <Widget>[
              Flexible(
                  child: Column(
                children: <Widget>[
                  Container(
                    child: TextField(),
                  )
                  //container
                ],
              ))
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
        ));
  }
}

Answer 6

एक सरल उपाय यह है कि आप अपने Text()अंदर लपेटें Container()। तो, आपका कोड इस प्रकार होगा:

Container(
      child: TextField()
)

यहां आपको अपने टेक्स्ट फ़ील्ड के रंगरूप को समायोजित करने के लिए एक कंटेनर की चौड़ाई और ऊंचाई की विशेषता भी मिलती है। Flexibleयदि आप अपने पाठ क्षेत्र को एक कंटेनर के अंदर लपेट रहे हैं तो उपयोग करने की आवश्यकता नहीं है ।

Comments

जोड़ने के बिना सवाल हल नहीं करता हैwidth: n

— user3249027