Flutter如何仅定义一次AppBar并在所有路由复用，避免代码重复？

嘿，作为Flutter新手，想要复用AppBar避免重复代码的想法太赞了！先帮你指出现有代码里的几个小问题：

• 你的main.dart里重复导入了PageOne.dart，记得删掉其中一个
• PageTwo.dart里的类名写错啦，应该是PageTwo而不是重复的PageOne，这个得先修正哦

接下来给你两种简单易上手的方案，帮你实现像PHP引入视图那样的组件复用：

方案一：自定义独立的可复用AppBar组件 #

这是最直接的方法，把共用的AppBar抽成一个单独的Widget，需要的地方直接引用即可，还能根据需求传参（比如自定义标题、控制返回按钮显示）。

第一步：创建自定义AppBar文件 #

新建custom_appbar.dart文件，写入以下代码：

import 'package:flutter/material.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final bool showBackButton;

  // 构造函数，标题必填，返回按钮默认显示
  const CustomAppBar({
    Key? key,
    required this.title,
    this.showBackButton = true,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      leading: showBackButton 
          ? IconButton(
              icon: const Icon(Icons.arrow_back),
              onPressed: () => Navigator.pop(context),
            )
          : null,
    );
  }

  // 必须实现preferredSize，保证AppBar高度符合规范
  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

第二步：在页面中引用自定义AppBar #

修改PageOne.dart：

import 'package:flutter/material.dart';
import '../custom_appbar.dart'; // 根据你的文件路径调整导入路径

class PageOne extends StatefulWidget {
  const PageOne({Key? key}) : super(key: key);

  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 直接使用自定义AppBar
      appBar: const CustomAppBar(title: 'Simple AppBar'),
      body: const Center(child: Text('页面一内容')),
    );
  }
}

修正后的PageTwo.dart：

import 'package:flutter/material.dart';
import '../custom_appbar.dart';

class PageTwo extends StatefulWidget {
  const PageTwo({Key? key}) : super(key: key);

  @override
  _PageTwoState createState() => _PageTwoState();
}

class _PageTwoState extends State<PageTwo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(title: 'Simple AppBar'),
      body: const Center(child: Text('页面二内容')),
    );
  }
}

方案二：创建基础页面类（进阶，减少更多重复代码） #

如果后续你需要复用的不只是AppBar，还有Scaffold的其他结构（比如底部导航栏、侧边抽屉），可以创建一个基础页面类，让所有页面继承它，只需要实现页面的核心内容即可。

第一步：创建基础页面文件 #

新建base_page.dart文件：

import 'package:flutter/material.dart';
import './custom_appbar.dart'; // 引用刚才的自定义AppBar

class BasePage extends StatelessWidget {
  final String title;
  final Widget body;
  final bool showBackButton;

  const BasePage({
    Key? key,
    required this.title,
    required this.body,
    this.showBackButton = true,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(title: title, showBackButton: showBackButton),
      body: body,
      // 这里还可以添加共用的底部导航栏、抽屉等全局组件
    );
  }
}

第二步：简化页面代码 #

修改PageOne.dart，现在连Scaffold都不用写了：

import 'package:flutter/material.dart';
import '../base_page.dart';

class PageOne extends StatelessWidget {
  const PageOne({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BasePage(
      title: 'Simple AppBar',
      body: const Center(child: Text('页面一内容')),
    );
  }
}

PageTwo.dart同理，代码会变得非常简洁。

两种方案可以根据你的实际需求选择：方案一适合只复用AppBar的场景，方案二适合需要统一页面整体结构的情况。

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