Question

我正在设计一个登录页面，它溢出，当我单击任何文本表单字段时，它会打开键盘，并通过类似这样的溢出警告来查看附件图像。我还希望将“提升按钮”图标放在按钮的右侧。

Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                  image: new DecorationImage(
                      image: new AssetImage('assets/login_page_bg_1.jpg'),
                      fit: BoxFit.cover,
                      colorFilter: new ColorFilter.mode(
                          Colors.black.withOpacity(0.55), BlendMode.dstATop))),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: new EdgeInsets.only(top: 42.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.asset('assets/logo.png',
                            width: 250.0, height: 200.21),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    margin: new EdgeInsets.only(bottom: 40.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        //form filed goes here
                        Text('Login As User',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 35.0)),
                        TextFormField(
                            keyboardType: TextInputType.emailAddress,
                            decoration: InputDecoration(
                              hintText: 'you@example.com',
                              labelText: 'Email Address',
                            ),
                        new Container(
                          // width: MediaQuery.of(context).size.width,
                          child: RaisedButton.icon(
                            color: Color.fromARGB(251, 188, 74, 1),
                            label: Text('LOGIN'),
                            icon: Icon(Icons.send,
                                size: 10.0, color: Colors.black),
                            onPressed: () {
                              this.submit();
                            }, ),)],),),)],)],),),);

Intital state

Error/overflowed State

Answer 1

将以下属性设置为false

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)

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

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

Answer 2

之所以发生这种情况，是因为当键盘出现在屏幕上时，要绘制的画布的高度减小了。一种解决方案是像这样将根容器包装在SingleChildScrollView中：

Widget build(BuildContext context) {
return Scaffold(
      body: Stack(
        fit: StackFit.loose,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                image: new DecorationImage(
                    image: new AssetImage('assets/login_page_bg_1.jpg'),
                    fit: BoxFit.cover,
                    colorFilter: new ColorFilter.mode(
                        Colors.black.withOpacity(0.55), BlendMode.dstATop)
                        )
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 42,),
              Expanded(
                flex: 1,
                child: Center(
                  child:
                    Image.asset('assets/logo.png',
                        width: 250.0, height: 200.21),
                ),
              ),
              Expanded(
                flex: 2,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                    //form filed goes here
                    Text('Login As User',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 35.0)),
                TextFormField(
                  keyboardType: TextInputType.emailAddress,
                  decoration: InputDecoration(
                    hintText: 'you@example.com',
                    labelText: 'Email Address',
                  )
                ),
                  new Container(
                    // width: MediaQuery.of(context).size.width,
                    child: RaisedButton.icon(
                      color: Color.fromARGB(251, 188, 74, 1),
                      label: Text('LOGIN'),
                      icon: Icon(Icons.send,
                          size: 10.0, color: Colors.black),
                      onPressed: () {
                        //this.submit();
                      }, ),)],)),
              SizedBox(height: 40,)

            ],)],),);

当内容的高度超过视口的可用高度时，它将使屏幕可滚动。

Answer 3

一个更简单的解决方案（source）似乎只是将CASE WHEN TICKET.STATUS IN ('APPROVED_DATE' + 'ADJUSTEDTARGETRESOLUTIONTIME') >= ACTUALFINISH THEN 'MET' ELSE 'NOTMET'属性Scaffold设置为resizeToAvoidBottomPadding。这对我很有效：

false

Answer 4

一个更简单的版本是用ListView小部件包装有问题的容器。它使屏幕可滚动并且易于实现。您可以在此小部件中使用多个孩子。

Scaffold(  
   body: ListView(
     children: <Widget> [
       Container(
       ),
       TextView(
       ),
       Column(
       ),
     ],
   ),
 )

Answer 5

添加resizeToAvoidBottomPadding: false,和resizeToAvoidBottomInset: false, 到您的脚手架小部件。
用Container包裹代码，设置Container的参数height: MediaQuery.of(context).size.height,和width: MediaQuery.of(context).size.width,。然后用Container包裹SingleChildScrollView。

Answer 6

设置resizeToAvoidBottomInset: true并使用body: ListView()也可以。这样，您可以在打开键盘时滚动页面。

打开键盘时Flutter中出现溢出错误

6 个答案: