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用来自定义边框颜色和样式。
flutter实现(OutlineButton)线框按钮的更多相关文章
- Flutter基础Widget之按钮(RaisedButton、FlatButton、OutlineButton,IconButton)
Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自Ma ...
- Flutter 基础组件:按钮
前言 Material组件库中提供了多种按钮组件如RaisedButton.FlatButton.OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所 ...
- Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏
FloatingActionButton 简称 FAB,从字面理解可以看出,它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙,只是我们没有正式的接触. 一般来说,它是一个圆形, ...
- Flutter中的浮动按钮 FloatingActionButton
FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 . 常用属性 FloatingActionButton的常用属性,同flutte ...
- Flutter 中的常见的按钮组件 以及自定义按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...
- 22Flutter中的常见的按钮组件 以及自定义按钮组件
/* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...
- Flutter中的按钮组件介绍
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...
- flutter中的按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...
- 【Flutter学习】基本组件之基本按钮组件
一,概述 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件.一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件.无论哪种风格,都是 ...
随机推荐
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- 利用Windows资源监视器解决文件夹无法改名无法删除问题
在win7等Windows系统操作文件夹更名.删除时经常会报错,操作无法完成,balabala 这个时候仅凭在用的软件去一个一个找是很难的,即便软件全关了,还有后台进程,,,奔溃吧 好了,现在我们有了 ...
- EF基础知识小记四(数据库=>模型设计器)
EF基础知识小记三(设计器=>数据库)介绍了如何创建一个空设计器模型,并如何将模型同步到数据库的表中,本文则主要介绍如何将一个存在的数据库同步到模型设计器中.为了能快速的模拟这个过程,给出一下建 ...
- 第5章—构建Spring Web应用程序—SpringMVC详解
SpringMVC详解 5.1.跟踪Springmvc的请求 SpringMVC的核心流程如下: 具体步骤: 第一步:发起请求到前端控制器(DispatcherServlet) 第二步:前端控制器请求 ...
- hexo上部署博客到Github失败
fatal: could not read Username for 'https://github.com': No error 今天在上传博客到搭建到 Github 的个人博客上的时候,已经使用 ...
- linux-统计文本中符合条件的内容
1, 单个条件匹配, cat results.log | grep 'status=402' 2, 多个条件匹配 1), 2个条件都要满足 cat results.log | grep "s ...
- activemq的三种通信方式
一.安装与启动 1.下载安装activemq,下载地址:http://activemq.apache.org/download.html. 2.安装完成后,进入其所在目录的bin目录下面,根据系统位数 ...
- Ionic3与Angular4新特性
之前(17年3月底)Angular4.0.0正式发布,这个月(4月十几号)Ionic3又发布了,很多人看到这个估计都是一脸懵圈,其实,Angular4只是Angular2的后续版本,Ionic3也是I ...
- webapi找到了与该请求匹配的多个操作
关于这个问题是路由在找方法的时候层没有指定对,同一个链接,同样的参数导致路由找不到方法导致的报错,可以在WebApiConfig中多配置一层,比如"api/{controller}/{act ...
- WCF配置文件与文件下载之坎坷路
题外话:本以为我会WCF了,精通WCF了,毕竟刚做过一个WCF的项目,不就是写写契约接口,然后实现接口,改下配置.最后用控制台或者服务发布一下,不就能用了.不就是简单ABC吗?不是So Easy吗?做 ...