用户登录

在这个 FormDemo 的 Scaffold 里面 .. 添加一个 body .. 设置一下它的主体 .. 里面用一下 ThemeDemo ..

下面再去定义这个小部件 .. 名字叫 ThemeDemo .. 里面用一个 Container 小部件 .. 然后再用一下它的 color 属性设置一下这个容器的背景 .. 这个颜色可以这样 .. Theme.of .. context .. primaryColor .. 意思就是用一下在主题里面定义的 primaryColor 这个属性 ..

屏幕上会出现一个黄色的背景 .. 因为在 MaterialApp 里面 .. 主题里的主要颜色我们把它设置成了黄色 .. 这里定义的主题在整个应用里面都是有效的 ..

在应用的某些地方我们也可以重新定义主题,或者覆盖主题里的一小部分定义 ..

比如在这个 Scaffold 的 body 属性里面,先用一个 Theme 小部件 .. 它需要一个 data 属性 .. 它的值是个 ThemeData ... 在它里面可以重新定义应用的主题 .. 添加一个 primaryColor ,设置一下主题的主色 .. 把它设置成黑色 ..

现在屏幕上会出现一个黑色背景的 Container .. 因为这个 Them.of(context) .. 指的就是离这个小部件最近的那个主题 .. 这里就是我们在 FormDemo 里面定义的那个主题 ..

在这个 Theme 小部件的 data 里面,直接用 ThemeData 会完全替代之前定义的主题 .. 如果只想覆盖某些特定的主题的设置,可以这样 .. 把它换成一个 Theme.of(context).copyWith ..

这样除了要覆盖的 primaryColor 这个设置以外,之前定义的主题里面的其它的设置都会被保留 ..

回到 main.dart ... 在 MaterialApp 的主题设置里面 .. 再添加一个 accentColor .. 设置一种颜色 ...

再回到 form_demo.dart .. 修改一下这里要使用的颜色 ... 把 primaryColor 换成 accentColor ...

在屏幕上显示的背景颜色就是在 MaterialApp 主题里面设置的 accentColor ..

Theme:定制、使用、重置、覆盖主题《 Flutter 移动应用:表单 》

统计

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

社会化网络

关于

微信订阅号

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