Flutter简要自定义View

179 阅读1分钟
// 基于CustomPainter
import 'package:flutter/material.dart';

void main() => runApp(new LogoApp());

class LogoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xddffffff),
        body: CustomPaint(painter: MyCustomPainter()),
      ),
    );
  }
}
class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint();
    paint.color = Color(0xffff0000);
    canvas.drawCircle(Offset(20, 20), 15, paint);
    
    TextPainter textPainter = TextPainter(
        textDirection: TextDirection.ltr,
        maxLines: 1,
        text: TextSpan(
            text: "hello flutter",
            style: new TextStyle(
              color: Colors.black,
              fontSize: 10.0,
            )));
    textPainter.layout(
      minWidth: 0,
      maxWidth: 500,
    );
    textPainter.paint(canvas, Offset(50, 200));
  }

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

}

// 基于RenderBox
class TestRenderBoxWidget extends SingleChildRenderObjectWidget {
  @override
  RenderObject createRenderObject(BuildContext context) {
    return TestRenderBox();
  }
}

class TestRenderBox extends RenderBox {
  @override
  void performLayout() {
//    super.performLayout(); //如果保留会报错
    size = Size(100, 100);
  }

  @override
  void performResize() {
    super.performResize();
  }

  BoxPainter _painter;

  @override
  void paint(PaintingContext context, Offset offset) {
    _painter ??= BoxDecoration(color: Color(0xffff0000))
        .createBoxPainter(markNeedsPaint);
    final ImageConfiguration filledConfiguration =
        ImageConfiguration().copyWith(size: size);
    _painter.paint(context.canvas, offset, filledConfiguration);
  }
}