在后面我们经常需要使用 logo 这个资源图像,这里可以把它定义成一个小部件。打开 AppPageHeader 小部件,剪切一下 AppBar 小部件的 title 参数的值,一会儿这里可以换成我们自己定义的小部件。
新建一个文件,放在 lib/app/components 里面,名字是 app_logo.dart,在这个文件里定义一个 StatelessWidget,小部件的名字叫 AppLogo,在小部件的 build 方法里面,return 的东西是一个 Image.asset,把之前剪切的东西粘贴到这里。
使用这个小部件的时候可以配置一下,在这个小部件里添加两个属性,先添加一个 size,类型是 double,属性的名字叫 size, 然后再添加一个 color,类型是 Color,名字叫 color。
在小部件的类里面添加一个构造方法,AppLogo,添加两个参数 this.size,默认值可以是 32,再添加一个 this.color,默认值是 Colors.white。
这样在创建小部件的时候,设置的 size 参数的值会交给小部件的 size 这个属性,设置的 color 参数的值会作为 color 这个属性的值,这里可以给它们设置一个默认的值,也就是如果在使用这个小部件的时候不特别设置这些参数的值,就会使用它们的默认的值。
修改一下 Image.asset 里的 width 参数的值,换成这个类的 size 属性的值,再修改一下 color 参数的值,换成类里面的 color 这个属性的值。
打开 AppPageHeader,把 AppBar 的 title 参数的值设置成 AppLogo,编辑器会自动帮我们导入这个小部件。
使用这个小部件的时候可以设置它的 size 或者 color 参数的值。 如果不特别设置的话,就会使用默认的值。