Как переместить нижний лист вместе с клавиатурой с текстовым полем (автофокусировка - правда)? - PullRequest
Новая
       5

Как переместить нижний лист вместе с клавиатурой с текстовым полем (автофокусировка - правда)?

0 голосов
/ 20 декабря 2018

Я пытаюсь создать нижнюю таблицу, в которой есть текстовое поле и для автофокуса установлено значение true, чтобы клавиатура всплывала.Но нижний лист перекрывается клавиатурой.Есть ли способ переместить нижнюю панель над клавиатурой?

Padding(
  padding:
      EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: Column(children: <Widget>[
    TextField(
      autofocus: true,
      decoration: InputDecoration(hintText: 'Title'),
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Additional details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),]);

Ответы [ 3 ]

0 голосов
/ 15 августа 2019

В флаттере 1.7.X и более поздних версиях в BottomSheetDialog добавлено больше функциональных возможностей, поэтому в дополнение к ответу @anmol.majhail вы можете добавить isScrollControlled = true к showModalBottomSheetэто позволит нижнему листу занять всю необходимую высоту, что дает дополнительную гарантию того, что TextField не покрывается клавиатурой.

Например: 

 showModalBottomSheet(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
    backgroundColor: Colors.black,
    context: context,
    isScrollControlled: true,
    builder: (context) => Padding(
      padding: const EdgeInsets.symmetric(horizontal:18 ),
      child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12.0),
                child: Text('Enter your address',
                    style: TextStyles.textBody2),
              ),
              SizedBox(
                height: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'adddrss'
                  ),
                  autofocus: true,
                  controller: _newMediaLinkAddressController,
                ),
              ),

              SizedBox(height: 10),
            ],
          ),
    ));

Обратите внимание:

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),

Не требуется.Просто я создаю закругленный нижний лист.

Обновление

Если ваш BottomSheetModel равен Column, убедитесь, что вы добавили mainAxisSize: MainAxisSize.min, в противном случае листпокроет весь экран.

0 голосов
/ 17 августа 2019

Оберните Form виджетом Scaffold, а затем оберните TextFormField SingleChildScrollView: 


 return Container(
          height: screenHeight * .66,
          child: Scaffold(
             child: Form(
               key: _form,
               child: SingleChildScrollView(
                 child:TextFormField()
               )
              )
             )
           )
0 голосов
/ 21 декабря 2018

Чтобы сфокусироваться на клавиатуре в BottomSheet - оберните TextField в виджете заполнения как показано ниже, например: Код: 

showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  child: Padding(
                    padding: EdgeInsets.only(
                        bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: TextField(
                      autofocus: true,
                    ),
                  ),
                );
              });
...