flutter实现(OutlineButton)线框按钮

在flutter的控件里 常用按钮有:FlatButton,RaisedButton,FloatingActionButton,OutlineButton。


FlatButton是扁平的,没有阴影的。

RaisedButton是有阴影,看起来凸起来的,很有点击欲望的那种,如图1

FloatingActionButton是在侧面浮起来的那种按钮。


这一章重点介绍 OutlineButton ,中文叫线框按钮。

先看效果。



代码:

new Padding(
  padding: new EdgeInsets.fromLTRB(30.0, 10.0, 30.0, 10.0),
  child: new Row(
    children: <Widget>[
      new Expanded(
          child: new OutlineButton(
            borderSide:new BorderSide(color: Theme.of(context).primaryColor),
            child: new Text('注册',style: new TextStyle(color: Theme.of(context).primaryColor),),
            onPressed: (){},
          )
      ),
    ],
  ),
),
为了按钮能够根据屏幕宽度进行延伸变宽,用了row和expanded,expanded多大面积,按钮就有多大面积。如果不用row,expanded会向下延伸,就不是我们要的效果了

OutlineButton控件的child 和 onPressed是必须的属性,borderSide用来自定义边框颜色和样式。



  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值