Как сделать так, чтобы высота флаттера TextField соответствовала родительскому элементу контейнера?

Я хочу, чтобы моя TextField высота была такой же, как высота моего контейнера. Пожалуйста, проверьте мой код ниже и дайте мне знать, как я могу сделать TextField match_parent моего контейнера. Я проверил этот вопрос Эквивалент wrap_content и match_parent в трепете? но я не нашел никакого решения. Мне нужно сделать так, чтобы TextField занимал полную высоту и ширину моего контейнера.

 new Container(
            height: 200.0,
            decoration: new BoxDecoration(
                border: new Border.all(color: Colors.black)
            ),

            child: new SizedBox.expand(
              child: new TextField(
                maxLines: 2,
                style: new TextStyle(
                    fontSize: 16.0,
                   // height: 2.0,
                    color: Colors.black
                ),
                  decoration: const InputDecoration(
                    hintText: "There is no data",
                    contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
                  )
              ),
            ),
          )

Пожалуйста, проверьте скриншот ниже. Как уже было сказано, мне нужно, чтобы мой TextField занял полную высоту Container.

введите описание изображения здесь


flutter dart flutter-layout
person Ammy Kang    schedule 07.08.2018    source источник
comment
Возможный дубликат Эквивалент wrap_content и match_parent во флаттере?   -  person Ahmet Zorer    schedule 07.08.2018

Ответы (4)


arrow_upward
11
arrow_downward

Вот мое решение:

Container(
            height: 200,
            color: Color(0xffeeeeee),
            padding: EdgeInsets.all(10.0),
            child: new ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: 200.0,
              ),
              child: new Scrollbar(
                child: new SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  reverse: true,
                  child: SizedBox(
                    height: 190.0,
                    child: new TextField(
                      maxLines: 100,
                      decoration: new InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Add your text here',
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

У меня это работает очень хорошо. А вот скриншот.

введите описание изображения здесь

person Jack Sun    schedule 13.03.2019

arrow_upward
2
arrow_downward

Уберем несколько строк кода и разберемся, как работает флаттер.

  1. Почему мы задаем высоту 200 для контейнера. Не может Container отрегулировать высоту на основе своего дочернего элемента (в данном случае SizedBox.expand)
  2. Если мы удалим высоту 200, тогда Container занял весь экран из-за SizedBox.expand
  3. Действительно ли нам нужен SizedBox для нашего случая использования. Давайте удалим это и посмотрим, что произойдет.
  4. Теперь наш Container оборачивает TextField. Но есть немного места сверху и снизу.
  5. Кто решил это пространство? ContentPadding оформления TextField. Давайте удалим и это. Это выглядит так, как показано ниже, где textField обернут контейнером. Надеюсь, это то, что ты хочешь. Если нет, прокомментируйте, мы можем немного подправить и получить то, что вы хотите. Приветствую, введите здесь описание изображения

Окончательная версия кода, отображающая изображение выше

 new Container(
   //   height: 200.0,
      decoration: new BoxDecoration(
          border: new Border.all(color: Colors.black)
      ),

      child: new TextField(
          maxLines: 2,
          style: new TextStyle(
              fontSize: 16.0,
              // height: 2.0,
              color: Colors.black
          ),
          decoration: const InputDecoration(
            hintText: "There is no data",
//                contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
          )
      ),
    )
person Dinesh Balasubramanian    schedule 08.08.2018
comment
Спасибо, @Dinesh, на самом деле мне нужна фиксированная высота моего Container и чтобы мой TextFiled занимал эту высоту. - person Ammy Kang; 08.08.2018
comment
Привет, Амми, Как вы даете высоту текстовому полю? - person Dinesh Balasubramanian; 08.08.2018
comment
в настоящее время я использую атрибут maxline, чтобы задать высоту TextField, но это не очень хорошая практика. - person Ammy Kang; 09.08.2018
comment
Понятно .. 1) Он сильно связан с fontSize. 2) Я не уверен, повлияет ли это, если вы смените устройство (например, планшет, iPad). На данный момент это решает проблему. Обратите внимание на две вышеупомянутые проблемы. - person Dinesh Balasubramanian; 09.08.2018
comment
Да, я знаю, что могут возникнуть проблемы, на данный момент это временное решение. Не могли бы вы мне помочь? Мне нужно постоянно фиксировать высоту контейнера. - person Ammy Kang; 09.08.2018
comment
Я постараюсь помочь. Можете ли вы поделиться требованиями / макетами пользовательского интерфейса? - person Dinesh Balasubramanian; 09.08.2018
comment
Давайте продолжим это обсуждение в чате. - person Ammy Kang; 09.08.2018
comment
Вы двое нашли решение? Я не могу настроить TextField автоматически таким образом, чтобы его высота соответствовала гибкому контейнеру высоты. - person Luke Pighetti; 17.09.2018

arrow_upward
2
arrow_downward

В настоящее время единственный способ добиться TextField для заполнения доступного вертикального пространства:

TextField(maxLines: 1000000) //maxlines: any large int

Хотя есть соблазн использовать TextField(maxLines: null), он просто установит TextField на расширение с его содержимым, пока не достигнет своего предела контейнера.

Думаю, нужен параметр bool stretchVertically. TextField(stretchVertically: true) будет означать, что TextField попытается заполнить как можно больше вертикального пространства. stretchVertically и maxLines должны быть взаимоисключающими.

person Alex.F    schedule 13.01.2021

arrow_upward
0
arrow_downward

Отвечаем на это в 2021 году. Сейчас доступно expands свойство. Этот код работает:

Column(
  children: [
    Expanded(
        child: TextField(
          maxLines: null, 
          minLines: null, 
          expands: true,
        ), 
        flex: 1),
  ],
)
person SayantanRC    schedule 01.06.2021