时间戳

首页 > 解决方案 > 如何在 Flutter 的 AlertDialog 上设置背景图像？

flutter - 如何在 Flutter 的 AlertDialog 上设置背景图像？

问题描述

我想单击带有 InkWell 的卡片，该卡片显示图像，因为它是一个带有文本的 AlertDialog。我认为问题可能是在 AlertDialog 上将图像设置为背景，所以我可以在上面写，但我只能使用 backgroundColor。

这是我的想法，但我无法将图像设置为 AlertDialog 的背景。

child: InkWell(
    onTap: () {
        showDialog(
            context: context,
            builder: (BuildContext context) {
                return AlertDialog(
                    content: Container(...),
                );
            },
        );
    },
    child: Container(...),
),

标签： flutter

解决方案

在这里尝试一下，我可能没有InkWell您想要的位置，但这会导致图像顶部的居中文本。如果您不希望图像和文本处于相同的对齐方式，请查看Positioned小部件。

Card(
          child: InkWell(
            child: Text('This is some text in a card'),
            onTap: () => showDialog(
              context: context,
              builder: (context) => AlertDialog(
                content: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Image.asset(
                      'Path to image',
                      height: 200,
                      fit: BoxFit.cover,
                    ),
                    Text(
                      'This Is Some Text',
                      style: TextStyle(
                        fontSize: 24,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),

推荐阅读