Flutter中的自定义对话框群控编程网

我已经试验了flutter一段时间了，但我偶然发现很多次都从应用程序的设计制作自定义窗口小部件。尽管使用flutter制作UI组件非常容易，但是您必须经过大量实验过程才能获得我们想要的东西。在此博客中，我将简化并展示如何通过分解自定义对话框的各个部分来进行自定义对话框。因此，让我们开始吧！

我们这次旅程的目标将是这样的，

它看起来很简单，但是当我们尝试使圆圈窥视卡片时会变得棘手。图片中使用的明显的小部件是

标题和说明Text
按钮的RaisedButton
顶部CircularAvatar 。

让我们开始构建自定义对话框，

  类 CustomDialog 扩展了 StatelessWidget { 
  最后的 String 标题 ， 描述 ， buttonText ; 
  最终图片图片 ; 

  CustomDialog（{ 
  @需要这个 。  标题 
  @需要这个 。  描述 
  @需要这个 。  buttonText ， 
  这个 。  图片 
  }）; 

  @override 
 小部件build（BuildContext context）{ 
  返回对话框（ 
 形状：RoundedRectangleBorder（ 
  borderRadius：BorderRadius.circular（Conss。padding）， 
  ）， 
 海拔：0.0， 
  backgroundColor：颜色。  透明的 
 子级：dialogContent（context）， 
  ）; 
  } 
  }

我们正在设置对话框的所有属性，并指向包含所有重要小部件的dialogContent（）。

对话框默认带有自己的背景颜色和高程。因为我们不会使用它，所以我们将backgroundColor设置为Colors.transparent ，而Colors.transparent设置为0.0 。

  dialogContent（BuildContext context）{ 
  返回堆栈（ 
 子代： [ 
  // ...底卡部分， 
  // ...顶部圆形图像部分， 
  ]， 
  ）; 
  }

由于堆栈的顶部显示了最后一个元素（duh…），因此我们在末尾有一个圆形以重叠在卡片上。让我们深入研究每个孩子。

儿童-卡：

 容器（ 
 填充：EdgeInsets.only（ 
 页首：Consts。  avatarRadius + Consts。  填充 
 底部：Consts。  填充 
 左：Consts。  填充 
 右：续。  填充 
  ）， 
 边距：EdgeInsets.only（top： Consts。avatarRadius ）， 
 装饰： 新 BoxDecoration（ 
 颜色：颜色。  白色 
 形状：BoxShape。  矩形 
  borderRadius：BorderRadius.circular（Conss。padding）， 
  boxShadow：[ 
  BoxShadow（ 
 颜色：颜色。  黑色26 
  blurRadius：10.0， 
 偏移量： const Offset（0.0，10.0）， 
  ）， 
  ]， 
  ）， 
 子：列（ 
  mainAxisSize：MainAxisSize。  min ， //使卡紧凑 
 子代： [ 
 文本（ 
  标题 
 样式：TextStyle（ 
  fontSize：24.0， 
  fontWeight：FontWeight。  w700 
  ）， 
  ）， 
  SizedBox（高度：16.0）， 
 文本（ 
  描述 
  textAlign：TextAlign。  中心 
 样式：TextStyle（ 
  fontSize：16.0， 
  ）， 
  ）， 
  SizedBox（高度：24.0）， 
 对齐（ 
 对齐：对齐。  bottomRight ， 
 子代：FlatButton（ 
  onPressed：（）{ 
 航海家。  （context）.pop（）的；  //关闭对话框 
  }， 
 子级：Text（ buttonText ）， 
  ）， 
  ）， 
  ]， 
  ）， 
  ），

我们使用Container和BoxDecoration制作卡片，并且由于圆形头像的一半应在卡片上，因此我们使用Consts.avatarRadius属性相应地添加了填充和边距。

子—圆形图片：

 定位（ 
 左：Consts。  填充 
 右：续。  填充 
 子代：CircleAvatar（ 
  backgroundColor：颜色。  blueAccent ， 
 半径：常数。  头像半径 
  ）， 
  ），

在这里，我们将“ Positioned小部件用作Stack中的子代，以根据flutter开发团队的建议包装CircularAvatar。同样，将left和right属性设置为相同的值以放置在Stack的中心。

您可能想知道那是什么？只是存储少量常量的类，如下所示。

  类 Consts { 
  Consts ._（）; 

  静态const double padding = 16.0; 
  静态const double avatarRadius = 66.0; 
  }

我们的旅程已经结束。

对？

到目前为止，我最终将演示CustomDialog的用法，

  showDialog（ 
 上下文：上下文， 
 生成器：（BuildContext上下文）=> CustomDialog（ 
 标题： “成功” ， 
 描述： 
  “洛雷姆·伊普苏姆·多洛尔（Lorem ipsum dolor）坐立不安，奉献己任，萨尔瓦多·伊斯莫德（Eusmod tempor）临时劳工和劳动者（Dodolore magna aliqua）。  ， 
  buttonText： “好” ， 
  ）， 
  ）;

您可以在按钮之类的小部件的onPressed:属性中调用它，然后得到此…

我们的旅程到此结束。

大家见！