Flutter 中的 AppBar 不显示答案

【问题标题】：AppBar in Flutter doesn't showFlutter 中的 AppBar 不显示
【发布时间】：2019-04-15 10:26:36
【问题描述】：

我正在尝试在我的应用页面中实现 AppBar，但它没有显示。我尝试过使用 styles.xml 文件和 Android Manifest，但无济于事。我猜在 Flutter 中处理 AppBars 有不同的方法。

这是我的代码：

    import 'package:flutter/material.dart';
    import 'package:kain_app/utils/my_navigator.dart';
    import 'package:firebase_auth/firebase_auth.dart';
    import 'package:kain_app/services/user_management.dart';
    import 'package:flutter/widgets.dart';


    class HomeScreen extends StatefulWidget {
      @override
      HomeScreenState createState() {
        return HomeScreenState();
      }

        @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: new AppBar(
            title: new Text("Kain"),
          ),
          )
        );
      }
    }

    class HomeScreenState extends State<HomeScreen>{
    @override
      noSuchMethod(Invocation invocation) {
        return super.noSuchMethod(invocation);
      }
    @override
    Widget build(BuildContext context){
      return new Scaffold(
        resizeToAvoidBottomPadding: false,
        body: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Stack(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.fromLTRB(15.0, 110.0, 15.0, 0.0),
                    child: Text(
                      'You are now logged in.',
                      style: TextStyle(
                      fontFamily:'Montserrat', fontSize: 80.0, fontWeight: FontWeight.w700)
                    ),
                  ),
                ],
              ),
            ),
            Container(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new OutlineButton(
                    onPressed: (){
                      FirebaseAuth.instance.signOut().then((value) {
                        Navigator.of(context).pushReplacementNamed('/login');

                      }).catchError((e) {
                        print(e);
                      });
                    },
                    borderSide: BorderSide(
                      color: Colors.red[900], style: BorderStyle.solid, width: 4.0,),
                      child: Text('Logout',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontSize: 16.0,
                        fontWeight: FontWeight.w700,
                      ),
                      ),
                  )
                ],
              ),
            )
          ],
        ),
      );
      }
    }

我在 HomeScreenState 之后立即声明的 AppBar 没有被渲染。 You can see the output here.

如何取消隐藏 appBar（如果有的话？）。这是我第一次在 Flutter 中编码，我还在学习中。谢谢大家！

【问题讨论】：

那是因为你有两个 Scaffold 并且你在 statefullWidget 中有一个 build 方法。而是将 createstate() 添加到 StatefullWidget。 flutter.io/docs/development/ui/interactive
@Blasanka 非常感谢！

标签： android dart flutter appbar

【解决方案1】：

正如评论中提到的，您正在使用 2 Scaffold 并在 Stateful Widget 中使用构建方法。文档指出：

脚手架被设计成一个顶级容器，用于 MaterialApp。这意味着为每条路线添加一个脚手架 Material 应用程序将为应用程序提供 Material 的基本视觉布局结构。

通常不需要嵌套脚手架。

As a general rule of thumb: use only one Scaffold per Route/screen.

您可能需要考虑这样的事情：

import 'package:flutter/material.dart';

void main() {
  runApp(HomeScreen());
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() {
    return HomeScreenState();
  }
}

class HomeScreenState extends State<HomeScreen> {
  @override
  noSuchMethod(Invocation invocation) {
    return super.noSuchMethod(invocation);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: new Text("Kain"),
        ),
        body: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Stack(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.fromLTRB(15.0, 110.0, 15.0, 0.0),
                    child: Text('You are now logged in.',
                        style: TextStyle(
                            fontFamily: 'Montserrat',
                            fontSize: 80.0,
                            fontWeight: FontWeight.w700)),
                  ),
                ],
              ),
            ),
            Container(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new OutlineButton(
                    onPressed: () {},
                    borderSide: BorderSide(
                      style: BorderStyle.solid,
                      width: 4.0,
                    ),
                    child: Text(
                      'Logout',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontSize: 16.0,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

输出：

【讨论】：