Flutter：根据其父项削减窗口小部件的边缘

Question

我做了这个小部件：

Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
                width: 200,
                height: 200,
                padding: const EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.grey,
                ),
                child: GridView.count(
                  crossAxisCount: 2,
                  crossAxisSpacing: 4.0,
                  mainAxisSpacing: 2.0,
                  children: <Widget>[
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.red,
                    ),
                  ],
                ))
          ],
        ),

结果是：

现在如何根据父形状切割4个正方形的边缘？

Answer 1

您可以使用ClipOval来实现。

用它包裹灰色容器：

ClipOval(
    child:Container(
        //Your grey container
    ),
),