颤振CustomPainter级电池液位指示器倒置图

Question

我有这个代码来绘制电池的水平，但它是从上到下绘制内部彩色指示器。它应该像你在所有Android手机上看到的那样，把它从底部画到顶部。对我做错了什么有什么想法吗？

class BatteryLevelPainter extends CustomPainter {
  final int _batteryLevel;
  final BatteryState _batteryState;

  BatteryLevelPainter(this._batteryLevel, this._batteryState);

  @override
  void paint(Canvas canvas, Size size) {
    Paint getPaint({Color color = Colors.black, PaintingStyle style = PaintingStyle.stroke}) {
      return Paint()
        ..color = color
        ..strokeWidth = 1.0
        ..style = style;
    }

    final RRect batteryOutline = RRect.fromLTRBR(0.0, 0.0, size.width, size.height, const Radius.circular(2.0));

    // Battery body
    canvas.drawRRect(
      batteryOutline,
      getPaint(),
    );

    // Battery nub
    canvas.drawRect(
      const Rect.fromLTWH(4.0, -3.0, 4.0, 3.0),
      getPaint(style: PaintingStyle.fill),
    );

    // Fill rect
    canvas.clipRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height * (_batteryLevel / 100)));

    Color indicatorColor;

    if (_batteryLevel < 15) {
      indicatorColor = Colors.red;
    } else if (_batteryLevel < 30) {
      indicatorColor = Colors.orange;
    } else {
      indicatorColor = Colors.green;
    }

    canvas.drawRRect(
      RRect.fromLTRBR(0.5, 0.5, size.width - 0.5, size.height - 0.5, const Radius.circular(2.0)),
      getPaint(style: PaintingStyle.fill, color: indicatorColor),
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    final BatteryLevelPainter old = oldDelegate as BatteryLevelPainter;

    return old._batteryLevel != _batteryLevel || old._batteryState != _batteryState;
  }
}

​

​

Answer 1

使用Rect.fromLTRB()而不是Rect.fromLTWH()。或者您可以使用Rect.fromCircle()、Rect.fromCenter()或Rect.fromPoints()。正向级

增加这一行：

canvas.translate(0.0, (size.height - size.height * (_batteryLevel / 100)));

完整的代码：

class BatteryLevelPainter extends CustomPainter {
  final int _batteryLevel;
  final BatteryState _batteryState;

  BatteryLevelPainter(this._batteryLevel, this._batteryState);

  @override
  void paint(Canvas canvas, Size size) {
    Paint getPaint({Color color = Colors.black, PaintingStyle style = PaintingStyle.stroke}) {
      return Paint()
        ..color = color
        ..strokeWidth = 1.0
        ..style = style;
    }

    final RRect batteryOutline = RRect.fromLTRBR(0.0, 0.0, size.width, size.height, const Radius.circular(2.0));

    // Battery body
    canvas.drawRRect(
      batteryOutline,
      getPaint(),
    );

     canvas.translate(0.0, (size.height - size.height * (_batteryLevel / 100))); // add this line

    // Battery nub
    canvas.drawRect(
      const Rect.fromLTWH(4.0, -3.0, 4.0, 3.0),
      getPaint(style: PaintingStyle.fill),
    );

    // Fill rect
    canvas.clipRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height * (_batteryLevel / 100)));

    Color indicatorColor;

    if (_batteryLevel < 15) {
      indicatorColor = Colors.red;
    } else if (_batteryLevel < 30) {
      indicatorColor = Colors.orange;
    } else {
      indicatorColor = Colors.green;
    }

    canvas.drawRRect(
      RRect.fromLTRBR(0.5, 0.5, size.width - 0.5, size.height - 0.5, const Radius.circular(2.0)),
      getPaint(style: PaintingStyle.fill, color: indicatorColor),
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    final BatteryLevelPainter old = oldDelegate as BatteryLevelPainter;

    return old._batteryLevel != _batteryLevel || old._batteryState != _batteryState;
  }
}