代码之家  ›  专栏  ›  技术社区  ›  N Sharma

底部过载213像素

flutter material-design ios android
  •  7
  • N Sharma  · 技术社区  · 8 年前

    嗨,我正在尝试创建登录屏幕。这对我来说很好。当我打开键盘时,它给了我一个错误 Bottom overloaded by 213 pixels . 

      Widget LoginPage() {
    return new Scaffold(body: Container(
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        color: Colors.white,
        image: DecorationImage(
          colorFilter: new ColorFilter.mode(
              Colors.black.withOpacity(0.05), BlendMode.dstATop),
          image: AssetImage('assets/images/mountains.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: new Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(120.0),
            child: Center(
              child: Icon(
                Icons.headset_mic,
                color: Colors.redAccent,
                size: 50.0,
              ),
            ),
          ),
          new Row(
            children: <Widget>[
              new Expanded(
                child: new Padding(
                  padding: const EdgeInsets.only(left: 40.0),
                  child: new Text(
                    "EMAIL",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.redAccent,
                      fontSize: 15.0,
                    ),
                  ),
                ),
              ),
            ],
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: Colors.redAccent,
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Expanded(
                  child: TextField(
                    obscureText: true,
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'samarthagarwal@live.com',
                      hintStyle: TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: 24.0,
          ),
          new Row(
            children: <Widget>[
              new Expanded(
                child: new Padding(
                  padding: const EdgeInsets.only(left: 40.0),
                  child: new Text(
                    "PASSWORD",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.redAccent,
                      fontSize: 15.0,
                    ),
                  ),
                ),
              ),
            ],
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: Colors.redAccent,
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Expanded(
                  child: TextField(
                    obscureText: true,
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: '*********',
                      hintStyle: TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: 24.0,
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 20.0),
                child: new FlatButton(
                  child: new Text(
                    "Forgot Password?",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.redAccent,
                      fontSize: 15.0,
                    ),
                    textAlign: TextAlign.end,
                  ),
                  onPressed: () => {},
                ),
              ),
            ],
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
            alignment: Alignment.center,
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    color: Colors.redAccent,
                    onPressed: () => {},
                    child: new Container(
                      padding: const EdgeInsets.symmetric(
                        vertical: 20.0,
                        horizontal: 20.0,
                      ),
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Expanded(
                            child: Text(
                              "LOGIN",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
            alignment: Alignment.center,
            child: Row(
              children: <Widget>[
                new Expanded(
                  child: new Container(
                    margin: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(border: Border.all(width: 0.25)),
                  ),
                ),
                Text(
                  "OR CONNECT WITH",
                  style: TextStyle(
                    color: Colors.grey,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                new Expanded(
                  child: new Container(
                    margin: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(border: Border.all(width: 0.25)),
                  ),
                ),
              ],
            ),
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new Container(
                    margin: EdgeInsets.only(right: 8.0),
                    alignment: Alignment.center,
                    child: new Row(
                      children: <Widget>[
                        new Expanded(
                          child: new FlatButton(
                            shape: new RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(30.0),
                            ),
                            color: Color(0Xff3B5998),
                            onPressed: () => {},
                            child: new Container(
                              child: new Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  new Expanded(
                                    child: new FlatButton(
                                      padding: EdgeInsets.only(
                                        top: 20.0,
                                        bottom: 20.0,
                                      ),
                                      child: new Row(
                                        mainAxisAlignment:
                                        MainAxisAlignment.spaceEvenly,
                                        children: <Widget>[
                                          Icon(
                                            const IconData(0xea90,
                                                fontFamily: 'icomoon'),
                                            color: Colors.white,
                                            size: 15.0,
                                          ),
                                          Text(
                                            "FACEBOOK",
                                            textAlign: TextAlign.center,
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontWeight: FontWeight.bold),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                new Expanded(
                  child: new Container(
                    margin: EdgeInsets.only(left: 8.0),
                    alignment: Alignment.center,
                    child: new Row(
                      children: <Widget>[
                        new Expanded(
                          child: new FlatButton(
                            shape: new RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(30.0),
                            ),
                            color: Color(0Xffdb3236),
                            onPressed: () => {},
                            child: new Container(
                              child: new Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  new Expanded(
                                    child: new FlatButton(
                                      padding: EdgeInsets.only(
                                        top: 20.0,
                                        bottom: 20.0,
                                      ),
                                      child: new Row(
                                        mainAxisAlignment:
                                        MainAxisAlignment.spaceEvenly,
                                        children: <Widget>[
                                          Icon(
                                            const IconData(0xea88,
                                                fontFamily: 'icomoon'),
                                            color: Colors.white,
                                            size: 15.0,
                                          ),
                                          Text(
                                            "GOOGLE",
                                            textAlign: TextAlign.center,
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontWeight: FontWeight.bold),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    ));
  }

    有人知道可能是什么问题吗?

    enter image description here

    3 回复  |  直到 8 年前
        1
  •  37
  •   leodriesch    8 年前

    我建议用ListView替换顶栏小部件,它可以根据键盘输入自动调整大小,同时还支持滚动。

    如果你真的想要这样的设置,你可以用参数来编辑你的脚手架 

    resizeToAvoidBottomPadding: false

    这将使错误消失

        2
  •  31
  •   CopsOnRoad    7 年前 
    Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  ... 
)

    正如Andrey所说,你可能在滚动方面有问题,所以你可以试试 

    Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  body: SingleChildScrollView(child: YourBody()),
)
        3
  •  12
  •   Roger Villamarin    8 年前

    您通常需要在小部件的顶部提供一个滚动小部件,因为如果您试图打开键盘或更改手机的方向,Flatter需要知道如何处理小部件在屏幕上的分布。

    请查看此资源,您可以查看Flatter提供的各种现成选项,并为您的场景选择最佳选项。

    https://flutter.io/widgets/scrolling/

        4
  •  12
  •   AlexPad    7 年前

    具有 resizeToAvoidBottomPadding: false 在Scaffold中,您不会看到open textfield下面的所有小部件。解决方案是插入一个包含SingleChildScrollView的容器。例子: 

    Container(
    alignment: Alignment.center,
    width: double.infinity,
    height: double.infinity,
    color: viewModel.color,
    child: SingleChildScrollView(child:"Your widgets"));
        5
  •  9
  •   Jatinder Kumar    7 年前

    将您的子视图包装到ListView将解决这个问题。请检查一下 

     class _LoginScreenState extends State<LoginScreen> {
 @override
 Widget build(BuildContext context) {
    return new Scaffold(
    body: new Container(
     child: ListView(
       children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[

                new Padding(
                  padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
                  child: new Text("jk", style: TextStyle(fontFamily: "mono_bold")),
                ),

                 new Padding(
                  padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
                  child: new TextField(
                    style: new TextStyle(),
                      decoration: InputDecoration(
                        labelText: "Email",
                        contentPadding: EdgeInsets.all(8.0)
                    ),
                    keyboardType: TextInputType.emailAddress,
                  )
                ),
                 new Padding(
                  padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
                  child: new TextField(
                    style: new TextStyle(

                    ),
                    decoration: InputDecoration(
                      labelText: "Password"

                    ),
                    keyboardType: TextInputType.text,
                    obscureText: true,
                    ),
                ),
              ],
          ),
        ),
      ],
    )
  ),
);
}
        6
  •  9
  •   saeed foroughi    6 年前

    把你的专栏写进 SingleChildScrollView 这将解决问题。请检查: 

     Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            child: Center(
                child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(),
              TextField(),
            ],
          ),
        ))));
  }

    你也可以用它来移除黄黑色的溢流线 

    resizeToAvoidBottomPadding: false

    但在这种情况下, TextField 不会在单击时向上移动。

        7
  •  7
  •   David Buck Richard Ferris    6 年前

    使用SingleChildScrollView小部件包装以下是我解决这种情况的代码: 这是最好最简单的方法 

    SingleChildScrollView(
              child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Hero(
            tag: 'logo',
                        child: Container(
              height: 200.0,
              child: Image.asset('images/logo.png'),
            ),
          ),
          SizedBox(
            height: 48.0,
          ),
          TextField(
            onChanged: (value) {
              //Do something with the user input.
            },
            decoration:  kTextFieldDecoration.copyWith(hintText: 'Enter username'),
          ),
          SizedBox(
            height: 8.0,
          ),
          TextField(
            onChanged: (value) {
              //Do something with the user input.
            },
            decoration: kTextFieldDecoration.copyWith(hintText: 'Enter password'),
          ),
          SizedBox(
            height: 24.0,
          ),

           RoundedButton(
            colour: Colors.blueAccent,
            text: 'Register',
            onPressed: () {
            //later todo
            },
          ),

        ],
      ),
    ),
        8
  •  2
  •   Andrii Turkovskyi    7 年前

    你可以设定 resizeToAvoidBottomInset: false 为了避免溢出,但你们不能到达页面底部的字段,这可以被键盘覆盖。

    或者你可以把尸体包起来 Scaffold 在…内 SingleChildScrollView

        9
  •  1
  •   David user10336229    7 年前

    您可以在ListView中包含所有小部件。
    所以你可以滚动它,过载的内容就会消失。

        10
  •  0
  •   Rukshan    6 年前

    将内容放入SingleChildScrollView,添加一个ConstrainedBox,然后再试一次

    https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

        11
  •  0
  •   THess user1031307    6 年前

    把你的顶栏包起来 SingleChildScrollView .

    使布局可滚动。

        12
  •  0
  •   double-beep hudson solomon    6 年前

    您可以将字段包装为一个子字段 ScrollView 颤振。

        13
  •  0
  •   Oshitha Wimalasuriya    5 年前

    将项目从下到上对齐, 试试这个。。 

    child: SizedBox(
      height: MediaQuery.of(context).size.height,
                  child: SingleChildScrollView(
                    reverse: true,
        14
  •  0
  •   Spatz    5 年前

    移除顶部和底部不需要的填充物 

        child: Container(

          height: size.height,
             width: size.width,
          padding: EdgeInsets.only(
                left: size.width * 0.15,
              right: size.width * 0.15,
              top: size.width * 0.15,
              bottom: size.width * 0.15,
         ),

    通过这个改变 

         child: Container(
    
              height: size.height,
                 width: size.width,
              padding: EdgeInsets.only(
                    left: size.width * 0.15,
                  right: size.width * 0.15,
             ),

    这对我有用。

        15
  •  0
  •   Christos Koninis    4 年前

    你应该加上 resizeToAvoidBottomInset:false, 把你的按钮放进去 孩子:SingleChildScrollView() 如下代码所示: 

    Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: PreferredSize(
        preferredSize:const Size(double.infinity,100),
        child:(ResponsiveLayout.isTinyLimit(context) ||
              ResponsiveLayout.isTinyHeightLimit(context))
            ? Container()
            : const AppBarWidget(),
),

  body: Center(
    child:SingleChildScrollView(
    child: Padding(

        padding: const EdgeInsets.all(8.0),

      child: Center(


        child: Column(

          mainAxisAlignment: MainAxisAlignment.center ,
          children: [
            Text("Temperature"),
            LineChartSample2(),

            Text("Gas Level"),
            LineChartSample2(),
            on?Icon(Icons.lightbulb,
              size:100,
              color: Colors.lightBlue.shade700 ,
            ):const Icon(Icons.lightbulb_outline,
              size:100,

            ),
              ElevatedButton(
              style: TextButton.styleFrom(
                backgroundColor: on? Colors.green: Colors.white10),
                onPressed: (){
                dbR.child("movement").set({"Switch":!on});
                setState(() {
                  on = !on;
                });
                },
                  child:on ? const Text("On"):const Text("Off"))
          ],
        ),
      ),
      ) ),
  ),
);
        16
  •  -1
  •   Rishav Sharma    6 年前

    尝试用

    1.(ListView和give属性shrinkWrap:true,)列表视图具有属性子级:[],或

    2.(SingleChildScrollView())但它只有子项:。

    比如: 

     child: ListView(shrinkWrap: true, children: <Widget>[
                new Column(children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(120.0),
                    child: Center(
                      child: Icon(
                        Icons.headset_mic,
                        color: Colors.redAccent,
                        size: 50.0,
                      ),
                    ),
                  ),
                  new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new Padding(
                          padding: const EdgeInsets.only(left: 40.0),
                          child: new Text(
                            "EMAIL",
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.redAccent,
                              fontSize: 15.0,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  new Container(
                    width: MediaQuery.of(context).size.width,
                    margin: const EdgeInsets.only(
                        left: 40.0, right: 40.0, top: 10.0),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                            color: Colors.redAccent,
                            width: 0.5,
                            style: BorderStyle.solid),
                      ),
                    ),
                    padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                    child: new Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        new Expanded(
                          child: TextField(
                            obscureText: true,
                            textAlign: TextAlign.left,
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'samarthagarwal@live.com',
                              hintStyle: TextStyle(color: Colors.grey),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Divider(
                    height: 24.0,
                  ),
                  new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new Padding(
                          padding: const EdgeInsets.only(left: 40.0),
                          child: new Text(
                            "PASSWORD",
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.redAccent,
                              fontSize: 15.0,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  new Container(
                    width: MediaQuery.of(context).size.width,
                    margin: const EdgeInsets.only(
                        left: 40.0, right: 40.0, top: 10.0),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                            color: Colors.redAccent,
                            width: 0.5,
                            style: BorderStyle.solid),
                      ),
                    ),
                    padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                    child: new Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        new Expanded(
                          child: TextField(
                            obscureText: true,
                            textAlign: TextAlign.left,
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: '*********',
                              hintStyle: TextStyle(color: Colors.grey),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ])
              ]),
    推荐文章
    sudoExclamationExclamation  ·  iOS自动布局-高度不能小于ThanOrEqualTo
    1 年前
    Tulon  ·  Firebase身份验证SwiftUI:更改密码后,电子邮件验证状态变为真
    1 年前
    Danil  ·  种子/填充核心数据的最佳实践?[关闭]
    1 年前
    HeWhoRemains  ·  如何在SwiftUI中创建圆形文本,根据度数变化从一条直线变为一个完美的圆?
    1 年前
    Robin  ·  LazyVGrid项目预计不会击中测试区域
    1 年前
    Mahendra  ·  Popover不是从SwiftUI中的项目列表中打开的[重复]
    1 年前
    Alex Smith  ·  移动到下一个视图控制器后如何显示警报?
    1 年前
    sadiq shareef  ·  即使更新了我的苹果应用程序网站关联文件,iOS应用程序也不会在点击网址时启动
    1 年前
    selcukctn  ·  如何在react native中制作无限动画?
    1 年前
    Nicolas Gimelli  ·  iOS 18远程通信通知不起作用
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号