Flutter：两个容器半径有一个小线影

Question

现在我正在尝试绘制一个容器，其半径边界与另一个容器相交但是如图所示，每个容器周围都有一条线仍然可见有谁知道如何隐藏它！

有我的代码

Container(
              height: MediaQuery.of(context).size.height * .47,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                color: Color.fromRGBO(28, 163, 200, 1),
                border: null,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(30.0),
                  //bottomLeft: Radius.circular(40.0),
                ),
              ),
            ),
            Container(
              color: Colors.transparent,
              child: Container(
                width: MediaQuery.of(context).size.width,
                color: Color.fromRGBO(28, 163, 200, 1),
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(247, 250, 251, 1),
                    border: null,
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(30.0),
                      //bottomLeft: Radius.circular(40.0),
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(left: 20, right: 20, top: 20),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          "القائمة",
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                              color: Colors.black),
                        ),
                        Spacer(),
                        Text(
                          "عرض الكل",
                          style: TextStyle(
                              fontSize: 14,
                              color: Color.fromRGBO(255, 140, 0, 1)),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),

Answer 1

听起来像是一个渲染器工件，如果您更改顶部容器的高度比例，它就会消失

 height: MediaQuery.of(context).size.height * .47, // <-- change this to be 0.5

如果您真的想要那个特定高度，请使用 Stack() 而不是嵌入式容器

Answer 2

如果您更改容器的高度，它将正确呈现。我附上了我得到的结果的截图：

Column(
        children: [
          Container(
            height: 300, //<--- This is what's causing the issue
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              color: Color.fromRGBO(28, 163, 200, 1),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(30.0),
                //bottomLeft: Radius.circular(40.0),
              ),
            ),
          ),
          Container(
            // color: Colors.transparent,
            child: Container(
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                color: Color.fromRGBO(28, 163, 200, 1),
              ),
              child: Container(
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  color: Color.fromRGBO(247, 250, 251, 1),
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(30.0),
                    //bottomLeft: Radius.circular(40.0),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(left: 20, right: 20, top: 20),
                  child: Row(
                    children: [
                      Text(
                        "القائمة",
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18, color: Colors.black),
                      ),
                      Spacer(),
                      Text(
                        "عرض الكل",
                        style: TextStyle(fontSize: 14, color: Color.fromRGBO(255, 140, 0, 1)),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      )

Flutter：两个容器半径有一个小线影

Flutter : the two container radius has a small line shadow

flutter

user-interface

dart

containers

border-radius