使用ClipPath

Question

我想制作一个开始显示给用户的教程屏幕。就像下面这样：

我的具体问题，如何使某些元素将正常显示而其他元素是不透明的？

还有jinja2.exceptions.UndefinedError: 'doSomething' is undefined和文字，如何根据移动设备的屏幕尺寸（移动响应）使它们完美指向？

Answer 1

您可以使用this库来帮助您实现所需的内容。它允许您标记要突出显示的视图以及突出显示方式。

Answer 2

使用Stack小部件包装当前的顶部小部件，并堆叠当前小部件的第一个孩子。在此小部件下方，添加一个黑色容器，用不透明度包裹起来，如下所示：

return Stack(
  children: <Widget>[
    Scaffold( //first child of the stack - the current widget you have
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text("Foo"),
              Text("Bar"),
            ],
          ),
        )),
    Opacity( //seconds child - Opaque layer
      opacity: 0.7,
      child: Container(
        decoration: BoxDecoration(color: Colors.black),
      ),
    )
  ],
);

然后，您需要以1x，2x，3x分辨率创建描述和箭头的图像资产，并将它们放在资产文件夹中的适当结构中，如此处所述：https://flutter.dev/docs/development/ui/assets-and-images#declaring-resolution-aware-image-assets

然后，您可以使用Image.asset（...）小部件来加载图像（它们将以正确的分辨率加载），并将这些小部件放置在另一个也是堆栈子容器的容器上，并且将被放置在子级列表中的黑色容器下方（上面示例中的Opacity小部件）。

Answer 3

正如RoyalGriffin所提到的，您可以使用highlighter_coachmark库，并且我也知道您将收到错误，因为您使用的是RangeSlider类，该错误是从2个不同的包中导入的，所以存在错误。您可以在您的应用中尝试该示例并检查其是否正常工作吗？

将highlighter_coachmark添加到您的pubspec.yaml文件中

dependencies:
  flutter:
    sdk: flutter

  highlighter_coachmark: ^0.0.3

运行flutter packages get

示例：

import 'package:highlighter_coachmark/highlighter_coachmark.dart';

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  GlobalKey _fabKey = GlobalObjectKey("fab"); // used by FAB
  GlobalKey _buttonKey = GlobalObjectKey("button"); // used by RaisedButton

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        key: _fabKey, // setting key
        onPressed: null,
        child: Icon(Icons.add),
      ),
      body: Center(
        child: RaisedButton(
          key: _buttonKey, // setting key
          onPressed: showFAB,
          child: Text("RaisedButton"),
        ),
      ),
    );
  }

  // we trigger this method on RaisedButton click
  void showFAB() {
    CoachMark coachMarkFAB = CoachMark();
    RenderBox target = _fabKey.currentContext.findRenderObject();

    // you can change the shape of the mark
    Rect markRect = target.localToGlobal(Offset.zero) & target.size;
    markRect = Rect.fromCircle(center: markRect.center, radius: markRect.longestSide * 0.6);

    coachMarkFAB.show(
      targetContext: _fabKey.currentContext,
      markRect: markRect,
      children: [
        Center(
          child: Text(
            "This is called\nFloatingActionButton",
            style: const TextStyle(
              fontSize: 24.0,
              fontStyle: FontStyle.italic,
              color: Colors.white,
            ),
          ),
        )
      ],
      duration: null, // we don't want to dismiss this mark automatically so we are passing null
      // when this mark is closed, after 1s we show mark on RaisedButton
      onClose: () => Timer(Duration(seconds: 1), () => showButton()),
    );
  }

  // this is triggered once first mark is dismissed
  void showButton() {
    CoachMark coachMarkTile = CoachMark();
    RenderBox target = _buttonKey.currentContext.findRenderObject();

    Rect markRect = target.localToGlobal(Offset.zero) & target.size;
    markRect = markRect.inflate(5.0);

    coachMarkTile.show(
      targetContext: _fabKey.currentContext,
      markRect: markRect,
      markShape: BoxShape.rectangle,
      children: [
        Positioned(
          top: markRect.bottom + 15.0,
          right: 5.0,
          child: Text(
            "And this is a RaisedButton",
            style: const TextStyle(
              fontSize: 24.0,
              fontStyle: FontStyle.italic,
              color: Colors.white,
            ),
          ),
        )
      ],
      duration: Duration(seconds: 5), // this effect will only last for 5s
    );
  }
}

输出：

Answer 4

屏幕截图（使用空值安全）：

由于在撰写本文时 highlighter_coachmark 不支持空安全，因此请使用支持空安全的 tutorial_coach_mark。

