我怎么不能把一個Material AppBar做成一個單獨的class？

Question

我正在嘗試將我的Scaffold小部件中的應用欄代碼分離到一個單獨的 class 中。

我寫了這個（編譯但沒有正確顯示）：

    class MyAppBar extends AppBar {
  Widget build(BuildContext context) {
    return AppBar(
      title: const Text('Sample Code'),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        IconButton(
          icon: Icon(Icons.search),
          tooltip: 'Search',
          onPressed: null,
        ),
      ],
    );
  }
}

class MyScaffold extends StatefulWidget {
  _MyScaffoldState createState() => _MyScaffoldState();
}

class _MyScaffoldState extends State<MyScaffold> {
  bool pressed = false;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(),

它顯示的內容：

當此代碼編譯並正確顯示 AppBar 時：

class MyScaffold extends StatefulWidget {
  _MyScaffoldState createState() => _MyScaffoldState();
}

class _MyScaffoldState extends State<MyScaffold> {
  bool pressed = false;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null,
          ),
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),

看起來像這樣：

任何人都可以幫我解決發生的事情嗎？

Answer 1

在這里回答： 單獨處理應用欄

我需要class MyAppBar extends StatelessWidget為class MyAppBar extends StatelessWidget implements PreferredSizeWidget

Answer 2

我正在嘗試將我的Scaffold小部件中的應用欄代碼分離為單獨的 class。

我寫了這個（編譯但沒有正確顯示）：

    class MyAppBar extends AppBar {
  Widget build(BuildContext context) {
    return AppBar(
      title: const Text('Sample Code'),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        IconButton(
          icon: Icon(Icons.search),
          tooltip: 'Search',
          onPressed: null,
        ),
      ],
    );
  }
}

class MyScaffold extends StatefulWidget {
  _MyScaffoldState createState() => _MyScaffoldState();
}

class _MyScaffoldState extends State<MyScaffold> {
  bool pressed = false;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(),

它顯示的內容：

雖然此代碼編譯並正確顯示 AppBar：

class MyScaffold extends StatefulWidget {
  _MyScaffoldState createState() => _MyScaffoldState();
}

class _MyScaffoldState extends State<MyScaffold> {
  bool pressed = false;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null,
          ),
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),

看起來像這樣：

任何人都可以幫我解決發生了什么嗎？