如何用Flutter实现带按钮位置三角形的浮层？

可以通过Stack组合浮层主体和自定义三角形的方式实现这种效果，以下是两种实用的实现方案：

方案一：使用CustomPaint绘制三角形（推荐） #

这种方式更直观，便于调整三角形的大小和样式：

import 'package:flutter/material.dart';

// 自定义三角形绘制器
class TrianglePainter extends CustomPainter {
  final Color color;

  const TrianglePainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    // 绘制朝下的三角形路径
    final path = Path()
      ..moveTo(size.width / 2, 0)
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return (oldDelegate as TrianglePainter).color != color;
  }
}

// 完整浮层组件
class TriangleOverlay extends StatelessWidget {
  final double triangleCenterOffsetX; // 三角形中心相对于浮层左侧的偏移量

  const TriangleOverlay({super.key, required this.triangleCenterOffsetX});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        // 浮层主体
        Container(
          margin: const EdgeInsets.only(bottom: 8), // 给三角形留出空间
          padding: const EdgeInsets.all(16),
          width: 200,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            boxShadow: const [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 6,
                offset: Offset(0, 2),
              )
            ],
          ),
          child: const Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("浮层标题"),
              SizedBox(height: 12),
              Text("这里是浮层的具体内容"),
            ],
          ),
        ),
        // 底部对齐的三角形
        Positioned(
          left: triangleCenterOffsetX - 8, // 三角形宽度16，偏移量减8让中心对齐
          child: CustomPaint(
            size: const Size(16, 8),
            painter: const TrianglePainter(color: Colors.white),
          ),
        ),
      ],
    );
  }
}

// 使用示例
class OverlayDemo extends StatelessWidget {
  const OverlayDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              barrierColor: Colors.black12,
              builder: (ctx) {
                // 获取触发按钮的位置，计算三角形的偏移量
                final RenderBox buttonBox = context.findRenderObject() as RenderBox;
                final Offset buttonPos = buttonBox.localToGlobal(Offset.zero);
                final double buttonCenterX = buttonPos.dx + buttonBox.size.width / 2;
                final double overlayLeft = (MediaQuery.of(ctx).size.width - 200) / 2;
                final double triangleOffset = buttonCenterX - overlayLeft;

                return Stack(
                  children: [
                    GestureDetector(
                      onTap: () => Navigator.pop(ctx),
                      child: Container(color: Colors.transparent),
                    ),
                    Positioned(
                      top: buttonPos.dy - 130, // 浮层在按钮上方的位置
                      left: overlayLeft,
                      child: TriangleOverlay(triangleCenterOffsetX: triangleOffset),
                    ),
                  ],
                );
              },
            );
          },
          child: const Text("点击显示浮层"),
        ),
      ),
    );
  }
}

方案二：通过Transform旋转容器实现三角形 #

如果不想自定义绘制，也可以用容器旋转组合出三角形：

class TriangleOverlay extends StatelessWidget {
  final double triangleOffsetX;

  const TriangleOverlay({super.key, required this.triangleOffsetX});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Container(
          margin: const EdgeInsets.only(bottom: 8),
          padding: const EdgeInsets.all(16),
          width: 200,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 6, offset: Offset(0,2))]
          ),
          child: const Column(
            mainAxisSize: MainAxisSize.min,
            children: [Text("浮层内容"), SizedBox(height:12), Text("更多选项")],
          ),
        ),
        Positioned(
          left: triangleOffsetX,
          child: Transform.rotate(
            angle: 3.14159, // 旋转180度让三角形朝下
            child: Container(
              width: 16,
              height: 16,
              color: Colors.white,
              clipBehavior: Clip.hardEdge,
              child: Transform.rotate(
                angle: -0.785398, // 旋转45度形成三角形
                child: const FractionallySizedBox(
                  widthFactor: 0.707, // 取正方形的一半区域
                  heightFactor: 0.707,
                  child: ColoredBox(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

两种方案都可以实现图中的效果，核心是通过Stack将三角形定位在浮层底部的对应按钮位置，通过计算按钮的坐标来确定三角形的偏移量，实现对齐效果。

内容的提问来源于stack exchange，提问作者kururu