代码之家  ›  专栏  ›  技术社区  ›  iPatel

颤振如何将容器背景设置为透明颜色

  •  3
  • iPatel  · 技术社区  · 7 年前

    I found this question but doesn't work for me.

    我也和你一起玩 Opacity 装饰 颜色 Container . 但没有找到解决方案,它总是显示出来

    看看下面的图片,它应该是透明的,而不是红色。

    enter image description here

    以下是我的代码:

    _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)
                            ),
                          ),
                        )
                    )
                  ],
                ),
              );
            });
      }
    }
    
    1 回复  |  直到 7 年前
        1
  •  21
  •   diegoveloper    7 年前

    这个 AlertDialog 小部件有一个 backgroundColor

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

    并移除 BoxDecoration

    使现代化 看起来像 背景色 (我在开发频道)

    稳定的: 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

    检查Dialog的源代码,我发现它使用了 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,
                          ...
    
        2
  •  11
  •   Lightwaxx    6 年前

    您也可以按如下操作

    backgroundColor: Color.fromRGBO(r, g, b, 0)
    
        3
  •  9
  •   basudev nayak    5 年前

    您只需通过以下方法即可实现这一点:

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

    可以使用0到1之间的十进制值指定所需的不透明度,0表示完全透明,而1表示完全不透明。