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

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

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

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

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

先看效果。

代码:

  1. new Padding(
  2. padding: new EdgeInsets.fromLTRB(30.0, 10.0, 30.0, 10.0),
  3. child: new Row(
  4. children: <Widget>[
  5. new Expanded(
  6. child: new OutlineButton(
  7. borderSide:new BorderSide(color: Theme.of(context).primaryColor),
  8. child: new Text('注册',style: new TextStyle(color: Theme.of(context).primaryColor),),
  9. onPressed: (){},
  10. )
  11. ),
  12. ],
  13. ),
  14. ),

为了按钮能够根据屏幕宽度进行延伸变宽,用了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. easyUI slider滑块,在加载出来后,easyUI slider滑块禁用方法

    easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...

  2. 使用TopShelf做windows服务安装 ---安装参数解释

    转自:https://topshelf.readthedocs.io/en/latest/overview/commandline.html Topshelf Command-Line Referen ...

  3. windows下搭建Cordova安卓环境

    phoneGap 被收购后衍生出了 Cordova Android 的开发工具也由 Eclipse 向 Android Studio 靠拢 行业动态在更新,所以资料也要跟着变化... 在开始之前,作为 ...

  4. mongodb二进制安装与yum安装

    一.什么是mongodb MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当 ...

  5. linux下清空c++ cin无效流的方式

    cin.clear(); cin.ignore(10000,'\n');//这里面的参数很重要

  6. juqery dragsort使用遇到的问题

    1.destroy时,没给容器加id,不能执行成功--->修改源码如下: if (options == "destroy") { $(this).trigger(" ...

  7. json 只能用 for-in 遍历

    [JS] var json1 = { 'name' : 'yy' , 'age' : 11 , 'fun' : '前端开发' }; for( var attr in json1 ) { alert( ...

  8. ruby冒泡算法删除店铺下的重复评论

    Shop.each do |shop| if !shop.comments.blank? n = shop.comments.length for i in 0..n-1 for j in i+1.. ...

  9. JavaScript 作用域(Scope)详解

    先对需要用到的名词解释一下,再通过例子深入理解 一.什么是作用域(Scope) [[scope]]:每个javascript函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供ja ...

  10. ABP学习入门系列(二)(abp的数据迁移)

    本文将介绍在ABP框架中将实体类迁移至数据库表 1.下图是abp的体系结构. 我们要是实现创建实体类并迁移数据到数据库的功能主要就是在下图中domain(领域层)做相应的一些操作. 2,看一下解决方案 ...