用户登录

在后面我们经常需要使用 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 参数的值。 如果不特别设置的话,就会使用默认的值。

定义应用标志小部件(AppLogo)《 Flutter 2:定义部件 》

统计

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

社会化网络

关于

微信订阅号

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