入门flutter第三弹,按钮修改样式

1,677 阅读2分钟

这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战

flutter组件

这几天学习下来,确认了几件事,其实是比较浅显的事,但我没太注意。

1、flutter或者说dart面向对象的,所以开发过程中就是调用提供的组件,或者说Widget部件进行拼凑。同时提供了一部分API,进行自定义修改。

2、flutter的文档中其实大多数知识点都有,但是不适合新手,尤其是初入前端的学习,可以考虑找一个入门到实战的视频或者教程配合着学习。

3、需要耐心和一点点微笑,我好几次都发现自己有些东西没认真看,导致纠结了很久。

按钮

flutter的官网中有一份实战教程,里面的按钮篇讲解了flutter提供的按钮组件,但是不太完整,我看的视频教程是以RaisedButton组件讲解的,但是这个组件似乎在淘汰了,所以是还能用,但是不建议用的。

image.png

我用的是vscode编辑器,装上flutterdart插件之后,会有响应的提示,这里可以看到,有提示,不应该使用RaiseButton,使用ElevatedButton代替,但是这时候麻烦的来了。

教程中关于ElevatedButton的部分只有这么多,甚至整个Button按钮篇都只有简单使用,如何去修改他的样式呢?

image.png

修改按钮样式

这里使用vscode有个方法;

Step 1 找到按钮的类

ctrl + click单击代码中的ElevatedButton找到对应的类

image.png

可以看到有个属性是ButtonStyle

Step 2 查看按钮样式可配置项

还是一样,ctrl + click点击上面的ButtonStyle配置项,打开代码如下

image.png

这时候可以看到如上图的代码,上面是总共可以配置的项,需要一点点英文知识去看做什么了。

指向下面的箭头是代表这个属性的类型,(学过强类型语言的小伙伴接受起来很轻松吧?)

Step 3 如何设置值

这一块有点对不起观众了,我也不是很理解,是跟着查到的文档搞出来了,为了表达自己不能解释清楚的罪过,给大家表演个节目吧。()

image.png

总结

如果是使用vscode编辑器的话,装上插件之后就比较安逸,很多东西都有提示,也有很多可以自动修改。

image.png

并且本文提到的,通过查看对应类的方式去设置属性也一种比较常态化的学习和开发方式,建议点个赞。

表演节目时间: 我女朋友喊我去视频了,拜了拜。