前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter基础widgets教程-RaisedButton篇

Flutter基础widgets教程-RaisedButton篇

原创
作者头像
青年码农
发布2020-10-10 17:05:10
6680
发布2020-10-10 17:05:10
举报
文章被收录于专栏:青年码农

1 RaisedButton

RaisedButton组件主要用于文本布局。

2 构造函数

代码语言:javascript
复制
RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
})

3 常用属性

3.1 onPressed

必填参数,按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示禁用相关样式

3.2 textColor:文本颜色

代码语言:javascript
复制
textColor: Colors.white,

3.3 color:按钮颜色

代码语言:javascript
复制
color: Colors.red,

3.4 splashColor:点击按钮时水波纹的颜色

代码语言:javascript
复制
splashColor: Colors.black,

3.5 highlightColor:高亮颜色,点击(长按)按钮后的颜色

代码语言:javascript
复制
highlightColor: Colors.green,

3.6 padding:内边距,其接收值的类型是EdgeInsetsGeometry类型的

3.6.1 一次性设置上下左右的间距

代码语言:javascript
复制
padding: EdgeInsets.all(20),

3.6.2 单独设置

3.6.2.1 上内边距

代码语言:javascript
复制
padding: EdgeInsets.only(top: 30),    

3.6.2.2 下内边距

代码语言:javascript
复制
padding: EdgeInsets.only(bottom: 30), 

3.6.2.3 左内边距

代码语言:javascript
复制
padding: EdgeInsets.only(left: 30),  

3.6.2.4 右内边距

代码语言:javascript
复制
padding: EdgeInsets.only(right: 30), 

3.6.3 一次性设置上下左右的间距 左上右下顺序设置

代码语言:javascript
复制
padding: EdgeInsets.fromLTRB(0,30,20,40),

3.7 shape:设置按钮的形状

3.7.1 borderRadius:设置圆角

代码语言:javascript
复制
shape: BeveledRectangleBorder(
    side: BorderSide(
        color: Colors.white,
    ),
    borderRadius: BorderRadius.all(Radius.circular(10))
),

3.7.2 BeveledRectangleBorder:带斜角的长方形边框

代码语言:javascript
复制
shape: BeveledRectangleBorder(
    side: BorderSide(
        color: Colors.white,
    ),
    borderRadius: BorderRadius.all(Radius.circular(10))
),

3.7.3 CircleBorder:圆形边框

代码语言:javascript
复制
shape: CircleBorder(
    side: BorderSide(
        color: Colors.white,
    ),
),

3.7.4 RoundedRectangleBorder:圆角矩形

代码语言:javascript
复制
shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10)),
),

3.7.5 StadiumBorder:两端是半圆的边框

代码语言:javascript
复制
shape: StadiumBorder(),

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 RaisedButton
  • 2 构造函数
  • 3 常用属性
    • 3.1 onPressed
      • 3.2 textColor:文本颜色
        • 3.3 color:按钮颜色
          • 3.4 splashColor:点击按钮时水波纹的颜色
            • 3.5 highlightColor:高亮颜色,点击(长按)按钮后的颜色
              • 3.6 padding:内边距,其接收值的类型是EdgeInsetsGeometry类型的
                • 3.7 shape:设置按钮的形状
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档