在 Flutter 中，我们如何使用自定义绘图或自定义裁剪器来实现此 UI？

Question

我想使用自定义绘画或任何其他合适的方法来实现附加的 UI 小部件，这应该适用于不同的设备尺寸。

Answer 1

您可以将

Stack

与

Positioned.fill

和

Align

小部件一起使用，如下所示：

    Column(
                children: [
                  Stack(
                    clipBehavior: Clip.none,
                    children: [
                      SizedBox(
                        width: 300,
                        height: 200,
                        child: Card(
                          color: Colors.yellow,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15.0),
                          ),
                        ),
                      ),
                      Positioned.fill(
                        top: -40,
                        child: Align(
                          alignment: Alignment.topCenter,
                          child: Container(
                            width: 100,
                            height: 100,
                            decoration: const BoxDecoration(
                                color: Colors.white, shape: BoxShape.circle),
                            child: Align(
                              alignment: Alignment.center,
                              child: Container(
                                width: 90,
                                height: 90,
                                decoration: const BoxDecoration(
                                    color: Colors.orange, shape: BoxShape.circle),
                                child: const Align(
                                  alignment: Alignment.center,
                                  child: Icon(
                                    Icons.check,
                                    size: 50,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ],
              ),