底部溢出30px

Question

我遇到一个问题，用

TextField

包裹

new Expanded()

。当尝试在

textfield

中搜索某些内容时，它会显示

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


        ],
      ),
    );
  }
}

Answer 1

这个问题有两个解决方案。

resizeToAvoidBottomPadding

现已已弃用。

脚手架的以下属性现在可以使用。 在脚手架小部件中

resizeToAvoidBottomInset

设置为

false

。

1. 将

   resizeToAvoidBottomInset: false

   添加到您的脚手架

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

2. 将您的

   FilstList(searchtext: _text,)

   放入

   scrollableView

   中（如

   SingleChildScrollView

   或

   ListView

   ）

Answer 2

使用脚手架属性“resizeToAvoidBottomPadding: false” 和“SingleChildScrollView”作为脚手架主体的父级：

      home: Scaffold(
          resizeToAvoidBottomPadding: false,
          appBar: AppBar(
            title: Text("Registration Page"),
          ),
          body: SingleChildScrollView(
            child: RegisterUser(),
          )),

这将解决问题。

Answer 3

你应该使用

resizeToAvoidBottomInset

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

---

如果您遇到溢出错误问题，请使用

SingleChildScrollView

。

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

Answer 4

我遇到了类似的问题并通过以下方式解决了它：

您可以使用 SingleChildScrollView 或 ListView 来包装它。

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

Answer 5

在 Scaffold 中将 resizeToAvoidBottomPadding 设置为 false：

  Scaffold(
    resizeToAvoidBottomPadding: false, 

更新 这是更好的解决方案： 删除 Column 并将其改为 ListView

因为如果您在较小的设备上运行此应用程序，底部项目将会消失并从显示屏幕中隐藏，这对应用程序用户来说将是不利的。

Answer 6

在脚手架中使用 resizeToAvoidBottomInset: false 是最好的解决方案。

Answer 7

做两种方式

NO1.

Scaffold(
 resizeToAvoidBottomPadding: false, )

问题是，当您执行此操作时，当您选择输入框时，正文内容永远不会出现在顶部..

最佳实践

SingleChildScrollView 小部件

Answer 8

二手

SigleChildScrollView

示例代码

Scaffold(
          appBar: //AppBar
          body: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,

Answer 9

将

CustomScrollView

与

SliverToBoxAdapter

一起使用：

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

Answer 10

使用 Scaffold 并将“resizeToAvoidBottomInset”设置为 false。

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

Answer 11

解决方案1：使用SingleChildScrollView 用 SingleChildScrollView 包裹脚手架的主体。这将使整个主体可滚动并防止键盘出现时溢出。

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        // Your other widgets go here
      ],
    ),
  ),
);

解决方案2： 使用resizeToAvoidBottomInset 在脚手架中将 resizeToAvoidBottomInset 设置为 false。这将防止键盘出现时布局调整大小。

Scaffold(
  resizeToAvoidBottomInset: false,
  body: Column(
    children: <Widget>[
      // Your other widgets go here
    ],
  ),
);