如何在颤振中使用custompainter矩形内的放置行？

Question

[![想在矩形内放置 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);
  }
}

如何在flutter中使用custompainter矩形内的放置行？

如何在创建的自定义画家矩形内放置图标行，CustomPaint 的子属性在将行移动到底部时不起作用，请帮助？

Answer 1

您的 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),
        ],
      ),
    ),
  ),
),

结果