Dynami c данные о пользовательских фигурах - PullRequest
Новая
       60

Dynami c данные о пользовательских фигурах

2 голосов
/ 22 марта 2020

Я хочу создать приложение, в котором для одного из моих проектов я хотел бы заполнить фигуры динамическими данными c. Это будут пользовательские фигуры, где у меня есть две разные фигуры, и они чередуются одна под другой. Итак, у меня есть левая форма, а затем следующая будет правильной формы и так далее. Можно ли это создать во Флаттере и как мне это сделать?

enter image description here

1 Ответ

1 голос
/ 27 марта 2020

Вот один из способов сделать это. Я упростил форму с помощью своей пользовательской формы треугольника, созданной с помощью CustomPainter, поэтому вам придется изменить ее в соответствии со своими потребностями. 

ListView(
      children: <Widget>[
        OverflowTitle(color: Colors.green),
        OverflowTitle(color: Colors.blue),
        OverflowTitle(color: Colors.red)
      ],
    );

и пользовательский заголовок переполнения 

class OverflowTitle extends StatelessWidget {
  final Color color;

  const OverflowTitle({this.color});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 50,
      child: OverflowBox(
        alignment: Alignment.bottomCenter,
        minHeight: 50,
        maxHeight: 70,
        child: Container(
          height: 60,
          child: CustomPaint(
            painter: TrianglePainter(
              strokeColor: color,
            ),
            child: Text(
              'NO1',
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

Вот вывод

enter image description here

Дайте мне знать, если вам нужна дополнительная помощь с этим ...

ОБНОВЛЕНИЕ, вот мой пользовательский художник-треугольник 

import 'package:flutter/material.dart';

enum Direction { Up, Down, Left, Right }

class TrianglePainter extends CustomPainter {
  final Color strokeColor;
  final Direction direction;

  TrianglePainter({this.strokeColor = Colors.white, this.direction});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = strokeColor
      ..style = PaintingStyle.fill;

    canvas.drawPath(getTrianglePath(size.width, size.height), paint);
  }

  Path getTrianglePath(double x, double y) {
    if (direction == Direction.Right) {
      return Path()
        ..moveTo(0, y)
        ..lineTo(x, y / 2)
        ..lineTo(0, 0)
        ..lineTo(0, y);
    } else if (direction == Direction.Left) {
      return Path()
        ..moveTo(x, 0)
        ..lineTo(0, y / 2)
        ..lineTo(x, y)
        ..lineTo(x, 0);
    } else if (direction == Direction.Down) {
      return Path()
        ..moveTo(0, 0)
        ..lineTo(x / 2, y)
        ..lineTo(x, 0)
        ..lineTo(0, 0);
    } else {
      return Path()
        ..moveTo(0, y)
        ..lineTo(x / 2, 0)
        ..lineTo(x, y)
        ..lineTo(0, y);
    }
  }

  @override
  bool shouldRepaint(TrianglePainter oldDelegate) {
    return oldDelegate.strokeColor != strokeColor;
  }
}
...