使正方形透明的一部分-翩翩起舞

我想实现图片中给出的扫描仪视图。我使用了 BoxDecoration 设计圆角的正方形。

            Center(
                  child: Container(
                    width: BarReaderSize.width,
                    height: BarReaderSize.height,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(color: Colors.white, width: 3)),
                  ),
                )

enter image description here

谁能帮帮我?

解决方案:

你可以尝试使用CustomPaint与一些路径的剪切。

请看完整的例子 这里的DartPad。

棘手的部分是确定如何剪辑圆形的白色矩形边框。我只是使用了自定义路径。我创建了自定义矩形,并从它们中创建了一个路径。

final path = Path()
      ..addRect(clippingRect0)
      ..addRect(clippingRect1)
      ..addRect(clippingRect2)
      ..addRect(clippingRect3);

这可能不是最有效的方法,但有时用CustomPainter画一些东西比用一些已经提供的小部件做实验要快。这样无论材质widget的API如何变化,你将始终拥有相同的外观。

enter image description here

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey,
        child: Stack(
          children: [
            Center(
              child: FlutterLogo(
                size: 800,
              ),
            ),
            Container(
              child: Center(
                child: CustomPaint(
                  painter: BorderPainter(),
                  child: Container(
                    width: BarReaderSize.width,
                    height: BarReaderSize.height,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class BorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final width = 3.0;
    final radius = 20.0;
    final tRadius = 2 * radius;
    final rect = Rect.fromLTWH(
      width,
      width,
      size.width - 2 * width,
      size.height - 2 * width,
    );
    final rrect = RRect.fromRectAndRadius(rect, Radius.circular(radius));
    final clippingRect0 = Rect.fromLTWH(
      0,
      0,
      tRadius,
      tRadius,
    );
    final clippingRect1 = Rect.fromLTWH(
      size.width - tRadius,
      0,
      tRadius,
      tRadius,
    );
    final clippingRect2 = Rect.fromLTWH(
      0,
      size.height - tRadius,
      tRadius,
      tRadius,
    );
    final clippingRect3 = Rect.fromLTWH(
      size.width - tRadius,
      size.height - tRadius,
      tRadius,
      tRadius,
    );

    final path = Path()
      ..addRect(clippingRect0)
      ..addRect(clippingRect1)
      ..addRect(clippingRect2)
      ..addRect(clippingRect3);

    canvas.clipPath(path);
    canvas.drawRRect(
      rrect,
      Paint()
        ..color = Colors.white
        ..style = PaintingStyle.stroke
        ..strokeWidth = width,
    );
  }

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

class BarReaderSize {
  static double width = 200;
  static double height = 200;
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

脚本型数组初始化

2022-9-9 4:46:21

未分类

有没有办法在javascript中复制一个对象数组?

2022-9-9 4:57:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索