时间戳

首页 > 解决方案 > Flutter 对话框背景图片

flutter - Flutter 对话框背景图片

问题描述

我正在尝试一些具有异国情调的 Flutter 对话框的实验。至于现在，我想要一个SimpleDialog（或AlertDialog）以资产图像作为背景。不幸的是，这似乎是不可能的，因为只有颜色可用作背景。我怎样才能绕过这个问题并用图像填充我的对话框？

我已经看过这个答案，但这是对话框内的图像。它总是有边距

标签： flutterflutter-layoutflutter-dialog

解决方案

您要做的应该足够简单，您只需确保将 的contentPadding属性设置AlertDialog为零，并使用堆栈。

我还建议在您的图像周围使用定位，这样它就不会决定对话框的大小，否则对话框可能会在屏幕上变得尽可能大。这样做可以确保对话框的大小适合另一个孩子（您的实际内容）。

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      backgroundColor: Colors.red,
      content: Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            child: Image.network(
              "https://images.unsplash.com/photo-1596117803277-6142bb2ae8ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2364&q=80",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(24),
            child: Container(
              height: 400,
              width: 240,
              color: Colors.white.withOpacity(.3),
            ),
          )
        ],
      ),
      contentPadding: EdgeInsets.zero,
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
    );
  },
);

推荐阅读