flutter 如何将容器背景设置为透明色

fdbelqdn  于 2023-02-09  发布在  Flutter
关注(0)|答案(4)|浏览(826)

I found this question but doesn't work for me.
我也玩过Opacity小工具和Container的 * 装饰 * 颜色。但没有找到解决方案。当我设置为透明时,它总是显示白色背景色。
看看下面的图像,而不是红色,它应该是透明的。

下面是我的代码:

_showAlertDialog(String strTitle, String strDetails) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            contentPadding: EdgeInsets.zero,
            content: Stack(
              children: <Widget>[
                Opacity(
                  opacity: 1, // Also tried to set 0
                  child: Container(
                    padding: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(255, 0, 0, 0.5) // I played with different colors code for get transparency of color but Alway display White. 
                    ),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Container(
                          height: 50,
                          padding: EdgeInsets.only(left: 10, right: 10, top: 2),
                          color: Theme.of(context).primaryColor,
                          child: Center(
                            child: Text(
                              strTitle,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500,
                                  fontSize: 14),
                              maxLines: 2,
                            ),
                          ),
                        ),
                        Flexible(
                          child: Container(
                            color: Colors.white,
                            padding: EdgeInsets.all(10),
                            child: SingleChildScrollView(
                              child: Text(
                                strDetails,
                                style: TextStyle(color: Colors.black87, fontSize: 12, fontWeight: FontWeight.w400),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Positioned(
                    top: 0,
                    right: 0,
                    child:
                    Container(
                      height: 24,
                      width: 24,
                      child: DecoratedBox(
                        child: IconButton(
                            padding: EdgeInsets.zero,
                            icon: Icon(Icons.close, color: Theme.of(context).primaryColor, size: 18,), onPressed: () {
                          Navigator.of(context).pop();
                        }),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(12)
                        ),
                      ),
                    )
                )
              ],
            ),
          );
        });
  }
}
qzwqbdag

qzwqbdag1#

AlertDialog小部件有一个backgroundColor属性,只需将其设置为transparent即可。

AlertDialog(
              contentPadding: EdgeInsets.zero,
              backgroundColor: Colors.transparent,

并删除BoxDecoration

更新看起来backgroundColor在Flutter 1.0.0上还不可用。(我在开发频道)

稳定:https://github.com/flutter/flutter/blob/stable/packages/flutter/lib/src/material/dialog.dart
偏差:https://github.com/flutter/flutter/blob/dev/packages/flutter/lib/src/material/dialog.dart
检查对话框的源代码,我发现它使用的是来自主题的dialogBackgroundColor。尝试以下简单方法:

showDialog(
          context: context,
          builder: (BuildContext context) {
            return Theme(
              data: Theme.of(context).copyWith(dialogBackgroundColor: Colors.transparent),
              child: AlertDialog(
                contentPadding: EdgeInsets.zero,
                content: Stack(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.all(8.0),
                      color: Colors.white,
                      ...
u0sqgete

u0sqgete2#

您可以简单地通过以下方式实现这一点:

...
   color: Colors.red.withOpacity(0),
                            ...

你可以指定多少不透明度你想要通过使用十进制值从0到1,0是完全透明的,而1是完全不透明的。

dxpyg8gm

dxpyg8gm3#

您还可以执行以下操作

backgroundColor: Color.fromRGBO(r, g, b, 0)
68de4m5k

68de4m5k4#

如果要找明确的背景用途,

backgroundColor: Colors.black.withOpacity(0.0),

相关问题