如何在顶部容器上打孔？

Question

我正在尝试在 Flutter 中构建一个拨号盘。底板只是一个无状态的板，上面有数字。顶板应该是有状态的，并且上面有几个孔，以便您可以看到下面的数字，就像真正的拨号盘一样。

有关如何实现此目的的一些提示将不胜感激。我不需要完整的解决方案，因为我想自己完成，而是需要一些有用的提示，使其变得更容易一些。我已经搜索了几天，但没有找到任何对我有帮助的东西。请不要给出对我来说太复杂的答案，因为我是一个绝对的初学者，现在已经进入编程和 flutter 3 个月了。

Answer 1

您可以使用 Path.combine 与 'difference' 操作混合在顶部容器中切孔。

路径组合（
PathOperation操作，
路径path1，
路径路径2
)

根据给定指定的方式组合两条路径 操作。

生成的路径将由不重叠的轮廓构建。 尽可能减少曲线阶数，以便可以转动立方体 变成二次方程，二次方程可能变成直线。

============

差异 → const PathOperation

从第一条路径中减去第二条路径。

例如，如果两条路径是重叠的相等的圆 直径但中心不同，结果将是新月形部分 第一个圆没有与第二个圆重叠。

请参阅下面的代码。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: CutHoleDemo(),
    );
  }
}

class CutHoleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cut Hole in Top Container Demo.'),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.blueGrey,
          child: Stack(
            children: [
              Center(
                child: Text(
                  "Bottom\nContainer\nText",
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.center,
                ),
              ),
              CustomPaint(
                painter: CustomContainerWithHole(),
                child: Center(
                  child: Container(
                    height: 200,
                    width: 200,
                    color: Colors.transparent,
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Text(
                        "Top Container Text",
                        style: TextStyle(color: Colors.black),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class CustomContainerWithHole extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.grey;
    canvas.drawPath(
      Path.combine(
        PathOperation.difference,
        Path()
          ..addRRect(RRect.fromLTRBR(50, 50, 250, 250, Radius.circular(10))),
        Path()
          ..addOval(Rect.fromCircle(center: Offset(150, 150), radius: 50))
          ..close(),
      ),
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Answer 2

这是@bluenile 的答案的附加答案。方法

paint

应该如下所示：

 @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.grey;
    final path = Path()
      ..fillType = PathFillType.evenOdd
      ..addRRect(RRect.fromLTRBR(50, 50, 250, 250, Radius.circular(10)))
      ..addOval(Rect.fromCircle(center: Offset(150, 150), radius: 50));
    canvas.drawPath(path, paint);
  }