Переполнение дна на 30 пикселей

Я сталкиваюсь с проблемой, оборачивая TextField с новым Expanded(). когда пытаешься что-то искать в текстовом поле, показывай переполнение дна на 30px .. ниже мой код, пожалуйста, помогите мне

 Widget build(BuildContext context) {
    return new Scaffold(
        body:
      Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.search), onPressed: () {
                setState(() {

                });
              }),
              new Flexible(
                child: new TextField(
                  onChanged: (String value) {
                    onchange(value);
                  },
                  maxLines: 1,
                  autocorrect: true,
//                  decoration: const InputDecoration(helperText: "Search"),
                  style: new TextStyle(fontSize: 10.0, color: Colors.black),
                ),
              ),
              _text != null ? IconButton(
                  icon: Icon(Icons.close), onPressed: (){
              }) : new Container(),

              IconButton(icon: Icon(Icons.bookmark_border), onPressed: () {}),
            ],
          ),
          new Expanded(
              child: FilstList(searchtext: _text,)
          ),


        ],
      ),
    );
  }
}

10 ответов

Решение

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

  1. добавлять resizeToAvoidBottomPadding: false на ваш Scaffold

    Scaffold(
     resizeToAvoidBottomPadding: false,
     body: ...)
    
  2. Положить ваши FilstList(searchtext: _text,) внутри scrollableView (лайк SingleChildScrollView или же ListView)

Используйте свойство Scaffold "resizeToAvoidBottomPadding: false" и "SingleChildScrollView" в качестве родителя тела Scaffold:

  class RegisterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Registration Page",
      home: Scaffold(
          resizeToAvoidBottomPadding: false,
          appBar: AppBar(
            title: Text("Registration Page"),
          ),
          body: SingleChildScrollView(
            child: RegisterUser(),
          )),
    );
  }
}

это решит проблему.

Вы должны использовать resizeToAvoidBottomInset

Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  ... 
)

Если у вас возникли проблемы с ошибкой переполнения, используйте SingleChildScrollView с этим.

Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  body: SingleChildScrollView(child: YourBody()),
)

Я столкнулся с подобной проблемой и исправил ее следующим образом:

Вы можете обернуть его с помощью SingleChildScrollView или ListView.

Scaffold(
    body: Container(
      height: MediaQuery.of(context).size.height * .50,
      child: SingleChildScrollView(
          child: Column( 
              ....
          )
      )
   )
 );

Поместите resizeToAvoidBottomPadding в false в Scaffold:

  Scaffold(
 resizeToAvoidBottomPadding: false, 

обновить это лучшее решение: удалить столбец и поставить вместо него ListView

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

Использование resizeToAvoidBottomInset: false в вашем Scaffold - лучшее решение.

Сделать два пути

NO1.Scaffold( resizeToAvoidBottomPadding: false,) Проблема в том, что когда вы делаете это тело, содержимое никогда не поднимается вверх, когда вы выбираете поле ввода..

Лучшая практика

Виджет SingleChildScrollView

Используйте Scaffold и сделайте «resizeToAvoidBottomInset» ложным.

       Scaffold(
            resizeToAvoidBottomInset: false,
            ........
   )

ИспользоватьCustomScrollViewсSliverToBoxAdapter:

      body: CustomScrollView( 
  slivers: [
     SliverToBoxAdapter(
         child: Form(....)
     ),
  ]
)

Используемый SigleChildScrollView

образец кода

Scaffold(
          appBar: //AppBar
          body: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
Другие вопросы по тегам