lulululuding / weather-demo Goto Github PK

import 'dart:ui';

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  GlobalKey globalKey = GlobalKey();

  Offset clickOffset = null;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        margin: EdgeInsets.only(left: 10, top: 10, right: 10),
        child: GestureDetector(
          onTapDown: (down) {
            RenderBox renderBox = globalKey.currentContext.findRenderObject();

            final Offset localOffset =
                renderBox.globalToLocal(down.globalPosition);

            setState(() {
              clickOffset = Offset(localOffset.dx - 10, localOffset.dy - 10);
            });
          },
          child: CustomPaint(
            key: globalKey,
            size: Size(MediaQuery.of(context).size.width - 20, 300),
            painter: WeatherPainter(clickOffset: clickOffset),
          ),
        ),
      ),
    );
  }
}

class WeatherPainter extends CustomPainter {
  Offset clickOffset = null;

  WeatherPainter({this.clickOffset});

  List<Weather> weathers = [
    Weather(low_tempture: 5, high_tempture: 24),
    Weather(low_tempture: 4, high_tempture: 18),
    Weather(low_tempture: 3, high_tempture: 20),
    Weather(low_tempture: 5, high_tempture: 24),
    Weather(low_tempture: 7, high_tempture: 23),
    Weather(low_tempture: 5, high_tempture: 19),
    Weather(low_tempture: 3, high_tempture: 23),
    Weather(low_tempture: 4, high_tempture: 24),
    Weather(low_tempture: 6, high_tempture: 22),
  ];

  @override
  void paint(Canvas canvas, Size size) {
    //绘制y轴坐标系
    double offset = 20;
    double height = 250;
    double high_tempture = 40;

    canvas.drawLine(
        Offset(offset, offset),
        Offset(offset, height),
        Paint()
          ..color = Colors.black
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1);

    //绘制x轴坐标系

    canvas.drawLine(
        Offset(offset, height),
        Offset(size.width, height),
        Paint()
          ..color = Colors.black
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1);

    //绘制三角形

    Path yPath = Path();
    yPath.moveTo(offset, offset / 2);
    yPath.lineTo(offset + offset / 2, offset);
    yPath.lineTo(offset / 2, offset);
    yPath.close();

    canvas.drawPath(
        yPath,
        Paint()
          ..color = Colors.black
          ..style = PaintingStyle.fill);

    //绘制三角形

    Path xPath = Path();
    xPath.moveTo(size.width, height);
    xPath.lineTo(size.width - offset / 2, height + offset / 2);
    xPath.lineTo(size.width - offset / 2, height - offset / 2);
    xPath.close();

    canvas.drawPath(
        xPath,
        Paint()
          ..color = Colors.black
          ..style = PaintingStyle.fill);

    Path path_low = Path();
    Path path_high = Path();

    for (int i = 0; i < weathers.length; i++) {
      Weather weather = weathers[i];

      double x_low = size.width * 0.9 / weathers.length * (i + 1);
      double x_high = size.width * 0.9 / weathers.length * (i + 1);

      double y_low = height - weather.low_tempture * (height / high_tempture);
      double y_high = height - weather.high_tempture * (height / high_tempture);

      if (i == 0) {
        path_low.moveTo(x_low, y_low);
        path_high.moveTo(x_high, y_high);
      } else {
        path_low.lineTo(x_low, y_low);
        path_high.lineTo(x_high, y_high);
      }

      canvas.drawCircle(Offset(x_low, y_low), 3, Paint()..color = Colors.black);
      canvas.drawCircle(
          Offset(x_high, y_high), 3, Paint()..color = Colors.black);

      //点击事件命中测试
      bool low_hited = false;
      bool high_hited = false;
      if (clickOffset != null) {
        double dx = clickOffset.dx;
        double dy = clickOffset.dy;

        if ((dx - x_low).abs() < 15 && (dy - y_low).abs() < 15) {
          low_hited = true;
          canvas.drawCircle(
              Offset(x_low, y_low), 6, Paint()..color = Colors.black);
        } else {
          low_hited = false;
        }

        if ((dx - x_high).abs() < 15 && (dy - y_high).abs() < 15) {
          high_hited = true;
          canvas.drawCircle(
              Offset(x_high, y_high), 6, Paint()..color = Colors.black);
        } else {
          high_hited = false;
        }
      }

      //绘制文字

      var paint = TextPainter(
        text: TextSpan(
            text: weather.low_tempture.toString(),
            style: TextStyle(
              color: Colors.black,
              fontSize: low_hited ? 16 : 10,
            )),
        textAlign: TextAlign.left,
        textDirection: TextDirection.ltr,
      );
      paint.layout();

      Offset low_offset = Offset(
          x_low - paint.width / 2, y_low - paint.height - paint.height / 2);

      paint.paint(canvas, low_offset);

      var paint_high = TextPainter(
        text: TextSpan(
            text: weather.high_tempture.toString(),
            style: TextStyle(
              color: Colors.black,
              fontSize: high_hited ? 16 : 10,
            )),
        textAlign: TextAlign.left,
        textDirection: TextDirection.ltr,
      );
      paint_high.layout();

      Offset high_offset = Offset(x_high - paint_high.width / 2,
          y_high - paint_high.height - paint_high.height / 2);

      paint_high.paint(canvas, high_offset);
    }

    canvas.drawPath(
        path_low,
        Paint()
          ..color = Colors.black
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1);
    canvas.drawPath(
        path_high,
        Paint()
          ..color = Colors.black
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

class Weather {
  int low_tempture = 0;
  int high_tempture;

  Weather({this.low_tempture = 0, this.high_tempture = 40});
}