日更(四十七)-flutter-Dialog

瞎扯

写app,离不开的一个功能,弹框

虽然弹框很多时候显得不太友好,阻塞式的交互.

但是必不可少.

Dialog

如果简单弹一个dialog有多简单?

 showDialog(
              context: context,
              builder: (context) => Center(child: Text("123")));
image.png

这肯定不是我们想要的.

我想要的是这样的.

image.png

AlertDialog

  showDialog(
            context: context,
            builder: (context) => AlertDialog(
                    title: Text("标题"),
                    content: Text("内容"),
                    actions: [
                      Text('确认'),
                      Padding(padding: EdgeInsets.all(10.0), child: Text('取消')),
                    ]),
          );

这样,md风格的dialog就出来了.也就是android原生风格.

dialog.dart文件中有些什么?

总共有:


image.png

SimpleDialog

如图:


image.png

代码:

showDialog(
            context: context,
            builder: (context) =>
                SimpleDialog(title: Text("标题"), children: [
                  Text('内容1'),
                  Text('内容2'),
                ]),
          );

也就是这个只定义了一个title.

其它的完全自定义实现.

自由度比较高.

SimpleDialogOption

  const SimpleDialogOption({
    Key key,
    this.onPressed,//点击
    this.child,//子控件
  }) : super(key: key);

这个东西是干嘛的呢?

这个不能单独使用,必须依赖与于SimpleDialog

用一下:

   SimpleDialog(title: Text("标题"), children: [
                  SimpleDialogOption(child: Text('内容1')),
                  SimpleDialogOption(child: Text('内容2')),
                ]),
image.png

可以理解为,子条目的意思.帮你做了边距等一些事情.我觉得这个东西意义不大.

关闭dialog

Navigator.pop(context);

实际上,就是按下返回键就行了.


交流群:493180098,这是个很少吹水,交流学习的群.
APP开发维护咨询群 : 492685472 ,承接APP迭代.开发维护.咨询业务,付费快速解决问题.

你可能感兴趣的:(日更(四十七)-flutter-Dialog)