定义应用页面头部小部件(AppPageHeader)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 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 这个小部件。

定义应用页面头部小部件(AppPageHeader)《 Flutter 2:定义部件 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点