底部溢出30px

时间:2018-08-22 17:38:42

标签: flutter flutter-layout

我用新的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,)
          ),


        ],
      ),
    );
  }
}

8 个答案:

答案 0 :(得分:20)

两个解决方案。

  1. resizeToAvoidBottomPadding: false添加到您的Scaffold

    Scaffold(
     resizeToAvoidBottomPadding: false,
     body: ...)
    
  2. FilstList(searchtext: _text,)放在scrollableView(例如SingleChildScrollViewListView)内

答案 1 :(得分:4)

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

  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(),
          )),
    );
  }
}

这将解决问题。

答案 2 :(得分:3)

您应该使用resizeToAvoidBottomInset

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

如果您遇到溢出错误的问题,请使用SingleChildScrollView

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

答案 3 :(得分:2)

我遇到了类似的问题,并通过以下方式解决了该问题:

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

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

答案 4 :(得分:1)

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

答案 5 :(得分:0)

在脚手架中将resizeToAvoidBottomPadding设置为false:

  Scaffold(
 resizeToAvoidBottomPadding: false, 

更新 这是更好的解决方案: 删除Column并放入ListView

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

答案 6 :(得分:0)

做两种方式

NO1.Scaffold( resizeToAvoidBottomPadding:false,) 问题是,当您选择输入框时,执行此正文内容的位置永远不会变高。

最佳做法

SingleChildScrollView小部件

答案 7 :(得分:-1)

使用了SigleChildScrollView

示例代码

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