Flutter:AlertDialog内部堆栈

时间:2020-03-17 05:19:13

标签: flutter dart

我在堆栈内部有一个警报对话框,可以制作我的自定义对话框,如下所示:

源代码

onTap: () => showDialog(
                      context: context,
                      builder: (ctxDialog) => Scaffold(
                        backgroundColor: Colors.transparent,
                        body: Stack(
                          children: <Widget>[
                            AlertDialog(
                              titlePadding: EdgeInsets.zero,
                              title: Container(
                                height: sizes.height(context) / 7.5,
                                decoration: BoxDecoration(
                                  border: Border(
                                    bottom: BorderSide(
                                      color: Theme.of(context).accentColor,
                                      width: 2,
                                    ),
                                  ),
                                ),
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Column(
                                    children: <Widget>[
                                      FittedBox(
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(
                                            'PT.ABADI',
                                            style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              fontSize: 20,
                                            ),
                                          ),
                                        ),
                                      ),
                                      Text('Lantai 1'),
                                    ],
                                  ),
                                ),
                              ),
                              content: Padding(
                                padding: const EdgeInsets.symmetric(
                                    vertical: 8, horizontal: 30.0),
                                child: SingleChildScrollView(
                                  child: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: <Widget>[
                                      Text('Maret 2020'),
                                      SizedBox(height: 10),
                                      TextFormFieldCustom(
                                        onSaved: (value) => print(value),
                                        hintText: 'Nilai',
                                        labelText: 'Nilai',
                                        prefixIcon: Icon(Icons.looks_one),
                                      ),
                                      SizedBox(height: 10),
                                      InkWell(
                                        onTap: () => print('Pilih Foto'),
                                        child: Container(
                                          decoration: BoxDecoration(
                                            border: Border.all(
                                              color:
                                                  colorPallete.greyTransparent,
                                            ),
                                          ),
                                          alignment: Alignment.center,
                                          height: sizes.height(context) / 6,
                                          width: sizes.width(context),
                                          child: Text('Pilih Foto'),
                                        ),
                                      ),
                                      SizedBox(height: 10),
                                      ButtonCustom(
                                        onPressed: () => '',
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(
                                top: sizes.height(context) / 6.5,
                                right: sizes.width(context) / 12,
                              ),
                              alignment: Alignment.topRight,
                              child: CircleAvatar(
                                radius: sizes.width(context) / 20,
                                backgroundColor: Theme.of(context).errorColor,
                                child: IconButton(
                                  icon: Icon(
                                    Icons.close,
                                    size: sizes.width(context) / 20,
                                  ),
                                  onPressed: () => print('close'),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    ),

一切都很好,但是问题是如果我将焦点放在文本字段上并且键盘显示出来,则关闭按钮的位置是固定的。如何使位置关闭按钮跟随警报对话框?

谢谢。

完整源代码

return InkWell(
                    onTap: () => showDialog(
                      context: context,
                      builder: (ctxDialog) => Scaffold(
                        backgroundColor: Colors.transparent,
                        body: Stack(
                          children: <Widget>[
                            AlertDialog(
                              titlePadding: EdgeInsets.zero,
                              title: Container(
                                height: sizes.height(context) / 7.5,
                                decoration: BoxDecoration(
                                  border: Border(
                                    bottom: BorderSide(
                                      color: Theme.of(context).accentColor,
                                      width: 2,
                                    ),
                                  ),
                                ),
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Column(
                                    children: <Widget>[
                                      FittedBox(
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(
                                            'PT.ABADI',
                                            style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              fontSize: 20,
                                            ),
                                          ),
                                        ),
                                      ),
                                      Text('Lantai 1'),
                                    ],
                                  ),
                                ),
                              ),
                              content: Padding(
                                padding: const EdgeInsets.symmetric(
                                    vertical: 8, horizontal: 30.0),
                                child: SingleChildScrollView(
                                  child: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: <Widget>[
                                      Text('Maret 2020'),
                                      SizedBox(height: 10),
                                      TextFormFieldCustom(
                                        onSaved: (value) => print(value),
                                        hintText: 'Nilai',
                                        labelText: 'Nilai',
                                        prefixIcon: Icon(Icons.looks_one),
                                      ),
                                      SizedBox(height: 10),
                                      InkWell(
                                        onTap: () => print('Pilih Foto'),
                                        child: Container(
                                          decoration: BoxDecoration(
                                            border: Border.all(
                                              color:
                                                  colorPallete.greyTransparent,
                                            ),
                                          ),
                                          alignment: Alignment.center,
                                          height: sizes.height(context) / 6,
                                          width: sizes.width(context),
                                          child: Text('Pilih Foto'),
                                        ),
                                      ),
                                      SizedBox(height: 10),
                                      ButtonCustom(
                                        onPressed: () => '',
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(
                                top: sizes.height(context) / 6.5,
                                right: sizes.width(context) / 12,
                              ),
                              alignment: Alignment.topRight,
                              child: CircleAvatar(
                                radius: sizes.width(context) / 20,
                                backgroundColor: Theme.of(context).errorColor,
                                child: IconButton(
                                  icon: Icon(
                                    Icons.close,
                                    size: sizes.width(context) / 20,
                                  ),
                                  onPressed: () => print('close'),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: Row(
                        children: <Widget>[
                          titleHeaderRow(title: '$indexOrder'),
                          titleHeaderRow(
                              title: '$indexOrder', textAlign: TextAlign.left),
                          titleHeaderRow(title: '$indexOrder'),
                          // titleHeaderRow(title: month.toString()),
                          // titleHeaderRow(title: month.toString()),
                        ],
                      ),
                    ),
                  );

1 个答案:

答案 0 :(得分:0)

将您的AlertDialog小部件滑入SingleChildScrollView

SingleChildScrollView(
                padding: EdgeInsets.only(top: yourFocus.hasFocus ? 
                        MediaQuery.of(context).size.height / 2 - 250 // adjust values according to your need
                        : MediaQuery.of(context).size.height / 2 - 130),// adjust values according to your need
                child: AlertDialog(
                    title: Text("your Alert header text"),
                    content: TextField(
                             focusNode: yourFocus,
                             controller: yourTextController,
                             decoration: InputDecoration.collapsed(
                                        hintText: "your hint text."),
                             ),
                    actions: <Widget>[
                      FlatButton(
                          child: Text("Your button Title"),
                          onPressed: () {
                           yourFunction();
                          })
                    ]));