Flutter AlertDialog弹窗表单正常显示但确认取消按钮不出现问题求助
问题根源
- AlertDialog默认
scrollable属性为false,当表单内容高度超出弹窗最大可展示高度时,内容区域会直接挤占操作按钮的布局空间,导致按钮被挤出可视范围 - 表单嵌套的Column默认
mainAxisSize为MainAxisSize.max,会尽可能占用纵向空间,进一步放大了空间挤占的问题
修正后代码
return AlertDialog( // 新增scrollable属性设为true,让弹窗支持内容滚动,保留actions展示空间 scrollable: true, title: Center( child: Text("CREAZIONE UTENTI"), ), content: Form( child: SingleChildScrollView( child: Column( // 新增mainAxisSize设为min,让Column仅占用实际需要的高度 mainAxisSize: MainAxisSize.min, children: [ //tasti per inserimento dati Padding( padding: const EdgeInsets.all(8.0), child: TextFormField( controller: _nameTextController, decoration: buildInputDecoration( label: "Nome Account", hintText: "Nome"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: TextFormField( controller: _surnameTextController, decoration: buildInputDecoration( label: "Cognome Account", hintText: "Cognome"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: TextFormField( controller: _usernameTextController, decoration: buildInputDecoration( label: "Username Account", hintText: "Username"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: TextFormField( controller: _passwordTextController, decoration: buildInputDecoration( label: "Password Account", hintText: "Password"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: TextFormField( controller: _mailTextController, decoration: buildInputDecoration( label: "Indirizzo email Account", hintText: "admin@admin.com"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: TextFormField( controller: _ruoloTextController, decoration: buildInputDecoration( label: "Ruolo Account", hintText: "admin, utente"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: TextFormField( controller: _applicationTextController, decoration: buildInputDecoration( label: "Applicazioni abilitate", hintText: "Aplicazione abilitata"), ), ), ], ), ), ), actions: [ Padding( padding: const EdgeInsets.all(8.0), child: TextButton( onPressed: () async { //agg }, child: Text("Conferma")), ), Padding( padding: const EdgeInsets.all(8.0), child: TextButton( onPressed: () { Navigator.of(context).pop(); }, child: Text("Cancella")), ), ], );
效果说明
修改后弹窗会自动为底部操作按钮预留固定展示空间,表单内容过多时仅content区域可滚动,两个操作按钮会始终固定显示在弹窗底部,不会被内容挤出可视范围。
内容的提问来源于stack exchange,提问作者lorenzo borgato
相关产品推荐
相关产品推荐

