如何在扑朔迷离中赋予“虚假边界”?

如何在扑朔迷离中赋予“虚假边界”?,第1张

如何在扑朔迷离中赋予“虚假边界”?

图片

使用此组件

import 'dart:math';import 'package:flutter/material.dart';class CircularBorder extends StatelessWidget {  final Color color;  final double size;  final double width;  final Widget icon;  const CircularBorder({Key key, this.color = Colors.blue, this.size = 70, this.width = 7.0, this.icon}) : super(key: key);  @override  Widget build(BuildContext context) {    return Container(      height: size,      width: size,      alignment: Alignment.center,      child: Stack(        alignment: Alignment.center,        children: <Widget>[          icon == null ? Container() : icon,          CustomPaint( size: Size(size, size), foregroundPainter: new MyPainter(     completeColor: color,     width: width),          ),        ],      ),    );  }}class MyPainter extends CustomPainter {  Color lineColor =  Colors.transparent;  Color completeColor;  double width;  MyPainter(      { this.completeColor, this.width});  @override  void paint(Canvas canvas, Size size) {    Paint complete = new Paint()      ..color = completeColor      ..strokeCap = StrokeCap.round      ..style = PaintingStyle.stroke      ..strokeWidth = width;    Offset center = new Offset(size.width / 2, size.height / 2);    double radius = min(size.width / 2, size.height / 2);    var percent = (size.width *0.001) / 2;    double arcAngle = 2 * pi * percent;    print("$radius - radius");    print("$arcAngle - arcAngle");    print("${radius / arcAngle} - divider");    for (var i = 0; i < 8; i++) {      var init = (-pi / 2)*(i/2);      canvas.drawArc(new Rect.fromCircle(center: center, radius: radius),          init, arcAngle, false, complete);    }  }  @override  bool shouldRepaint(CustomPainter oldDelegate) {    return true;  }}

使用:

CircularBorder(          width: 6,          size: 55,          color: Colors.grey,          icon: Icon(Icons.access_alarm, color: Colors.grey),        ),


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5051944.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-15
下一篇 2022-11-15

发表评论

登录后才能评论

评论列表(0条)

保存