flutter实现（OutlineButton）线框按钮

野性酷女 2022-05-24 05:25 339阅读 0赞

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

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

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

![70][]

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

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

先看效果。

![70 1][]

![70 2][]

代码：

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用来自定义边框颜色和样式。

[70]: /images/20220524/870fbdbab48b4ae58bfffc5fbacbeb4a.png
[70 1]: /images/20220524/3b1f4e03289745bb88ec3de7357d7ed5.png
[70 2]: /images/20220524/3bbab5af52c94acd8144fab34e6a409c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter MaterialButton 实现圆角边框按钮

效果图如下 ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm

「爱情、让人受尽委屈。」/ 2023年10月07日 18:07/ 0 赞/ 73 阅读

相关 JavaFX --- 标签、文本框、密码框、下拉框、按钮、单选按钮、复选框

目录 JavaFX的基本结构和概念 Application --- 代表了JavaFX的应用程序 Stage --- 舞台 --- 代表了一个窗体。在Applicat

柔情只为你懂/ 2023年09月29日 15:00/ 0 赞/ 73 阅读

相关 Flutter 按钮组件之RaisedButton、OutlineButton、FlatButton、IconButton、ButtonBar、FloatingActionButton

按钮UI ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

不念不忘少年蓝@/ 2023年07月17日 14:23/ 0 赞/ 89 阅读

相关 flutter 按钮_Flutter 即学即用系列博客—08 MethodChannel 实现 Flutter 与原生通信

![9de30c5cae26f9bc79df080868b79fa5.png][] 背景前面我们讲了很多 Flutter 相关的知识点，但是我们并没有介绍怎样实现 F

桃扇骨/ 2023年01月01日 11:51/ 0 赞/ 273 阅读

相关 flutter实现（OutlineButton）线框按钮

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

野性酷女/ 2022年05月24日 05:25/ 0 赞/ 340 阅读

相关实现输入框自带清除按钮

原文出处：[https://blog.csdn.net/qq\_26780317/article/details/79002409][https_blog.csdn.net_q

ゞ浴缸里的玫瑰/ 2022年04月13日 12:57/ 0 赞/ 497 阅读

相关 [译] 用 Flutter 实现 Facebook 的响应式按钮

> 非常感谢 [Didier Boelens][] 同意我将它的一些文章翻译为中文发表，这是其中一篇。 > > 本文通过一个实例详细讲解了 Flutter 中动画的原理。 >

╰半夏微凉°/ 2022年01月20日 00:15/ 0 赞/ 271 阅读

相关 flutter 利用浮动按钮,实现导航栏中间放置圆形按钮效果

思路: 在Scaffold中设置浮动按钮->外包Container设置宽高来控制按钮大小-> 利用浮动按钮的位置参数floatingActionButt

水深无声/ 2021年07月25日 02:45/ 0 赞/ 790 阅读

相关 flutter 按钮组件

1、普通按钮RaisedButton 无法自己设置高宽,可以通过父元素或通过给child组件内部组件外包一个Padding组件来设置高宽

川长思鸟来/ 2021年07月24日 17:03/ 0 赞/ 630 阅读

相关 Flutter实现自定义底部弹框分享

如图，主要是为了实现图中的效果，第一次录制视频，还请海涵 flutter的这种弹框，我们用到了showModalBottomSheet这个类，使用的是这个类，说得挺详细...

桃扇骨/ 2021年06月30日 09:53/ 0 赞/ 801 阅读