为 Flutter 中的嵌套容器赋予不同的颜色答案

【问题标题】：Giving different colours to nested containers in Flutter为 Flutter 中的嵌套容器赋予不同的颜色
【发布时间】：2021-06-11 06:06:35
【问题描述】：

我正在尝试在 Flutter 中创建一个 GestureDetector，当点击它时它会导航到一个新页面。 Detector上的设计应该是这样的

虽然当我尝试将两个容器嵌套在一起来实现这种效果时，它不起作用。内部 BorderDecoration 用于容器和我试图实现的不透明度变为黑色而不是透明（使用 .withOpacity() 函数）

粘贴我的代码以供参考

GestureDetector(
                               child: Container(
                                  width: MediaQuery.of(context).size.width / 6,
                                  height: MediaQuery.of(context).size.width / 6,
                                  decoration: BoxDecoration(
                                    border: Border.all(),
                                    color: Colors.transparent.withOpacity(0.25),
                                    borderRadius: BorderRadius.circular(15),
                                  ),
                                  child: Container(
                                    width:
                                        MediaQuery.of(context).size.width / 4,
                                    height:
                                        MediaQuery.of(context).size.width / 4,
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                        width: 7,
                                      ),
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(15),
                                    ),
                                    child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Image.asset(
                                            "assets/images/gold 1.png",
                                          ),
                                        ]),
                                  ),
                                ),
                                onTap: () {
                                  
                                },
                              ),

我的输出：

【问题讨论】：

从所有容器中删除Border.all()并检查结果

标签： flutter user-interface dart flutter-layout

【解决方案1】：

这将用作参考

GestureDetector(
            onTap: () {
            },
            child: Container(
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Center(
                child: Container(
                  height: 80,
                  width: 80,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15.0),
                    boxShadow: [
                      BoxShadow(color: Colors.grey[400],
                      )
                    ],
                    color: Colors.white
                  ),
                ),
              ),
            )
          ),

【讨论】：

【解决方案2】：

试试下面的代码：

GestureDetector(
  onTap: () {},
  child: Container(
    width: MediaQuery.of(context).size.width / 6,
    height: MediaQuery.of(context).size.width / 6,
    padding: EdgeInsets.all(7.0),
    decoration: BoxDecoration(
      color: Colors.white.withOpacity(.75),
      borderRadius: BorderRadius.circular(15),
    ),
    child: Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            "assets/images/gold 1.png",
          ),
        ],
      ),
    ),
  ),
),

【讨论】：