首页 > 解决方案 > 如何在 ListView 中定位元素?

问题描述

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

因此,当我在模拟器(Nexus 4 大小)上运行它并触摸输入字段时,键盘要么:阻止输入,要么移动底部的两个按钮并将它们重叠在其他东西上。

因此,为了解决这个问题,我将整个布局包裹在 ListView() 上,但现在包裹在 Row() 上的底部按钮不会留在底部。

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

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

是 resizeToAvoidBottomPadding: false时的样子是设置为 true 时的样子

谢谢大家。

标签: dartflutterflutter-layout

解决方案


您是否尝试使用 SingleChildScrollView ?

它是一个小部件,用于使页面能够调整高度以及滚动,对于不是列表视图的列表视图,当您获得未知数量的数据时,您应该添加列表视图,

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


好的,所以我编辑了这里的代码,我可以在键盘弹出后正常滚动并且视图很好,我可以正常点击按钮尝试一下。

  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),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),

       ]

       )

       ,

    // )
    );
  }

推荐阅读