TextField bên trong Row gây ra ngoại lệ bố cục: Không thể tính kích thước

Tôi đang nhận được một ngoại lệ kết xuất mà tôi không hiểu cách khắc phục. Tôi đang cố gắng tạo một cột có 3 hàng.

Hàng [Hình ảnh]

Hàng [TextField]

Hàng [Nút]

Đây là mã của tôi để xây dựng container:

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

và mã buildAppEntryRow của tôi cho vùng chứa văn bản

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

Khi tôi chạy, tôi nhận được ngoại lệ sau:

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)

Nếu tôi thay đổi buildAppEntryRow thành TextField thay vì như thế này

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

Tôi không còn nhận được ngoại lệ. Tôi còn thiếu điều gì với việc triển khai Hàng khiến nó không thể tính được kích thước của hàng đó?

(Tôi cho rằng bạn đang sử dụng Rowvì bạn muốn đặt các vật dụng khác bên cạnh TextFieldtrong tương lai.)

Các Rowwidget muốn xác định kích thước nội tại của những đứa trẻ không linh hoạt của nó để nó biết nó còn lại bao nhiêu không gian cho những người linh hoạt. Tuy nhiên, TextFieldkhông có chiều rộng nội tại; nó chỉ biết làm thế nào để kích thước chính nó đến toàn bộ chiều rộng của thùng chứa mẹ của nó. Hãy thử gói nó trong một Flexiblehoặc Expandedđể nói Rowrằng bạn đang mong đợi TextFieldchiếm hết không gian còn lại:

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

Bạn gặp lỗi này vì TextFieldmở rộng theo hướng ngang và cũng vậy Row, vì vậy chúng ta cần hạn chế độ rộng của TextField, có nhiều cách để thực hiện.

1. Sử dụng Expanded

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

2. Sử dụng Flexible

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

3. Gói nó trong Containerhoặc SizedBoxvà cung cấpwidth

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

bạn nên sử dụng Linh hoạt để sử dụng Trường văn bản trong một hàng.

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


              ],//widget
            ),//row

Giải pháp là bọc Text()bên trong một trong các vật dụng sau: Hoặc Expandedhoặc Flexible. Vì vậy, mã của bạn sử dụng Mở rộng sẽ như sau:

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

Như @Asif Shiraz đã đề cập, tôi có vấn đề tương tự và đã giải quyết vấn đề này bằng cách Gói Cột trong Linh hoạt, ở đây như thế này ,,

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

Một giải pháp đơn giản là bọc Text()bên trong của bạn a Container(). Vì vậy, mã của bạn sẽ như sau:

Container(
      child: TextField()
)

Tại đây bạn cũng có được thuộc tính chiều rộng và chiều cao của một thùng chứa để điều chỉnh giao diện của trường văn bản của bạn. Không cần sử dụng Flexiblenếu bạn đang bọc trường văn bản của mình bên trong Container.