Flutter：重用 AppBar 小部件

Question

我創建了幾個屏幕，出於某些原因，我必須單獨創建一個代表屏幕的 Scaffold。 但是，由於 AppBar 每次都應該相同，我想在無狀態小部件中創建一次，然后重用它：

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      centerTitle: true,
      backgroundColor: Colors.black,
      title: Text(
        "Places Near You",
        style: TextStyle(
            color: Colors.black, fontFamily: "Billabong", fontSize: 35),
      ),
    );
  }
}

然后在每個屏幕上我想通過寫作來使用它：

class _CreatePostScreenState extends State<CreatePostScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: MyAppBar(),
        body: Center(
          child: Text("Hello"),
        ));
  }
}

但是，我收到以下錯誤，我不知道如何解決（我正確導入了所有內容）：

Answer 1

您的應用欄必須實現 PreferredSizeWidget。

class YourAppbar extends StatelessWidget implements PreferredSizeWidget {
 
  @override
  Widget build(BuildContext context) {
     return AppBar();
 }

 @override
 Size get preferredSize => const Size.fromHeight(kToolbarHeight);

}

Answer 2

對我來說，以下解決方案也很好：

class YourAppBar extends AppBar {
  YourAppBar({Key key, Widget title})
      : super(key: key, title: title, actions: <Widget>[
        new IconButton(
            onPressed: (){},
            icon: new Icon(Icons.access_alarm)),
  ]);
  
}

並且可以如下使用：

return Scaffold(
      appBar: YourAppBar(
        title: Text('Hi'),
      ),
      body: Center(
        child: Text('Home page'),
      ),
    );