如何使用自定义画家在 Flutter 中为容器绘制尾端

问题描述

我有一个聊天屏幕，里面有像这样尾端的 chatItem 框

需要在接收方和发送方以及 我目前正在使用自定义画家。并且无法弄清楚这一点。

`class CustomChatBubble extends CustomPainter {CustomChatBubble({this.color,@required this.isOwn});
final Color color;
final bool isOwn;

@override
void paint(Canvas canvas,Size size) {
final paint = Paint()..color = color ?? Colors.blue;

Path paintBubbleTail() {
  Path path;
  if (!isOwn) {
    path = Path()
      ..moveto(0,size.height)
      ..relativeMoveto(0,5)
      ..quadraticBezierTo(10,size.height,size.height - 5);
  }
  if (isOwn) {
    path = Path()
      ..moveto(0,size.height - 5);
  }
  return path;
}

final RRect bubbleBody = RRect.fromrectAndRadius(
    Rect.fromLTWH(0,size.width,size.height),Radius.circular(16));
final Path bubbleTail = paintBubbleTail();

canvas.drawRRect(bubbleBody,paint);
canvas.drawPath(bubbleTail,paint);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
// Todo: implement shouldRepaint
return true;
}
}`

这是我以前做的课 isOwn 用于在发送方和接收方之间切换

解决方法

你用这个包怎么样？
该包中有许多聊天气泡小部件。
flutter_chat_bubble

,

这是您案例的路径：

    
class CustomChatBubble extends CustomPainter {
  CustomChatBubble({this.color,@required this.isOwn});
  final Color color;
  final bool isOwn;

  @override
  void paint(Canvas canvas,Size size) {
    final paint = Paint()
      ..color = color ?? Colors.blue
      ..style = PaintingStyle.fill;

    Path path;
    double triangleHeight = 10.0;
    double triangleWidth = 10.0;
    double roundedBorder = 5.0;

    Path drawBubbleBody() {
      if (!isOwn) {
        path = Path()
          ..lineTo(0,size.height)
          ..lineTo(triangleWidth,size.height - triangleHeight)
          ..lineTo(size.width - roundedBorder,size.height - triangleHeight)
          ..quadraticBezierTo(size.width,size.height - triangleHeight,size.width,size.height - triangleHeight - roundedBorder)
          ..lineTo(size.width,roundedBorder)
          ..quadraticBezierTo(size.width,size.width - roundedBorder,0);
        path.close();
      }
      if (isOwn) {
        path = Path()
          ..moveTo(size.width - roundedBorder,0)
          ..lineTo(roundedBorder,0)
          ..quadraticBezierTo(0,roundedBorder)
          ..lineTo(0,size.height - triangleHeight - roundedBorder)
          ..quadraticBezierTo(0,roundedBorder,size.height - triangleHeight)
          ..lineTo(size.width - triangleWidth,size.height - triangleHeight)
          ..lineTo(size.width,size.height)
          ..lineTo(size.width,0);
      }
      return path;
    }

    canvas.drawPath(drawBubbleBody(),paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
    return true;
  }
}

如果您想重现：

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),),body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,children: [
              CustomPaint(
                painter: CustomChatBubble(isOwn: true,color: Colors.grey),child: Container(
                  width: 200,height: 50,CustomPaint(
                painter: CustomChatBubble(isOwn: false,color: Colors.orange),)
            ],);
  }
}

结果：