如何在Flutter中实现如图所示的自定义App Bar？

根据你提供的UI示例，这类定制化App Bar可以通过以下方式实现：

通用实现思路 #

• 用自定义布局替代系统默认App Bar，灵活控制标题、图标、操作按钮等元素的位置与样式
• 按需调整背景效果（渐变、圆角、阴影等）
• 适配不同平台的状态栏高度与样式

Flutter 实现示例 #

AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0,
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.lightBlue],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
      ),
    ),
    child: Padding(
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top, left: 16, right: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Icon(Icons.menu, color: Colors.white),
          Text("自定义标题", style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
          Icon(Icons.search, color: Colors.white),
        ],
      ),
    ),
  ),
)

Android（Jetpack Compose）实现示例 #

TopAppBar(
    title = { Text("自定义标题", color = Color.White) },
    navigationIcon = { Icon(Icons.Menu, contentDescription = "菜单", tint = Color.White) },
    actions = { Icon(Icons.Search, contentDescription = "搜索", tint = Color.White) },
    colors = TopAppBarDefaults.topAppBarColors(
        containerColor = Color.Transparent
    ),
    elevation = 0.dp,
    modifier = Modifier
        .background(
            Brush.linearGradient(
                colors = listOf(Color.Blue, Color.LightBlue),
                start = Alignment.TopLeft,
                end = Alignment.BottomRight
            )
        )
        .clip(RoundedCornerShape(bottomStart = 20.dp, bottomEnd = 20.dp))
)

iOS（SwiftUI）实现示例 #

NavigationStack {
    Text("页面内容")
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Image(systemName: "line.3.horizontal")
                    .foregroundColor(.white)
            }
            ToolbarItem(placement: .principal) {
                Text("自定义标题")
                    .foregroundColor(.white)
                    .font(.headline)
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(.white)
            }
        }
        .toolbarBackground(
            LinearGradient(colors: [.blue, .lightBlue], startPoint: .topLeading, endPoint: .bottomTrailing),
            for: .navigationBar
        )
        .toolbarBackground(.visible, for: .navigationBar)
        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
}

如果你的需求更特殊（比如滚动联动、自定义交互控件等），可以补充说明以下细节：

• 目标开发平台
• App Bar的具体交互逻辑
• 实现过程中遇到的具体报错或布局问题

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