Flutter：重用 AppBar 小部件

Posted 2023-02-23

【中文标题】Flutter：重用 AppBar 小部件

【英文标题】：Flutter: Reuse of AppBar widget

【发布时间】：2021-01-27 04:10:28

【问题描述】：

我创建了几个屏幕，出于某些原因，我必须单独创建一个代表屏幕的 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"),
        ));
  

但是，我收到以下我不知道如何解决的错误（我正确导入了所有内容）：

【问题讨论】：

使用PreferredSize。

【参考方案1】：

您的应用栏必须实现 PreferredSizeWidget。

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

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

【参考方案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'),
      ),
    );