在同一个小部件上使用边框和边框半径

Posted 2023-03-28

【中文标题】在同一个小部件上使用边框和边框半径

【英文标题】：Use border and border radius on the same widget

【发布时间】：2020-10-10 20:39:53

【问题描述】：

大家我怎么能像这个图标的边框一样颤动 我只需要为左侧、底部和顶部设置颜色 我听到有人谈论 customPainter，但我不知道如何使用请帮助我： enter image description here

这是我的代码：

Container(      
   decoration:BoxDecoration(
    shape: BoxShape.circle,
     border: new Border(
      left: BorderSide(
      color: Theme.of(context).primaryColor,
      width: 2,),
      right: BorderSide(
      color: Theme.of(context).primaryColor,
      width: 2,),
      bottom: BorderSide( color: Theme.of(context).primaryColor,
      width: 2,),
      top: BorderSide(color: Theme.of(context).primaryColor,
      width: 2,),),
       ) ,
      child:ClipOval(
      child: Image.asset('images/imageout1.png',width: 85,), 
                                                ))

【参考方案1】：

如您所说，您可以使用CustomPainter。关键是drawArc的使用

在您的小部件构建方法中的某处返回它

CustomPaint(
    size: Size.square(100),
    painter: CirclePainter(),
)

创建CirclePainter

class CirclePainter extends CustomPainter 
  @override
  void paint(Canvas canvas, Size size) 
    Paint innerLine = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0;

    Paint outerLine = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.stroke
      ..strokeWidth = 3.0;

    canvas.drawArc(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 2),
        0, 2 * pi, false, innerLine);

    canvas.drawArc(
        Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: (size.width + 12) / 2),
        1.9 * pi,
        1.2 * pi,
        false,
        outerLine);
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;

结果