如何在顶部容器上打孔？

Question

我正在试着在颤动中建立一个表盘。底牌只是一个上面有数字的无状态牌。顶部的表盘应该是有状态的，并且在上面有几个孔，这样你就可以看到它下面的数字，就像真正的表盘一样。

关于如何实现这一点的一些技巧将不胜感激。我不想要完整的解决方案，因为我想自己做，而是一些有用的技巧，让它变得更容易一些。我已经找了几天了，但没有找到任何对我有帮助的东西。请不要回答，这对我来说太复杂了，因为我是一个绝对的初学者，现在3个月的编程和颤动。

Answer 1

您可以使用与'difference‘操作混合的Path.combine在顶部容器上开孔。

Path combine (

PathOperation操作，

路径path2

)

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

生成的路径将从不重叠的轮廓线构建。在可能的情况下，减少曲线的阶数，以便三次曲线可以变成二次曲线，而二次曲线可以变成直线。

===========

difference 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;
  }
}