TextField di dalam Baris menyebabkan pengecualian tata letak: Tidak dapat menghitung ukuran

147

Saya mendapatkan pengecualian render yang tidak saya mengerti cara memperbaikinya. Saya mencoba membuat kolom yang memiliki 3 baris.

Baris [Gambar]

Baris [TextField]

Baris [tombol]

Ini kode saya untuk membuat wadah:

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;
  }

dan kode buildAppEntryRow saya untuk wadah teks

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

Ketika saya menjalankan saya mendapatkan pengecualian berikut:

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)

Jika saya mengubah buildAppEntryRow menjadi TextField saja seperti ini

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

Saya tidak lagi mendapatkan pengecualian. Apa yang saya lewatkan dengan implementasi Row yang menyebabkannya tidak dapat menghitung ukuran baris itu?

Matthew Smith
sumber

Jawaban:

318

(Saya menganggap Anda menggunakan a Rowkarena Anda ingin meletakkan widget lain di samping TextFielddi masa mendatang.)

The Rowwidget ingin menentukan ukuran intrinsik anak-anak non-fleksibel sehingga tahu berapa banyak ruang yang telah meninggalkan untuk yang fleksibel. Namun, TextFieldtidak memiliki lebar intrinsik; ia hanya tahu bagaimana mengatur ukurannya sendiri dengan lebar penuh dari wadah induknya. Cobalah membungkusnya dalam Flexibleatau Expandeduntuk memberi tahu RowAnda mengharapkan TextFieldruang yang tersisa:

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),
Collin Jackson
sumber
3
Bukankah ini harus di flutter doc di suatu tempat?
stt106
1
@ stt106 - - flutter.io/docs/development/ui/layout/box-constraints Tapi saya setuju, itu tidak mudah ditemukan. Mereka juga tidak membuat solusi sejelas yang dilakukan Collin Jackson di atas.
Rap
Menggunakan metode ini jeda mainAxisAlignmentuntuk widget Baris. Dengan dua widget teks tidak ada masalah tetapi dengan widget teks dan widget Textfield yang terkandung di Flexibledalamnya akan disejajarkan ke kiri tanpa spasi.
Hasen
Bolehkah saya meminta Anda untuk melihat pertanyaan terkait Flutter di sini: stackoverflow.com/questions/60565658/… ?
Istiaque Ahmed
30

Anda mendapatkan kesalahan ini karena TextFieldmengembang dalam arah horizontal dan begitu juga dengan Row, jadi kita perlu membatasi lebar TextField, ada banyak cara untuk melakukannya.

  1. Menggunakan Expanded

     Row(
      children: <Widget>[
        Expanded(child: TextField()),
        OtherWidget(),
      ],
    )
  2. Menggunakan Flexible

    Row(
      children: <Widget>[
        Flexible(child: TextField()),
        OtherWidget(),
      ],
    )
  3. Bungkus Containeratau SizedBoxsediakanwidth

    Row(
      children: <Widget>[
        SizedBox(width: 100, child: TextField()),
        OtherWidget(),
      ],
    )       
CopsOnRoad
sumber
2
Rekomendasi ini sangat berguna. Ketika Anda memiliki beberapa TextFielddalam satu baris.
Ben
11

Anda harus menggunakan Fleksibel untuk menggunakan Textfield di dalam satu baris.

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


              ],//widget
            ),//row
Ajit Paul
sumber
Saya pikir Anda tidak perlu Container, Anda dapat menggunakan Flexiblelangsung.
Felipe Augusto
6

Solusinya adalah membungkus Text()bagian dalam Anda dengan salah satu widget berikut: Baik Expandedatau Flexible. Jadi, kode Anda menggunakan Expanded akan seperti:

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

Seperti yang dikatakan Asif Shiraz, saya memiliki masalah yang sama dan menyelesaikannya dengan Membungkus Kolom secara Fleksibel, di sini seperti ini ,,

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,
          ),
        ));
  }
}
Shahzad Akram
sumber
0

Solusi sederhana adalah dengan membungkus Text()bagian dalam a Container(). Jadi, kode Anda akan seperti:

Container(
      child: TextField()
)

Di sini Anda juga mendapatkan atribut lebar dan tinggi wadah untuk menyesuaikan tampilan dan nuansa bidang teks Anda. Tidak perlu digunakan Flexiblejika Anda membungkus bidang teks Anda di dalam sebuah Kontainer.

vs_lala
sumber
1
tidak menyelesaikan pertanyaan tanpa menambahkanwidth: n
user3249027