底部溢出 30px答案

【问题标题】：Bottom overflow by 30px底部溢出 30px
【发布时间】：2019-01-29 00:58:20
【问题描述】：

我遇到了一个问题，将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,)
          ),


        ],
      ),
    );
  }
}

【问题讨论】：

您好！您可以使用单子滚动视图来避免像素溢出。谢谢

标签： flutter flutter-layout

【解决方案1】：

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

将resizeToAvoidBottomPadding: false 添加到您的Scaffold

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

将您的FilstList(searchtext: _text,) 放入scrollableView（如SingleChildScrollView 或ListView）

【讨论】：

resizeToAvoidBottomPadding 现在是 deprecated。请改用resizeToAvoidBottomInset: false。
这阻止了我的正文内容的显示。正文是TabBarView。每个选项卡视图都有一个动态高度，因为它填充了来自服务器的数据，因此视图没有可用的大小。将TabBarView 放置在固定大小的Container 内会降低UI 质量。

【解决方案2】：

你应该使用resizeToAvoidBottomInset

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

如果您遇到溢出错误问题，请使用 SingleChildScrollView 处理它。

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

【讨论】：

【解决方案3】：

使用 Scaffold 属性“resizeToAvoidBottomPadding: false” 并将“SingleChildScrollView”作为 Scaffold 主体的父级：

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

这将解决问题。

【讨论】：

【解决方案4】：

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

你可以用 SingleChildScrollView 或 ListView 来包装它。

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

【讨论】：

【解决方案5】：

在 Scaffold 中将 resizeToAvoidBottomPadding 设为 false：

  Scaffold(
    resizeToAvoidBottomPadding: false,

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

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

【讨论】：

【解决方案6】：

在你的 Scaffold 中使用 resizeToAvoidBottomInset: false 是最好的解决方案。

【讨论】：

【解决方案7】：

两种方法

NO1.脚手架( resizeToAvoidBottomPadding: false, ) 问题是当你选择输入框时，这个正文内容永远不会出现在顶部..

最佳实践

SingleChildScrollView 小部件

【讨论】：

【解决方案8】：

使用SigleChildScrollView

示例代码

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

【讨论】：