我们用这种代码制作了箭头。然而,空间是不可避免地产生的。我们如何放置小部件而不产生空间?箭头的尖端不可避免地在它和主体之间产生空间。
class Line extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Align(
alignment: Alignment.bottomRight,
child: Transform.rotate(
angle: pi / 4,
child: Container(
width: 16,
height: 1,
color: Colors.white,
),
),
),
const Divider(color: Colors.white),
Align(
alignment: Alignment.bottomRight,
child: Transform.rotate(
angle: -pi / 4,
child: Container(
width: 16,
height: 1,
color: Colors.white,
),
),
),
],
),
);
}
}
字符串
的数据
3条答案
按热度按时间0yg35tkg1#
您可以使用
Transform.translate
小部件来移动上下角线。下面是实现所需输出的工作代码:字符串
https://i.stack.imgur.com/SNPwa.png
2w2cym1i2#
字符串
hrirmatl3#
我认为你应该使用
CustomPainter
来画一个箭头。为了使你的任务变得简单,我在下面添加了可以帮助你的代码。我们将使用以下坐标绘制一个箭头:
的数据
要绘制上面的图像,我们将使用
CustomPainter
创建一个ArrowPainter字符串
创建一个ArrowWidget:
型
现在你可以在代码中的任何地方使用ArrowWidget。
注意:我使用宽度=高度来绘制箭头。你可以根据你的要求改变上面的代码。也可以为所需的类导入。