如何在ListView中放置元素?

时间:2019-04-08 17:21:13

标签: dart flutter flutter-layout

早上好。我制作了this screen,它在高分辨率下就像一个魅力。问题是,我想支持较低的分辨率,例如Nexus 4(768x1280)。

因此,当我在仿真器(Nexus 4大小)上运行此命令并触摸输入字段时,键盘要么:阻止输入,要么将底部的两个按钮移动到另一个按钮上,然后使其重叠。

因此,要解决该问题,我将整个布局都包装在ListView()上,但是现在包装在Row()上的底部按钮不再停留在底部。

这是我的没有ListView的代码,可以在高分辨率下工作,但在低分辨率下工作:

return Form(
  Stack(
    Center(
      Column(
        ...
      ),
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: Row(
        ...
      ),
    ),
  ),
);

This是带有resizeToAvoidBottomPadding的外观:false this就是将值设置为true的样子

谢谢大家。

3 个答案:

答案 0 :(得分:1)

您尝试使用SingleChildScrollView吗?

这是一个小部件,用于使页面能够调整高度并滚动,对于listview而言,listview不是它的listview,您应该在得到未知数据量时添加listview,

我们通常不使用它来调整视图。


好的,所以我在这里编辑了代码,键盘弹出后,视图可以正常显示,并且我可以正常地单击按钮。

  Widget formWidget(){
    return new Scaffold(
      // appBar: AppBar(
      //   // Here we take the value from the MyHomePage object that was created by
      //   // the App.build method, and use it to set our appbar title.
      //   title: Text(widget.title),
      // ),
      body:Column( 
          children: <Widget> [ 
          Expanded(
       child:SingleChildScrollView(
        child: Form(

          child: 
          // Stack(
          //   children: <Widget>[
              // Center(
                // child: SingleChildScrollView(
                  // child: 
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,

                    children: [
                      Padding(
                        padding: (MediaQuery.of(context).size.height) > 600
                            ? const EdgeInsets.only(top: 0.0)
                            : const EdgeInsets.only(top: 30.0),
                        child: Image(
                          image: AssetImage('assets/favIcon.png'),
                          width: 88.0,
                          height: 88.0,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(0, 28.0, 0, 12.0),
                        child: Text(
                          'Delegados',
                          style: TextStyle(
                            fontFamily: 'Archia',
                            fontSize: 32.0,
                          ),
                        ),
                      ),
                      Text(
                        'Introduce tus datos de acceso aquí.',
                        style: TextStyle(
                          color: Color(0xff83868F),
                          fontFamily: 'Brutal',
                          fontSize: 14.0,
                        ),
                      ),
                      Padding(
                        padding:
                        const EdgeInsets.fromLTRB(16.0, 26.0, 16.0, 12.0),
                        child: TextFormField(
                          decoration: InputDecoration(
                            labelText: 'Correo',
                            filled: true,
                            fillColor: Color(0xffF0F1F5),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                width: 0,
                                style: BorderStyle.none,
                              ),
                            ),
                          ),
                          style: TextStyle(
                            fontFamily: 'Brutal',
                            color: Color(0xff1A1B1F),
                          ),
                           controller: TextEditingController() ,

                            textInputAction: TextInputAction.next,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(16.0, 0, 16.0, 12.0),
                        child: TextFormField(
                          keyboardType: TextInputType.emailAddress,
                          decoration: InputDecoration(
                            labelText: 'Contraseña',
                            filled: true,
                            fillColor: Color(0xffF0F1F5),
                            suffixIcon: Icon(Icons.remove_red_eye),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                width: 0,
                                style: BorderStyle.none,
                              ),
                            ),
                          ),
                          style: TextStyle(
                            fontFamily: 'Brutal',
                            color: Color(0xff1A1B1F),
                          ),
                           controller: TextEditingController() ,
                           //focusNode:FocusNode(),

                          obscureText: true,
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(0, 0, 0, 26.0),
                          child: CupertinoButton(
                            onPressed: () {},
                            child: Text(
                              'Olvidé mi Contraseña',
                              style: TextStyle(
                                color: Color(0xff565A66),
                                fontFamily: 'Brutal',
                                fontSize: 14.0,
                              ),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(16.0, 0, 16.0, 0),
                        child: ButtonTheme(
                          minWidth: double.infinity,
                          child: InkWell(
                            // onTap: state is! LoginLoading
                            //     ? _onLoginButtonPressed
                            //     : null,
                            child: Container(
                              height: 48.0,
                              width: 500.0,
                              decoration: BoxDecoration(
                                color: Color(0xff00CC36),
                                borderRadius: BorderRadius.circular(8.0),
                              ),
                              child: Align(
                                  alignment: Alignment.center,
                                  child: Container(
                                    child: 
                                    // state is LoginLoading
                                    //     ? CircularProgressIndicator():
                                         Text(
                                      'INGRESAR AHORA    ›',
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontFamily: 'Brutal',
                                        fontSize: 14.0,
                                      ),
                                    ),
                                  )),
                            ),
                          ),
                        ),
                      ),

                    ],
                  ),
                // ),
              )
              ,
              // aqui va <<<<<<<<<<<<
            // ],
          // ),
             )  
       ),
       Align(
                        alignment: Alignment.bottomCenter,

                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            CupertinoButton(
                              onPressed: () {},
                              child: Text(
                                '¿No tienes cuenta?',
                                style: TextStyle(
                                  color: Color(0xff83868F),
                                  fontFamily: 'Brutal',
                                  fontSize: 14.0,
                                ),
                              ),
                            ),
                            InkWell(
                              onTap: null,
                              child: Container(
                                height: 32.0,
                                width: 112.0,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(6.0),
                                  border: Border.all(
                                    color: Color(0xffD7D9E0),
                                    width: 1.0,
                                  ),
                                ),
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                    'CONTACTANOS',
                                    style: TextStyle(
                                        color: Color(0xff565A66),
                                        fontFamily: 'Brutal',
                                        fontSize: 11.0),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),

       ]

       )

       ,

    // )
    );
  }

