Question

我希望我的应用程序具有2个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.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放在“脚手架appBar”列的and the second as a first children in a属性中。

这看起来像：

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"),
    );
  }
}

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

旧答案：

实际上，这真的很简单。

您创建自己的Scaffold，然后像往常一样将第一个AppBar放入其中。
作为此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"),
          ),
        ),
      ),
    );
  }
}

在flutter中添加2个应用程序栏

1 个答案: