Flutter中如何添加两个AppBar且避免报错？

看起来你混淆了Flutter中AppBar的使用规则——单个Scaffold组件只能配置一个appBar属性，直接添加两个appBar肯定会触发语法错误。另外你提到删除第一个AppBar会引发大量错误，大概率是因为你的代码结构有语法问题（比如括号不匹配、缺少必要的组件包裹），我来帮你梳理正确的实现方式。

场景1：不同页面使用不同的AppBar #

这是最常见的需求：比如首页用你的第一个自定义AppBar，另一个页面用带底部导航栏（BottomAppBar）的布局。每个页面都有独立的Scaffold，各自配置appBar即可。

完整代码示例 #

import 'package:flutter/material.dart';
// 假设你已经导入了扫码相关的包
// import 'package:barcode_scan2/barcode_scan2.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      routes: {
        '/user': (context) => UserPage(),
        '/bottomBarPage': (context) => BottomBarPage(),
      },
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String? qrResult;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 第一个自定义AppBar
      appBar: AppBar(
        title: Text('Tariffo', style: TextStyle(
          color: Colors.white,
          fontFamily: 'SignPainter',
          fontSize: 45
        )),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(30),
          ),
        ),
        actions: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 10),
          ),
          IconButton(
            icon: Icon(Icons.center_focus_weak),
            onPressed: () async {
              // 这里替换成你的扫码逻辑
              // String scaning = await BarcodeScanner.scan();
              // setState(() {
              //   qrResult = scaning;
              // });
            },
          ),
          IconButton(
            icon: Icon(
              Icons.perm_identity,
              color: Colors.white,
            ),
            onPressed: () {
              Navigator.pushNamed(context, '/user');
            }),
        ],
      ),
      body: Center(
        child: Text(qrResult ?? '扫码结果会显示在这里'),
      ),
      // 可以加一个按钮跳转到带BottomAppBar的页面
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.navigate_next),
        onPressed: () => Navigator.pushNamed(context, '/bottomBarPage'),
      ),
    );
  }
}

class UserPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('用户页面')),
      body: Center(child: Text('这是用户页面')),
    );
  }
}

class BottomBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 第二个页面的AppBar
      appBar: AppBar(title: const Text('Bottom App Bar')),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
      // 这是底部导航栏，不是AppBar
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(icon: Icon(Icons.menu), onPressed: () {}),
            IconButton(icon: Icon(Icons.search), onPressed: () {}),
          ],
        ),
      ),
    );
  }
}

场景2：同一个页面实现"双顶部栏" #

如果你确实需要在同一个页面顶部显示两个类似AppBar的栏，不能直接加两个appBar，而是可以自定义一个PreferredSizeWidget，把两个栏组合起来作为appBar的值，或者把第二个栏放在body的最顶部。

自定义组合AppBar示例 #

class DoubleAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight * 2);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 第一个栏
        AppBar(
          title: Text('Tariffo', style: TextStyle(
            color: Colors.white,
            fontFamily: 'SignPainter',
            fontSize: 45
          )),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(30),
            ),
          ),
          actions: [
            // 你的按钮组件
            IconButton(icon: Icon(Icons.center_focus_weak), onPressed: () {}),
          ],
        ),
        // 第二个栏
        Container(
          height: kToolbarHeight,
          color: Colors.blue[700],
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Text('二级导航栏', style: TextStyle(color: Colors.white)),
              ),
              IconButton(icon: Icon(Icons.search, color: Colors.white), onPressed: () {}),
            ],
          ),
        ),
      ],
    );
  }
}

// 使用方式
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DoubleAppBar(),
      body: Center(child: Text('页面内容区域')),
    );
  }
}

关于你代码中的语法问题 #

你原来的第一个AppBar代码里有几处语法错误，比如Padding组件后面多了逗号，setState必须在StatefulWidget的状态类中使用，这些也是导致删除代码后报错的原因，上面的示例已经帮你修正了这些问题。

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