如何实现如图所示的AppBar？支持非AppBar组件方案

你可以通过ClipPath结合CustomClipper来实现图中带有底部弧形的顶部栏，无需使用AppBar或SliverAppBar，以下是具体实现代码：

1. 定义自定义裁剪器 #

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角开始绘制路径
    path.lineTo(0, size.height);
    // 绘制底部弧形，通过控制点调整弧度
    path.quadraticBezierTo(
      size.width / 2,
      size.height - 30, // 此值控制凹陷深度，数值越小凹陷越明显
      size.width,
      size.height,
    );
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

2. 构建顶部栏组件 #

class CustomTopBar extends StatelessWidget {
  const CustomTopBar({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: ArcClipper(),
      child: Container(
        height: 80, // 控制顶部栏高度
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
        color: Colors.blue, // 替换为你需要的背景色
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // 左侧返回按钮
            IconButton(
              icon: const Icon(Icons.arrow_back, color: Colors.white),
              onPressed: () {},
            ),
            // 中间标题
            const Text(
              "页面标题",
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            // 右侧搜索按钮
            IconButton(
              icon: const Icon(Icons.search, color: Colors.white),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

可调整参数说明 #

• 弧形凹陷深度：修改ArcClipper中size.height - 30的数值，数值越小凹陷越明显
• 顶部栏高度：调整Container的height属性
• 样式自定义：替换背景色、内部按钮/标题内容，适配你的需求

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