Flutter中如何自定义塑造AppBar为指定设计图所示样式？

可以实现你要的样式，以下是两种常用的实现方案：

方案1：使用AppBar自带shape属性（最简方案） #

Flutter原生AppBar的shape参数支持自定义外形，直接配置对应边框即可实现底部弧形效果，示例代码如下：

Scaffold(
  appBar: AppBar(
    title: const Text("示例页面"),
    backgroundColor: Colors.blue,
    // 核心配置：调整底部圆角数值即可匹配你要的弧度
    shape: const ContinuousRectangleBorder(
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(30),
        bottomRight: Radius.circular(30),
      ),
    ),
  ),
  body: const Center(child: Text("页面内容区域")),
)

如果默认的圆角样式不符合需求，你也可以自定义ShapeBorder实现更特殊的曲线效果：

class CustomAppBarShape extends ShapeBorder {
  final double radius;
  const CustomAppBarShape({required this.radius});

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.only(bottom: radius);

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) => Path();

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    Path path = Path();
    path.lineTo(0, rect.height - radius);
    path.quadraticBezierTo(0, rect.height, radius, rect.height);
    path.lineTo(rect.width - radius, rect.height);
    path.quadraticBezierTo(rect.width, rect.height, rect.width, rect.height - radius);
    path.lineTo(rect.width, 0);
    path.close();
    return path;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}

  @override
  ShapeBorder scale(double t) => CustomAppBarShape(radius: radius * t);
}

使用时直接将自定义的CustomAppBarShape赋值给AppBar的shape参数即可。

方案2：完全自定义AppBar（最高自由度） #

如果需要在AppBar内添加更多自定义布局元素，也可以通过实现PreferredSizeWidget自定义整个AppBar：

class CustomAppBar extends PreferredSizeWidget {
  final String title;
  const CustomAppBar({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      padding: const EdgeInsets.symmetric(horizontal: 8),
      decoration: const BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(30),
          bottomRight: Radius.circular(30),
        ),
      ),
      child: Row(
        children: [
          IconButton(
            icon: const Icon(Icons.arrow_back, color: Colors.white),
            onPressed: () => Navigator.pop(context),
          ),
          Expanded(
            child: Text(
              title,
              style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w500),
            ),
          ),
          IconButton(
            icon: const Icon(Icons.search, color: Colors.white),
            onPressed: () {},
          )
        ],
      ),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

使用时直接将CustomAppBar赋值给Scaffold的appBar参数即可。

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