简体   繁体   English

键盘打开时如何避免底部溢出(在警报对话框中)

[英]How to avoid bottom overflow when keyboard open (in alert dialog)

In this screen i'm facing overflow every time I open keyboard in the alert text field.在此屏幕中,每次在警报文本字段中打开键盘时,我都会面临溢出。 I already tried to put SingleChildScrollVIew in all the places and it didn't resolve.我已经尝试将SingleChildScrollVIew放在所有地方,但没有解决。 This is the component which have the alertdialog:这是具有警报对话框的组件:

Future<void> _showAlertDialog() async {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Type the Name', textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white)),
          content: TextField(
            controller: _nameController,
            keyboardType: TextInputType.text,
            textCapitalization: TextCapitalization.sentences,
          )
        );
      },
    );
  }

This is the build function:这是构建 function:

Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TableCalendar(//default code),
            Divider(),
            _showList(),
          ],
        ),

      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add, color: Colors.white,),
        onPressed: () => _showCity(context) 
      ),
    );
  }

The _showAlertDialog is called inside _showCity (see build > floating action button > onpressed) _showAlertDialog_showCity内部被调用(参见 build > floating action button > onpressed)

_showCity : _showCity

_showCity(BuildContext context){
  _showAlertDialog();
}

But after all attempts, every time I hit the textField in _showAlertDialog and it opens the keyboard, it throws an error:但经过所有尝试,每次我在 _showAlertDialog 中点击 textField 并打开键盘时,都会引发错误:

A RenderFlex overflowed by 33 pixels on the bottom.一个 RenderFlex 在底部溢出了 33 个像素。

How can I handle that?我该如何处理?

Update _showList:更新_showList:

Widget _showList(){
    return ListView.builder(

        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: _sEv.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              
            },
            child: Dismissible(
              child: ListTile(
                leading: //loremipsum,
                title: //blablabla,
                subtitle: //dolorsit,
                ),
              ),
              key: UniqueKey(),
              direction: DismissDirection.startToEnd,
              background: Container(
                alignment: AlignmentDirectional.centerEnd,
                color: Colors.redAccent,
                child: Icon(Icons.delete_rounded),
              ),
              onDismissed: (DismissDirection direction) {
                setState(() {
                  //my irrelevant code
                });
            }
          ),);
        },
      );
  }

UPDATE 2 ScreenShot:更新 2截图: 在此处输入图像描述

Just wrap the body of this page in SingleChildScrollView like this.只需像这样将这个页面的主体包裹在SingleChildScrollView中。

Widget build(BuildContext context) {
   return SingleChildScrollView(
      child: Scaffold(
         resizeToAvoidBottomPadding: false,
         body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [ TableCalendar(
              //default code), 
              Divider(), _showList(),
            ],
         ),
         floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add, color: Colors.white,),
            onPressed: () => _showCity(context)
         ),
      ),
   );
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM