自定义形状的动态数据

Posted 2023-02-23

【中文标题】自定义形状的动态数据

【英文标题】：Dynamic data on custom shapes

【发布时间】：2020-07-03 09:05:08

【问题描述】：

我想构建一个应用程序，我想在其中一个设计中使用动态数据填充形状。这些将是自定义形状，其中我有两种不同的形状，它们在另一个下方交替出现。所以我有一个左边的形状，然后下一个是右边的形状，依此类推。是否可以在 Flutter 中创建它，我该怎么做？

【问题讨论】：

你能添加一张你想做的图片或短片吗？

@JosteveAdekanbi 我刚刚用截图更新了我的问题

叠加层重要吗？

@JosteveAdekanbi 我更喜欢叠加层

@JosteveAdekanbi 谢谢，我认为不可能。

【参考方案1】：

这是一种方法。我使用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,
            ),
          ),
        ),
      ),
    );
  

这是输出

如果您需要更多帮助，请告诉我...

更新 这是我的自定义三角形画家

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;
  

【讨论】：

检查更新的答案..我已经添加了我的自定义trianglepainter类..您必须将其修改为您的形状