在颤振中添加 2 个应用栏

Question

我希望我的应用有 2 个 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.push(
                    context,
                    MaterialPageRoute(builder: (context) => UserPage()),
                  );
                }),

第二个有这个代码：

 appBar: AppBar(title: const Text('Bottom App Bar')),
    floatingActionButtonLocation: 
      FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      child: const Icon(Icons.add), onPressed: () {},),
    bottomNavigationBar: BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.menu), onPressed: () {},),
          IconButton(icon: Icon(Icons.search), onPressed: () {},),
        ],
      ),
    ),
  );
}

那么我怎样才能添加第二个才不会出错呢？因为我试图用 appbar 擦除第一部分：Appbar 并且我得到了很多错误

Answer 1

编辑：

正如 Derek 指出的，您不应该在您的应用中放置两个 Scaffolds。

另一种解决方案可能是将第一个 AppBar 像往常一样放在 Scaffold 的 appBar 属性中，将第二个作为第一个子元素放在 Column 中。

这看起来像：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text("First appbar"),
        ),
        body: Column(
          children: [
            AppBar(
              backgroundColor: Colors.red,
              title: Text("Second appbar"),
            ),
            HomePage()
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Text("Content"),
    );
  }
}

---------------

旧答案：

其实这很简单。

1. 您像往常一样创建您的Scaffold，并在其中放入第一个AppBar。

2. 作为这个Scaffold 的主体，您放置第二个Scaffold，在其中放置您的第二个AppBar。

结果如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text("First appbar"),
        ),
        body: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.red,
            title: Text("Second appbar"),
          ),
        ),
      ),
    );
  }
}