Когда отображается клавиатура, все подталкивается вверх, и я получаю сообщение об ошибке

У меня такой код:



    class _MyHomePageState extends State {
      @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        return new Scaffold(
            body: new Column(
          children: [
            new Container(
              color: JBTheme.colorGreenBrand,
              height: 130.0,
              alignment: Alignment.bottomLeft,
              child: new Center(
                child: new Align(
                  alignment: Alignment.bottomCenter,
                  child: new Container(
                    color: JBTheme.colorOrange,
                    constraints: new BoxConstraints(maxWidth: 270.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        new Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            new Image.asset("flags/flag_dk.png"),
                            new Container(
                              margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
                              child: new Text("Danmark"),
                            ),
                            new Text("DKK")
                          ],
                        ),
                        new Expanded(child: new Image.asset("images/arrow.png")),
                        new Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            new Image.asset("flags/flag_us.png"),
                            new Container(
                              margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
                              child: new Text("USA"),
                            ),
                            new Text("USD")
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            new Expanded(
                child: new Container(
              color: JBTheme.colorGreyMedium,
              child: new Column(
                children: [
                  new Expanded(child: new Container()),
                  new Padding(
                      padding: const EdgeInsets.only(bottom: 8.0),
                    child: new Card(
                      elevation: -8.0,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.0),
                      ),
                      child: new Container(
                          width: 200.0,
                          height: 30.0,
                          color: JBTheme.colorWhite,
                          child: new Stack(
                            children: [
                              new TextField(
                                  textAlign: TextAlign.center
                              )
                            ],
                          )
                      ),
                    )
                  )
                ],
              ),
            )),
            new Container(
              height: 260.0,
              color: JBTheme.colorGreenMint,
            )
          ],
        ));
      }
    }

И это выглядит так:  без клавиатуры

Но когда я нажимаю TextField и клавиатура открывается, я получаю следующее:  введите описание изображения здесь

Я не ожидал, что весь мой макет будет перемещен вверх на всю высоту клавиатуры, я хотел бы, чтобы он сдвинулся только настолько, чтобы сфокусированное текстовое поле было видно (и не выдавало ошибки). Как я могу это исправить и почему это происходит?

Спасибо, Сорен


person Neigaard    schedule 22.08.2018    source источник


Ответы (4)


Есть два решения этой проблемы.

  1. Добавьте resizeToAvoidBottomPadding: false в свои леса

    Scaffold(
     resizeToAvoidBottomPadding: false,
    body: ...)
    
  2. Поместите свой Scaffold body в scrollableView (например, SingleChildScrollView или ListView)

    new Scaffold(
        body: SingleChildScrollView(child: //your existing body
    ...)
    

Вы можете найти аналогичную проблему и ответить здесь

person Dinesh Balasubramanian    schedule 23.08.2018

Это способ Flutters показать нам, сколько пикселей контента будет скрыто от глаз пользователей при использовании клавиатуры. Попробуйте установить для resizeToAvoidBottomPadding значение false ... Из документов:

Следует ли изменять размер тела (и других плавающих виджетов), чтобы избежать заполнения нижнего края окна.

 Scaffold(
    resizeToAvoidBottomPadding: false,

Это позволит избежать изменения размера и, по крайней мере, избежать отображения предупреждения разработчика. Но помните, что пользователь не увидит какой-то контент, а также это предупреждение разработчика.

Обновление от 17.10.2019

resizeToAvoidBottomPadding теперь устарел.

Используйте resizeToAvoidBottomInset, чтобы указать, следует ли изменять размер тела при отображении клавиатуры.

Scaffold(
    resizeToAvoidBottomInset: false,
person Lucas    schedule 22.08.2018

Полное описание этой ошибки и два возможных решения можно найти в статье Medium, доступной на https://medium.com/zipper-studios/the-keyboard-causes-the-bottom-overflowed-error-5da150a1c660. Последний вариант отлично мне подходит.

person Loredana    schedule 01.08.2019
comment
Пожалуйста, не размещайте ссылку в качестве ответа. Если ссылка может быть разорвана, кто-то, ищущий такой же ответ, не получит никакой помощи. Обновите свой ответ, чтобы охватить ключевые особенности решения, и предоставьте ссылку только для справки. - person Erbsenkoenig; 01.08.2019
comment
Я бы поддержал этот ответ, если бы сюда был добавлен хотя бы небольшой фрагмент кода! - person Randika Vishman; 02.09.2019

Если вы просто используете SingleChildScrollView, содержимое теряет вертикальное выравнивание. Вы также можете заключить SingleChildScrollView в центральный виджет.

child: Center( 
    child: SingleChildScrollView(
        child: Column(
            children: <Widget>...
person ronbla    schedule 11.05.2020