美文网首页
flutter自定义视图

flutter自定义视图

作者: liboxiang | 来源:发表于2019-06-19 16:53 被阅读0次

    CustomPaint

    CustomPaint(
                // painter: MyPainter(),
                foregroundPainter: MyPainter(),
                child: Text('hello customPaint'),
              )
    
    class MyPainter extends CustomPainter {
      @override
      void paint(Canvas canvas, Size size) {
        Paint paint = Paint()
        ..isAntiAlias = true
        ..style = PaintingStyle.stroke
        ..strokeWidth = 5
        ..color = Colors.green;
        canvas.drawRect(Offset.zero & Size(100, 100), paint);
        canvas.drawArc(Offset(10, 10) & Size(40, 40), 3, 3, true, paint);
      }
    
      @override
      bool shouldRepaint(CustomPainter oldDelegate) {
        // TODO: implement shouldRepaint
        return false;
      }
    }
    

    RenderBox

    建议使用CustomPaint,CustomPaint内部其实就是对RenderBox做了封装

    class CircleView extends SingleChildRenderObjectWidget{
      @override
      RenderObject createRenderObject(BuildContext context) {
        return RenderCircle();
      }
    }
    
    class RenderCircle extends RenderBox{
      Paint _paint;
      Path _path;
      
      RenderCircle(){
        _paint = Paint();
        _paint.isAntiAlias = true;
        _paint.style = PaintingStyle.fill;
        _path = Path();
      }
    
      @override
      void performLayout() {
    
      }
    
      @override
      void paint(PaintingContext context, Offset offset) {
        var canvas = context.canvas;
        //通过canvas绘制
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter自定义视图

          本文链接:https://www.haomeiwen.com/subject/jgmkqctx.html