Flutter 中的 AppBar 不顯示

Question

我正在嘗試將 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 沒有被渲染。 你可以在這里看到輸出。

如何取消隱藏 appBar（如果有的話？）。 這是我第一次在 Flutter 中編碼，我還在學習。 謝謝你們！

Answer 1

如評論中所述，您正在使用 2 Scaffold並在 Stateful Widget 中使用構建方法。 該文件指出：

Scaffold 被設計為MaterialApp的頂級容器。 這意味着向 Material 應用程序上的每個路由添加一個 Scaffold 將為應用程序提供 Material 的基本視覺布局結構。

通常不需要嵌套 Scaffolds。

作為一般經驗法則：每個路線/屏幕僅使用一個腳手架。

您可能需要考慮這樣的事情：

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

輸出：