flutter 带TextField(输入框)的Dialog(弹框)

平时在写app项目的过程,总会遇到一些"不正经"的美工, 搞出一些不伦不类的图,但做为工程师的我们,都懒得和他们计较, 来的图,就做呗, 老子偏不信邪,只要是UI都是实现!! 哈哈~~

美工给的效果图如下 (这个和material风格的Dialog 还是有不少差别吧,所以咱们需要自定义一个自己的风格的Dialog)

2.png

话不多说,上最终效果图.

5.gif

总体来说,实现起来不算太难,不过在写代码的过程中,有遇到一些小坑,和大家分享一下.

对封装控件的期望

键盘弹出可以正常(不会出现被遮挡的问题)
点击事情传递出来,并且点击ok按钮可以得到TextField的文字内容

虽说这个效果图,用系统的Dialog是满足不了的,需要自定义对话框.但自定义总得有一个切入口.
我们来先看一下系统的弹出框的api及效果

showAlertDialog(BuildContext context) {
   //设置按钮
    Widget cancelButton = FlatButton(
      child: Text("Cancel"),
      onPressed: () {},
    );
    Widget continueButton = FlatButton(
      child: Text("Continue"),
      onPressed: () {},
    );

    //设置对话框
    AlertDialog alert = AlertDialog(
      title: Text("AlertDialog"),
      content: Text(
          "Would you like to continue learning how to use Flutter alerts?"),
      actions: [
        cancelButton,
        continueButton,
      ],
    );

    //显示对话框
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
}

效果如下

image.png

从系统api中,可以看出content这个参数是传Widget,于是产生这个思路------>还是用系统的showDialog()方法把它弹出来, 给它也是返回系统的AlertDialog,但这个AlertDialog,我们可以去改变他的样式,给它传递的content是我们需求的内容;这样就可以变成我们想要的样子

代码比较简单,如下
先新建一个类,继承自系统的 AlertDialog, 有一个参数contentWidget,需要外界传入.

import 'package:flutter/material.dart';

class RenameDialog extends AlertDialog {
  RenameDialog({Widget contentWidget})
      : super(
          content: contentWidget,
          contentPadding: EdgeInsets.zero,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20),
              side: BorderSide(color: Colors.blue, width: 3)),
        );
}

contentWidget 我们也封装一下,方便项目使用

新一个类RenameDialogContent,里面就是具体怎么布局,怎么把事件传递出来等

import 'package:flutter/material.dart';

double btnHeight = 60;
double borderWidth = 2;

class RenameDialogContent extends StatefulWidget {
  String title;
  String cancelBtnTitle;
  String okBtnTitle;
  VoidCallback cancelBtnTap;
  VoidCallback okBtnTap;
  TextEditingController vc;
  RenameDialogContent(
      {@required this.title,
      this.cancelBtnTitle = "Cancel",
      this.okBtnTitle = "Ok",
      this.cancelBtnTap,
      this.okBtnTap,
      this.vc});

  @override
  _RenameDialogContentState createState() =>
      _RenameDialogContentState();
}

class _RenameDialogContentState extends State<RenameDialogContent> {
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(top: 20),
        height: 200,
        width: 10000,
        alignment: Alignment.bottomCenter,
        child: Column(
          children: [
            Container(
                alignment: Alignment.center,
                child: Text(
                  widget.title,
                  style: TextStyle(color: Colors.grey),
                )),
            Spacer(),
            Padding(
              padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
              child: TextField(
                style: TextStyle(color: Colors.black87),
                controller: widget.vc,
                decoration: InputDecoration(
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    )),
              ),
            ),
            Container(
              // color: Colors.red,
              height: btnHeight,
              margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
              child: Column(
                children: [
                  Container(
                    // 按钮上面的横线
                    width: double.infinity,
                    color: Colors.blue,
                    height: borderWidth,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      FlatButton(
                        onPressed: () {
                          widget.vc.text = "";
                          widget.cancelBtnTap();
                          Navigator.of(context).pop();
                        },
                        child: Text(
                          widget.cancelBtnTitle,
                          style: TextStyle(fontSize: 22, color: Colors.blue),
                        ),
                      ),
                      Container(
                        // 按钮中间的竖线
                        width: borderWidth,
                        color: Colors.blue,
                        height: btnHeight - borderWidth - borderWidth,
                      ),
                      FlatButton(
                          onPressed: () {
                            widget.okBtnTap();
                            Navigator.of(context).pop();
                            widget.vc.text = "";
                          },
                          child: Text(
                            widget.okBtnTitle,
                            style: TextStyle(fontSize: 22, color: Colors.blue),
                          )),
                    ],
                  ),
                ],
              ),
            )
          ],
        ));
  }
}

最后使用的时候,就比较简单了

    showDialog(
        barrierDismissible: false,
        context: context,
        builder: (context) {
          return RenameDialog(
            contentWidget: RenameDialogContent(
              title: "请输入新的家庭名称",
              okBtnTap: () {
                print(
                  "输入框中的文字为:${_vc.text}",
                );
              },
              vc: _vc,
              cancelBtnTap: () {},
            ),
          );
        });

有一个坑点就是关于textField的属性设置,

                decoration: InputDecoration(
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    )),

如果不设置的话,当键盘弹起的时候,看不到TextField相关的下划线或者边框之类的,这个也不知道是不是系统api的bug,这个不知道小伙伴们会不会遇到.
不设置的效果图如下

3.gif

结尾

这里就当是提供一种思路吧，小伙伴如果有更好的实现思路或方法，请多指教，欢迎在评论区留言！今天的分享先写到这里吧,感觉有点帮助的话,请点赞,加关注喽~~