我想构建一个应用程序,我想在其中一个设计中使用动态数据填充形状。这些将是自定义形状,其中我有两种不同的形状,它们在另一个下方交替出现。所以我有一个左边的形状,然后下一个是右边的形状,依此类推。是否可以在 Flutter 中创建它,我该怎么做?
问问题
143 次
1 回答
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;
}
}
于 2020-03-27T11:34:05.073 回答