Material Design 是谷歌推广的设计风格,搭载 Flutter 的应用的视感多采用 Material Design 风格。本文将介绍如何优化 Material Design 按钮,以达到更好的用户体验。
常见的 Material Design 按钮
在 Flutter 中,我们通常使用 RaisedButton、FlatButton、OutlineButton、IconButton 来实现 Material Design 风格的按钮。其中 RaisedButton 是最典型的 Material Design 按钮,其它三个按钮一般都会使用到。
如何优化
1. 设置主题色
在 Material Design 中,颜色是起到至关重要的作用的。默认 RaisedButton 的颜色为主题色,可以通过修改主题色实现美化按钮的目的。
------------- ------ ------------------------------- -- ----- ---------- -- --- ------ ----------- -
2. 修改按钮颜色
如果只想修改 RaisedButton 的颜色,可以这样:
------------- ------ ----------- -- ------ ---------- -- --- ------ ----------- -
3. 用圆角替代方形
默认 RaisedButton 的形状是方形的,可以设置圆角使它变得更美观、更柔和一些。
------------- ------ ----------------------- ------------- --------------------------- -- ---- ---------- -- --- ------ ----------- -
4. 添加阴影
阴影效果能够让按钮看起来更加凸显,可以通过 elevation 属性添加阴影效果。
------------- ---------- -- -- ------ ---------- -- --- ------ ----------- -
5. 按钮大小
在某些情况下,我们需要改变按钮的大小,通常使用将 Button 包在 SizedBox 中或是将 Button 包裹在 ConstrainedBox 里,然后设置宽高大小即可。
--------- ------ ---- ------- --- ------ ------------- ---------- -- --- ------ ----------- -- -
或者
--------------- ------------ ------------------------------ ---- ------- ---- ------ ------------- ---------- -- --- ------ ----------- -- -
总结
通过以上方法可以轻松美化 Material Design 按钮,在实际开发过程中可以根据场景选择使用不同的优化方案,加强用户体验。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64a6c83348841e989436ba3e