Я получаю исключение рендеринга, которое я не понимаю, как исправить. Я пытаюсь создать столбец, который имеет 3 строки.

Ряд [Изображение]

Строка [TextField]

Строка [Кнопки]

Вот мой код для сборки контейнера:

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

Я больше не получаю исключения. Чего мне не хватает в реализации Row, из-за которой невозможно рассчитать размер этой строки?

148
Matthew Smith 31 Авг 2017 в 19:22

7 ответов

Лучший ответ

(Я предполагаю, что вы используете 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,
            ),
          ),
        ],
      ),
325
Collin Jackson 31 Авг 2017 в 21:40

Как сказал @Asif Shiraz, у меня возникла та же проблема, и я решил ее с помощью Wrapping Column in a Flexible, вот так вот,

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,
          ),
        ));
  }
}
5
Shahzad Akram 1 Дек 2018 в 02:40

Решение состоит в том, чтобы обернуть ваш Text() в один из следующих виджетов: Expanded или Flexible. Итак, ваш код с использованием Expanded будет выглядеть так:

Expanded(
           child: TextField(
             decoration: InputDecoration(
               hintText: "Demo Text",
               hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
              ),
           ),
        ),
6
AAEM 27 Июн 2019 в 11:11

Вы должны использовать Flexible, чтобы использовать Textfield внутри строки.

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


              ],//widget
            ),//row
11
Mr. Roshan 23 Июн 2018 в 12:55

У меня такая же проблема.

Если хотите, вы можете использовать виджет Таблица , чтобы избежать подобных проблем с TextField .

0
Jorge Wander Santana Ureña 17 Авг 2020 в 13:24

Вы получаете эту ошибку, потому что 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(),
      ],
    )       
    
32
CopsOnRoad 7 Июл 2019 в 14:59

Простое решение - обернуть ваш Text() внутри Container(). Итак, ваш код будет выглядеть так:

Container(
      child: TextField()
)

Здесь вы также получите атрибуты width и height контейнера, чтобы настроить внешний вид вашего текстового поля. Нет необходимости использовать Flexible, если вы оборачиваете свое текстовое поле внутри Контейнера.

0
vs_lala 8 Ноя 2018 в 02:55