Flutter自定义AppBar实现：左侧返回键右侧信息分享按钮如何制作？

你可以直接利用Flutter原生AppBar组件自带的leading和actions属性快速实现需求，无需引入第三方依赖，示例代码如下：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 自定义AppBar部分
      appBar: AppBar(
        // 可根据设计稿调整背景色
        backgroundColor: Colors.white,
        // 不需要底部阴影可设为0
        elevation: 0,
        // 左侧返回按钮
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Colors.black87, size: 20),
          onPressed: () => Navigator.pop(context),
        ),
        // 右侧图标组，按顺序排列即可
        actions: [
          // 信息图标
          IconButton(
            icon: const Icon(Icons.info_outline, color: Colors.black87, size: 22),
            onPressed: () {
              // 补充信息图标点击逻辑
            },
          ),
          // 分享图标
          IconButton(
            icon: const Icon(Icons.share, color: Colors.black87, size: 22),
            onPressed: () {
              // 补充分享按钮点击逻辑
            },
          ),
          // 可根据需求继续追加右侧控件
          const SizedBox(width: 8) // 调整最右侧边距
        ],
        // 如果需要居中标题可添加对应属性
        // centerTitle: true,
        // title: const Text("页面标题", style: TextStyle(color: Colors.black87, fontSize: 16)),
      ),
      // 页面主体内容
      body: const Center(child: Text("页面内容")),
    );
  }
}

样式调整说明 #

• 如果系统自带的图标不符合设计要求，可以替换Icon组件为自定义图片组件
• 图标间距、大小可通过size属性、Padding组件自行调整
• 不需要默认的点击水波纹效果的话，可以把IconButton替换为GestureDetector自定义点击交互

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