完整代码：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final List<TargetFocus> targets;

  final GlobalKey _key1 = GlobalKey();
  final GlobalKey _key2 = GlobalKey();
  final GlobalKey _key3 = GlobalKey();

  @override
  void initState() {
    super.initState();
    targets = [
      TargetFocus(
        identify: 'Target 1',
        keyTarget: _key1,
        contents: [
          TargetContent(
            align: ContentAlign.bottom,
            child: _buildColumn(title: 'First Button', subtitle: 'Hey!!! I am the first button.'),
          ),
        ],
      ),
      TargetFocus(
        identify: 'Target 2',
        keyTarget: _key2,
        contents: [
          TargetContent(
            align: ContentAlign.top,
            child: _buildColumn(title: 'Second Button', subtitle: 'I am the second.'),
          ),
        ],
      ),
      TargetFocus(
        identify: 'Target 3',
        keyTarget: _key3,
        contents: [
          TargetContent(
            align: ContentAlign.left,
            child: _buildColumn(title: 'Third Button', subtitle: '... and I am third.'),
          )
        ],
      ),
    ];
  }

  Column _buildColumn({required String title, required String subtitle}) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          title,
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 10.0),
          child: Text(subtitle),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topLeft,
              child: ElevatedButton(
                key: _key1,
                onPressed: () {},
                child: Text('Button 1'),
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: ElevatedButton(
                key: _key2,
                onPressed: () {
                  TutorialCoachMark(
                    context,
                    targets: targets,
                    colorShadow: Colors.cyanAccent,
                  ).show();
                },
                child: Text('Button 2'),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: ElevatedButton(
                key: _key3,
                onPressed: () {},
                child: Text('Button 3'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

感谢 @josxha 的建议。

Answer 5

应该指出，面向材料的http://sub1.site.com包使用动画并将其集成到应用程序对象层次结构本身中，而不是不透明的方法，因此需要较少的自定义突出显示编程。交钥匙解决方案还支持多步突出显示。

Answer 6

如果您不想依赖外部库，则可以自己完成。实际上并不难。使用堆栈小部件，您可以将半透明覆盖层放在所有内容之上。现在，您如何在覆盖层中“挖洞”以强调基础UI元素？

这是一篇涵盖确切主题的文章：https://www.flutterclutter.dev/flutter/tutorials/how-to-cut-a-hole-in-an-overlay/2020/510/

我将总结您的可能性：

使用ClipPath

通过使用CustomClipper，给定一个小部件，您可以定义正在绘制的内容和未绘制的内容。然后，您可以围绕相关的基础UI元素绘制一个矩形或椭圆形：

class InvertedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path.combine(
      PathOperation.difference,
      Path()..addRect(
          Rect.fromLTWH(0, 0, size.width, size.height)
      ),
      Path()
        ..addOval(Rect.fromCircle(center: Offset(size.width -44, size.height - 44), radius: 40))
        ..close(),
    );
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

像这样在应用程序中插入它：

ClipPath(
  clipper: InvertedClipper(),
    child: Container(
      color: Colors.black54,
    ),
);

使用CustomPainter

您可以直接绘制与屏幕一样大且已经切掉了孔的形状，而不是在覆盖层上切出孔：

class HolePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black54;

    canvas.drawPath(
      Path.combine(
        PathOperation.difference,
        Path()..addRect(
          Rect.fromLTWH(0, 0, size.width, size.height)
        ),
        Path()
          ..addOval(Rect.fromCircle(center: Offset(size.width -44, size.height - 44), radius: 40))
          ..close(),
      ),
      paint
    );
  }

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

像这样插入它：

CustomPaint(
  size: MediaQuery.of(context).size,
  painter: HolePainter()
);

使用ColorFiltered

此解决方案无需油漆即可使用。通过使用特定的blendMode，它在小部件树中插入子项的地方切出了孔：

ColorFiltered(
  colorFilter: ColorFilter.mode(
    Colors.black54,
    BlendMode.srcOut
  ),
  child: Stack(
    children: [
      Container(
        decoration: BoxDecoration(
          color: Colors.transparent,
        ),
        child: Align(
          alignment: Alignment.bottomRight,
          child: Container(
            margin: const EdgeInsets.only(right: 4, bottom: 4),
            height: 80,
            width: 80,
            decoration: BoxDecoration(
              // Color does not matter but must not be transparent
              color: Colors.black,
              borderRadius: BorderRadius.circular(40),
            ),
          ),
        ),
      ),
    ],
  ),
);

Answer 7

尝试使用Highlight Coachmark来获得所需的东西！

此外，请使用别名（例如frs）导入软件包，以避免其功能与Flutter自己的具有相似名称的函数发生冲突。

如何使不透明的教程屏幕颤抖？

7 个答案:

使用ClipPath

使用CustomPainter

使用ColorFiltered