在 Scaffold 里的 appBar 参数里用的这个 AppBar 小部件可以单独放在一个小部件里面,先剪切一下这里用的这个 AppBar 小部件。
然后在项目里新建一个文件,放在 lib/app/components 里面,名字是 app_page_header.dart,在这个文件里定义一个 StatelessWidget,名字是 AppPageHeader。
在 build 方法里 return 的东西就是刚才剪切的 AppBar 小部件。
回到 app.dart,在这里用一下刚才定义的 AppPageHeader 小部件,编辑器会自动帮我们导入这个小部件。这里提示了一个错误,说 AppPageHeader 不能作为 PreferredSizeWidget 类型的参数值。也就是 Scaffold 里的这个 appBar 参数,要求它的值是一个 PreferredSizeWidget。也就是带建议尺寸的小部件。
打开 app_page_header,这里我们可以让它实施一个抽象类,就是 Abstract class,名字是 PreferredSizeWidget。
实施了这个类以后,需要在类里面添加一个属性,用 @override 标注一下,这个属性值的类型是 Size,名字叫 preferredSize ,可以给它设置一个值,Size.fromHeight,高度是 100。
再回到 App 小部件观察一下,这回这里就不会提示错误了。
现在应用的界面上仍然会显示一个 AppBar 小部件,现在这个小部件来自 AppPageHeader 这个小部件。