Button(中文翻译按钮),这是交互控件中的一种,常用实际应用场景请求数据提交,点击事件数据处理。在Flutter中Material 组件库常用RaiseButton、 FloatingActionButton 、FlatButton、OutlineButton 、自定义按钮。不同按钮有着不同风格,适用各种实际场景。

1 RaisedButton "凸起"按钮,支持悬浮和正常。onPressed和onLongPress回调为null,则该按钮将被禁用

textColor:设置文字颜色

disabledTextColor:设置按钮禁用时文字颜色

color:设置按钮背景颜色

disabledColor:设置按钮禁用时背景颜色

highlightColor:设置点击时按钮颜色

colorBrightness:文字亮度

highlightElevation:点击时阴影面积

disabledElevation:按钮禁用时阴影面积

padding:设定按钮文字与边框距离

shape:按钮形状设置

c1a57cdfce272caab6919ecde290880e.png

按钮形状

2 FlatButton扁平按钮,默认背景透明并不带阴影,通过color设置为背景增加颜色。属性跟RaiseButton一样。

3 OutlineButton 带边框按钮。属性跟RaiseButton一样

92de5d421d2b37726b1b89fa8faed74a.png

边框按钮

4 IconButton 带图标按钮,icon 要指定图标。点击时会背景颜色。其他属性跟RaiseButton一样。

6651f32053620d0b50b2157cb0ae7d29.png

IconButton

5 RaisedButton调用icon函数指定可以指定图标和按钮文字

9fe3bac9bb1c0ab8a4f4592b1d1868eb.png

RaisedButton

6自定义按钮。更改按钮属性改变按钮

2ddf17dcc6294c030b5d8b5af1a39231.png

自定义按钮

上一讲 8-Flutter控件Text剖析
下一讲(待续) 10-Flutter控件图片解析

觉得button与原生有什么区别,欢迎关注点赞留言转发

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