在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)线框按钮的更多相关文章

  1. Flutter基础Widget之按钮(RaisedButton、FlatButton、OutlineButton,IconButton)

    Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自Ma ...

  2. Flutter 基础组件:按钮

    前言 Material组件库中提供了多种按钮组件如RaisedButton.FlatButton.OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所 ...

  3. Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏

    FloatingActionButton 简称 FAB,从字面理解可以看出,它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙,只是我们没有正式的接触. 一般来说,它是一个圆形, ...

  4. Flutter中的浮动按钮 FloatingActionButton

    FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 . 常用属性 FloatingActionButton的常用属性,同flutte ...

  5. Flutter 中的常见的按钮组件 以及自定义按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...

  6. 22Flutter中的常见的按钮组件 以及自定义按钮组件

    /* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...

  7. Flutter中的按钮组件介绍

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...

  8. flutter中的按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...

  9. 【Flutter学习】基本组件之基本按钮组件

    一,概述 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件.一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件.无论哪种风格,都是 ...

随机推荐

  1. OAuth 2.0 - Authorization Code授权方式详解

    I:OAuth 2.0 开发前期准备 天上不会自然掉馅饼让你轻松地去访问到人家资源服务器里面的用户数据资源,所以你需要做的前期开发准备工作就是把AppKey, AppSecret取到手 新浪获取传送门 ...

  2. python 查找字符串中字母的个数

    2017.6.17 更新:好像知道错在哪里了.以第一个为例,输入应该是“AHHaaBBa”,因为直接输入AHHaaBBa时,系统不知到这是一个变量还是字符串,所以必须输入的时候申明定义.既然这样的话, ...

  3. Oracle 锁问题处理

    Oracle 锁问题处理 锁等待问题是一个常见的问题 查看持有锁的对象 查看事务正在执行的语句,与应用确认是否能够kill kill 对应的session

  4. JavaScript中的异步操作

    什么是异步操作? 异步模式并不难理解,比如任务A.B.C,执行A之后执行B,但是B是一个耗时的工作,所以,把B放在任务队列中,去执行C,然后B的一些I/O等返回结果之后,再去执行B,这就是异步操作. ...

  5. 使用spring EL表达式+自定义切面封装缓存模块

    需求是这样的,业务代码需要使用到缓存功能以减少数据库压力,使用redis来实现,并且需要生成缓存的key由方法的传参拼接而成(貌似也只能这样才能保证同样的select查询可以使用缓存),简单的方式就是 ...

  6. Zookeeper+ActiveMQ集群搭建

    搭建三台虚拟机安装centos7.要提前安装好jdk环境 1.环境准备,搭建三台虚拟机ip分别是 192.168.192.130 192.168.192.131 192.168.192.134 Zoo ...

  7. 【数组】Game of Life

    题目: According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a ce ...

  8. springboot-10-前端页面整合, thymeleaf, freemarker, jsp 模板使用

    springboot 中不建议使用jsp作为页面展示, 怎么使用可以看: http://412887952-qq-com.iteye.com/blog/2292471 关于什么是thymeleaf, ...

  9. css揭秘

    一:渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向       background: linear-gradient(direction, color-sto ...

  10. 遇见CUBA CLI

    原文:Meet CLI for CUBA Platform 翻译:CUBA China CUBA-Platform 官网 : https://www.cuba-platform.com CUBA Ch ...