在 Flutter CustomPainter 中倒置的电池电量指示器 Class

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()。 Rect class

添加这一行：

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;
  }
}

在 Flutter CustomPainter 中倒置的电池电量指示器 Class

Battery level indicator drawing upside down in Flutter CustomPainter Class

dart

flutter

flutter-custompainter