自定义形状上的动态数据

Question

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

Answer 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,
            ),
          ),
        ),
      ),
    );
  }
}

这里输出