用户登录

在我的设计草图里,这个注册页面上的 Logo 是亮色的,选中这个标志,我提前已经添加了三个导出,1倍,2倍还有 3倍尺寸的图像。两倍还有三倍的尺寸都设置了一个前缀,要导出的这些图像的格式是 png,这种格式的图像可以包含透明效果。

按一下导出所选,存放这些导出的图像的目录选择项目下面的 assets,images 这个目录,确定导出。再回到项目。

在 assets,images 里面,你会看到刚才导出的这个 logo_light.png 图像文件,另外还有两个不同尺寸的图像,放在了 3.0x 还有 2.0x 这两个目录里面。

下面可以去改造一下之前我们创建的 AppLogo 小部件,打开 app_logo.dart, 现在这个小部件里用的静态图像文件是 logo_dark.png,我们可以让这个小部件支持一个属性,通过它可以配置一下要使用的标志图像。

在这个类里面添加一个构造方法,方法的名字跟类的名字一样,AppLogo,一个对象,里面添加一个 this.type,然后在下面再去定义一下这个属性,final type 。 这个 type 属性的值的类型可以用一个 enum,在下面定义一个 enum 名字是 LogoType,里面添加两个东西,一个是 dark ,再添加一个 light。

这样这个 type 的值的类型可以设置成 LogoType,它是一个 enum 类型的值。

在小部件的 build 方法里面,添加一个 logoType,它的值可以做一下判断,看一下 type.index 是不是等于 0,如果这个索引值是 0,说明用的是 LogoType 里的第一个项目,也就是这个 dark。 如果等于 0,就让 logoType 的值是 dark 这个字符串,如果不是 0,就让 LogoType 的值等于 light。

修改一下使用的静态图像文件的名字,去掉 dark,换成一个 logoType。

回到 signup , 找到使用了 AppLogo 的地方,现在这个小部件需要一个 type 参数,它的值可以设置成 LogoType.light。现在你会发现,页面上显示的图像标志就是亮色的了。

如果把 type 的值设置成 logoType.dark,显示的就会是暗色的图像标志。

下面再打开 login ,这里也用了一下 AppLogo 小部件, 给它一个 type 属性,把它的值设置成 LogoType.dark。

注册表单:应用图标(亮色)《 Flutter 应用案例: 用户表单 》

统计

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

社会化网络

关于

微信订阅号

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