flutter聊天界面-消息气泡展示实现Flexible

news2024/11/15 17:34:04

flutter聊天界面-消息气泡展示实现Flexible
在之前实现了flutter聊天界面的更多操作展示，消息气泡展示实现Flexible，

在这里插入图片描述

一、Flexible

Flexible可以帮助Row、Column、Flex的子控件充满父控件，它的用法很灵活，也具有权重的属性。跟Flexible相类似的控件还有Expanded。

Flexible

const Flexible({
    /// key
    Key key,
    // 默认 flex 的值为 1
    this.flex = 1,
    /// 默认 fit参数为 FlexFit.loose 表示子控件可以以最小的大小来布局
    this.fit = FlexFit.loose,
    @required Widget child,
})

Flexible与Expanded

Expanded继承于Flexible，Flexible与Expanded的相同点是都必须使用在Row、Column、Flex其中。

不同之处
Flexible组件不强制子组件填充可用空间：Flexible不会强制填充。
Expanded组件强制子组件填充可用空间：Expanded会强制填充剩余留白空间，

二、实现聊天界面消息气泡展示

实现消息气泡的箭头效果，这里使用的是CustomPainter，通过Canvas绘制各种自定义图形。在Flutter中，提供了一个CustomPaint 组件，它可以结合画笔CustomPainter来实现自定义图形绘制。

具体代码如下

class CustomShape extends CustomPainter {
  final Color bgColor;

  CustomShape(this.bgColor);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = bgColor;

    var path = Path();
    path.lineTo(-5, 0);
    path.lineTo(0, 10);
    path.lineTo(5, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

聊天气泡Bubble实现

class ReceivedMessageScreen extends StatelessWidget {
  const ReceivedMessageScreen({
    Key? key,
    required this.child,
    this.color,
    this.padding,
    required this.messageScreenKey,
  }) : super(key: key);

  final Widget child;
  final Color? color;
  final EdgeInsetsGeometry? padding;
  final GlobalKey messageScreenKey;

  @override
  Widget build(BuildContext context) {
    final messageTextGroup = Flexible(
        child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Transform(
        //   alignment: Alignment.center,
        //   transform: Matrix4.rotationY(math.pi),
        //   child: CustomPaint(
        //     painter: CustomShape(Colors.grey[300]!),
        //   ),
        // ),
        Flexible(
          child: Container(
            margin: padding ?? EdgeInsets.all(0.0),
            decoration: BoxDecoration(
              color: color ?? Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(8),
                topLeft: Radius.circular(8),
                bottomLeft: Radius.circular(8),
                bottomRight: Radius.circular(8),
              ),
            ),
            child: Container(
              child: child,
              key: messageScreenKey,
            ),
          ),
        ),
      ],
    ));

    return Padding(
      padding: EdgeInsets.only(right: 60.0, left: 60.0, top: 0.0, bottom: 10.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(height: 60.0),
          messageTextGroup,
        ],
      ),
    );
  }
}