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风格的组件.无论哪种风格,都是 ...
随机推荐
- 【8】JMicro微服务-JMicro ZKUI
ZKUI是一个开源项目,是一个查看,修改ZK数据非常方便的工具.JMicro基于ZK做服务治理,配置管理,因此使用ZKUI会提供非常大的方便. Github地址:https://github.com/ ...
- Andrew Ng机器学习第五章——多变量线性回归
一.多变量线性回归的技巧之一——特征缩放 1.为什么要使用特征缩放? 特征缩放用来确保特征值在相似的范围之内. 设想这样一种情况(房价预测),两个特征值分别是房子的大小和卧室的数量.每个特征值所处的范 ...
- JavaScript 函数定义方法
JavaScript 函数定义方法. 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立 ...
- <context:component-scan>详解 转发 https://www.cnblogs.com/fightingcoding/p/component-scan.html
<context:component-scan>详解 默认情况下,<context:component-scan>查找使用构造型(stereotype)注解所标注的类,如@ ...
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 移动设备的HTML页面中图片实现滚动加载
如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...
- redis集群与分片(1)-redis服务器集群、客户端分片
下面是来自知乎大神的一段说明,个人觉得非常清晰,就收藏了. 为什么集群? 通常,为了提高网站响应速度,总是把热点数据保存在内存中而不是直接从后端数据库中读取.Redis是一个很好的Cache工具.大型 ...
- nginx学习笔记(8)虚拟主机名---转载
通配符名字正则表达式名字其他类型的名字优化兼容性 虚拟主机名使用server_name指令定义,用于决定由某台虚拟主机来处理请求.具体请参考<nginx如何处理一个请求>.虚拟主机名可以使 ...
- Git 什么时候用什么指令
转自:http://blog.gogojimmy.net/2012/02/29/git-scenario/ Git 教學(1):Git的基本使用 Git 教學(2):Git Branch 的操作與基本 ...
- 哪个先执行:@PostConstruct和@Bean的initMethod?
结论: /** * step1:执行构造函数 * step2:执行使用@PostConstruct注解修饰的方法[如果有多个,则执行顺序不确定] * step3:执行@Bean注解中initMetho ...