flutter - 如何在颤动中使用custompainter矩形内的位置行?
问题描述
[![想在矩形内放置 fb、twitter 图标][1]][1] [1]:https://i.stack.imgur.com/psDqQ.jpg
class _Frame1State extends State<Frame1> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(children: [
Container(
width: double.infinity,
height: containerHeight,
decoration: BoxDecoration(color: kcolorframe1BgColor),
),
Positioned(
top: 10,
right: 10,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill, image: AssetImage(kimageLoveImage))),
)),
Positioned(
bottom: 2,
height: bottomBaseHeight,
width: bottomBaseWidth,
child: CustomPaint(
size: Size.infinite,
painter: PathPainterLine(),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(
FontAwesomeIcons.facebook,
),
),
IconButton(
icon: Icon(
FontAwesomeIcons.twitter,
),
),
.
.
.
}
class PathPainterLine extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
Path path = Path();
path.moveTo(0, 0);
path.lineTo(2 * size.width / 3, 0);
path.moveTo(0, 0);
path.addRRect(RRect.fromRectXY(
Rect.fromLTRB(2 * size.width / 3, -10, size.width, 10), 10, 10));
canvas.drawPath(path, paint);
}
}
如何在颤动中使用custompainter矩形内的位置行?
如何在创建的自定义画家矩形内放置一行图标,CustomPaint 的子属性不起作用,因为它将 Row 移动到底部,请帮忙?
解决方案
你PathPainterLine
在画布之外作画:
1.修复你的PathPainterLine
:
class PathPainterLine extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
Path path = Path();
path.moveTo(0, size.height / 2);
path.lineTo(2 * size.width / 3, size.height / 2);
path.addRRect(RRect.fromRectXY(
Rect.fromLTRB(2 * size.width / 3, 0, size.width, size.height), 10, 10));
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
2. 合适的尺寸和位置Row
child: CustomPaint(
painter: PathPainterLine(),
child: Align(
alignment: Alignment.centerRight,
child: Container(
padding: EdgeInsets.symmetric(horizontal: frameWidth / 50),
width: frameWidth / 3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.train, size: 16),
Icon(Icons.flight, size: 16),
],
),
),
),
),
结果
推荐阅读
- python - mat1 dim 1 必须匹配 mat2 dim 0 -Pytorch
- node.js - 反应js将对象发送到节点js
- mongodb - 多个端口上的猫鼬
- c# - 如何从 TidyManaged C# 获取警告和错误消息 - HTML 解析
- python - 如何永久删除自动激活的 conda 环境?
- javascript - 无法使用 JS 将 Base 64 图像发送到 Woocommerce /product API
- read-the-docs - 如何将方程式编号放在 readthedocs 的右侧?
- mysql - mysql 最新的 Docker Desktop 3.3.0 (62916)
- powershell - 在 PowerShell 中检查打印机状态
- sql - 具有动态和静态列值的 SQL INSERT INTO TABLE