答案 1 :(得分:0)

您可以在return roundedNumber % 2 === 0;中尝试此操作。

Scaffold

答案 2 :(得分:0)

我通过这段代码将两个元素定位在屏幕的中心和底部。

body: Column(
        children: [
          Expanded(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(
                      height: 80,
                      width: 80,
                      child:
                          Image(image: AssetImage("assets/images/logo.png"))),
                  SizedBox(height: 10),
                  Text(
                    "Tings App",
                    style: TextStyle(fontSize: 36),
                  ),
                  SizedBox(height: 10),
                  TextFormField(
                    controller: _emailController,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        isDense: true,
                        labelText: 'Email/phone'),
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Please enter a valid email';
                      }
                      return null;
                    },
                  ),
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              padding: EdgeInsets.all(20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  _isLoading
                      ? CircularProgressIndicator()
                      : SizedBox(
                          width: MediaQuery.of(context).size.width * 0.7,
                          height: 60.0,
                          child: ElevatedButton(
                            style: ButtonStyle(
                              shape: MaterialStateProperty.all<
                                  RoundedRectangleBorder>(
                                RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(100.0),
                                ),
                              ),
                            ),
                            child: Text(
                              "SignIn",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w800,
                                  fontSize: 18),
                            ),
                            onPressed: () {
                              _login(context);
                            },
                          ),
                        ),
                  SizedBox(height: 16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "Don't have account?",
                        style: TextStyle(fontSize: 16),
                      ),
                      SizedBox(width: 6),
                      TextButton(
                        onPressed: () {
                          Navigator.push(
                              context, SlideRightRoute(page: Signup()));
                        },
                        child: Text("SignUp"),
                      ),
                    ],
                  )
                ],
              ),
            ),
          )
        ],
      ),