flutter 底部溢出30px

zaqlnxep  于 2022-12-05  发布在  Flutter
关注(0)|答案(9)|浏览(169)

我遇到了一个问题,用new Expanded() Package TextField。当试图搜索textfield中的内容时,它的show me bottom overflow by 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,)
          ),

        ],
      ),
    );
  }
}
qojgxg4l

qojgxg4l1#

这个问题有两个解决方案。
1.将resizeToAvoidBottomPadding: false添加到Scaffold

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

1.将您的FilstList(searchtext: _text,)放入scrollableView(如SingleChildScrollViewListView

jw5wzhpr

jw5wzhpr2#

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

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

这将解决问题。

8ftvxx2r

8ftvxx2r3#

您应该使用resizeToAvoidBottomInset

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

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

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

lyfkaqu14#

我遇到了一个类似的问题,并通过以下方式解决了它:
您可以使用SingleChildScrollView或ListView Package 它。

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

o2gm4chl5#

将resizeToAvoidBottomPadding设置为假,在脚手架中:

Scaffold(
    resizeToAvoidBottomPadding: false,

更新它是更好的解决方案:删除列并将其放置为ListView
因为如果你在较小的设备上运行这个应用程序,底部的项目将从显示屏幕上消失和隐藏,这将对应用程序用户不利。

gv8xihay

gv8xihay6#

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

wwtsj6pe

wwtsj6pe7#

做两路
一号。

Scaffold(
 resizeToAvoidBottomPadding: false, )

问题是,当你这样做时,当你选择输入框时,正文内容永远不会出现在顶部。
最佳做法
单个子滚动视图小部件

j8ag8udp

j8ag8udp8#

CustomScrollViewSliverToBoxAdapter配合使用:

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

s5a0g9ez9#

已使用SigleChildScrollView

  • 示例代码 *
Scaffold(
          appBar: //AppBar
          body: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,

相关问题