文章目录
Flutter中的按钮
RaisedButton
FlatButton
OutlineButton
IconButton

Flutter中的按钮
Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下

RaisedButton 	：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton
FlatButton  	：扁平化的按钮，继承自MaterialButton
OutlineButton		：带边框的按钮，继承自MaterialButton
IconButton	：图标按钮,继承自StatelessWidget

我们先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。
  const MaterialButton({
    Key key,
    @required this.onPressed,
    this.onHighlightChanged,
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.highlightColor,
    this.splashColor,
    this.colorBrightness,
    this.elevation,
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.shape,
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child,
  }) : super(key: key);

下面我们来看看常用属性




属性
值类型
说明




onPressed
VoidCallback ，一般接收一个方法
必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示禁用相关样式


child
Widget
文本控件


textColor
Color
文本颜色


color
Color
按钮的颜色


disabledColor
Color
按钮禁用时的颜色


disabledTextColor
Color
按钮禁用时的文本颜色


splashColor
Color
点击按钮时水波纹的颜色


highlightColor
Color
点击（长按）按钮后按钮的颜色


elevation
double
阴影的范围，值越大阴影范围越大


padding
EdgeInsetsGeometry （抽象类）
内边距


shape
ShapeBorder（抽象类）
设置按钮的形状


minWidth
double
最小宽度


height
double
高度


而在Android中如果我们要修改按钮样式的话，需要通过selector和Shape等方式进行修改，相比较Flutter来说是要麻烦不少的

RaisedButton
RaisedButton的构造方法如下，由于继承自MaterialButton，所以MaterialButton中的大多数属性这边都能用，且效果一致，这里就不在赘述了
  const RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })

下面我们来看一下属性
onPressed

接收一个方法，点击按钮时回调该方法。如果传null，则表示按钮禁用
 return RaisedButton(
      onPressed: null,
    );

如下图所示


下面我们定义一个方法传给onPressed
_log() {
    print("点击了按钮");
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: _log,
    );
  }


点击按钮后会调用log方法。


child

按钮文本控件，一般都是传一个Text Widget
 return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
    );


color

按钮的颜色
return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
    );


textColor

按钮的文本颜色
 return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
      textColor: Colors.white,
    );


splashColor

点击按钮时水波纹的颜色
   return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
    
    );


highlightColor

高亮颜色，点击（长按）按钮后的颜色
    return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
      highlightColor: Colors.green,
    );


elevation

阴影范围，一般不会设置太大
    return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
      highlightColor: Colors.green,
      elevation: 30,
    );


padding

内边距，其接收值的类型是EdgeInsetsGeometry类型的，EdgeInsetsGeometry是一个抽象类，我们来看看其实现类


我们一般都用EdgeInsets类中的方法来设置padding

常用方法如下
//单独设置左上右下的间距，四个参数都要填写
const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);

//单独设置左上右下的间距，四个均为可选参数
  const EdgeInsets.only({
    this.left = 0.0,
    this.top = 0.0,
    this.right = 0.0,
    this.bottom = 0.0
  });
  
  //一次性设置上下左右的间距
  const EdgeInsets.all(double value)
      : left = value, top = value, right = value, bottom = value;
  

示例：
EdgeInsets.all（）
      padding: EdgeInsets.all(20)


EdgeInsets.fromLTRB（）
padding: EdgeInsets.fromLTRB(0,30,20,40)


EdgeInsets.only（）
 padding: EdgeInsets.only(top: 30)


shape

shape用来设置按钮的形状，其接收值是ShapeBorder类型，ShapeBorder是一个抽象类，我们来看看有哪些实现类

可以看到，实现类还是很多的，我们主要来看看常用的即可。

BeveledRectangleBorder  带斜角的长方形边框
CircleBorder  圆形边框
RoundedRectangleBorder  圆角矩形
StadiumBorder  两端是半圆的边框

我们来简单用一用，在用之前我们先来看一下

常用的两个属性

side 用来设置边线（颜色，宽度等）
borderRadius 用来设置圆角

side接收一个BorderSide类型的值，比较简单，这里就不介绍了，看一下构造方法
  const BorderSide({
    this.color = const Color(0xFF000000),
    this.width = 1.0,
    this.style = BorderStyle.solid,
  })

borderRadius 接收一个BorderRadius类型的值，常用方法如下


我们可以把borderRadius分为上下左右四个方向，下面的方法都是对这四个方向进行设置，

all   配置所有方向
cricular   环形配置，跟all效果差不多，直接接收double类型的值
horizontal   只配置左右方向
only   可选左上，右上，左下，右下配置
vertical  只配置上下方向

具体配置大家自行尝试
我们来简单用一下
BeveledRectangleBorder

带斜角的长方形边框
shape: BeveledRectangleBorder(
         side: BorderSide(
        color: Colors.white,
      ),
      borderRadius: BorderRadius.all(Radius.circular(10))
      ),


CircleBorder

圆形边框
     shape: CircleBorder(
        side: BorderSide(
          color: Colors.white,
        ),
      ),


RoundedRectangleBorder

圆角矩形
     shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),


StadiumBorder

两端是半圆的边框
 shape: StadiumBorder(),



FlatButton
FlatButton跟RaisedButton用法基本一致，下面我们就直接用一下
/*扁平按钮*/
class FlatBtn extends StatelessWidget {
  _log() {
    print("点击了扁平按钮");
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: _log,
      child: Text("扁平按钮"),
      color: Colors.blue,
      textColor: Colors.black,
      shape: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.white,
            width: 1,
          ),
          borderRadius: BorderRadius.circular(8)),
    );
  }
}



OutlineButton
注意，OutlineButton是一个有默认边线且背景透明的按钮，也就是说我们设置其边线和颜色是无效的，其他属性跟MaterialButton中属性基本一致
下面我们直接来使用

/*带边线的按钮*/
class outlineBtn extends StatelessWidget {
  _log() {
    print("点击了边线按钮");
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return OutlineButton(
      onPressed: _log,
      child: Text("边线按钮"),
      textColor: Colors.red,
      splashColor: Colors.green,
      highlightColor: Colors.black,
      shape: BeveledRectangleBorder(
        side: BorderSide(
          color: Colors.red,
          width: 1,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

效果如下：


IconButton
IconButton是直接继承自StatelessWidget的，默认没有背景

我们来看一下他的构造方法
const IconButton({
    Key key,
    this.iconSize = 24.0,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    @required this.icon,
    this.color,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    @required this.onPressed,
    this.tooltip
  }) 

可以看到，icon是必填参数
icon接收一个Widget，但是一般我们都是传入一个Icon Widget
final Widget icon;

其他属性跟MaterialButton中的属性用法基本一致
我们来用一下
/*图标按钮*/
class IconBtn extends StatelessWidget {
  _log() {
    print("点击了图标按钮");
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.home),
      onPressed: _log,
      color: Colors.blueAccent,
      highlightColor: Colors.red,
    );
  }
}

效果如下

我们也可以传一个Text或其他Widget，这个大家自行尝试吧
Flutter中Button内容大概就是这些

如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我的  Flutter 博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，转载请注明转自喻志强的博客 ，谢谢！

作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领先的开始。

微信公众号：AlbertYang

今天教大家使用CSS实现一个霓虹灯按钮动画效果，大家有什么不懂的可以留言问我，视频已经同步到B站，欢迎关注我的B站账号。




视频

视频链接：https://www.bilibili.com/video/BV1Zi4y1F7ut


                        
                        
CSS霓虹灯按钮动画，CSS实现炫酷的霓虹灯按钮动画
                    

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹灯按钮：微信公众号AlbertYang</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 容器 -->
    <div class="container">
        <!-- 按钮 -->
        <a href="#" style="--x:0"><span>关注</span></a>
        <a href="#" style="--x:1"><span>收藏</span></a>
        <a href="#" style="--x:2"><span>投币</span></a>
        <a href="#" style="--x:3"><span>点赞</span></a>
        <a href="#" style="--x:4"><span>评论</span></a>
        <a href="#" style="--x:5"><span>转发</span></a>
    </div>
</body>
</html>

CSS

/* 清除浏览器默认边距，
使边框和内边距的值包含在元素的height和width内 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* flex布局，让内容垂直和水平居中 */
body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: #000;
}
/* flex布局，让内容垂直和水平居中，超过的部分换行显示 */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
/* 按钮的基本样式 */
.container a {
    position: relative;
    padding: 15px 30px;
    margin: 50px;
    border: 2px solid #0f0;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 5px;
    color: #fff;
    filter: hue-rotate(calc(var(--x) * 60deg));
    transition: 0.5s;
}
/* 鼠标经过时改变按钮样式 */
.container a:hover {
    transition-delay: 1.5s;
    color: #000;
    box-shadow: 0 0 10px #0f0,
                0 0 20px #0f0,
                0 0 40px #0f0,
                0 0 80px #0f0,
                0 0 160px #0f0,
                0 0 320px #0f0;
}
a span {
    position: relative;
    z-index: 10;
}
/* 通过伪元素::before实现按钮左边的线 */
.container a::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f0;
    width: 20px;
    height: 2px;
    box-shadow: 5px -8px 0 #0f0,
                5px 8px 0 #0f0;
    transition: width 0.5s, height 0.5s, left 0.5s,
                 box-shadow 0.5s;
    transition-delay: 0s, 1s, 0s, 0.5s;
}
/* 鼠标经过时改变线条的样式 */
.container a:hover::before {
    width: 60%;
    height: 100%;
    left: -2px;
    box-shadow: 0 0 0 #0f0,
                0 0 0 #0f0;
}
/* 通过伪元素::after实现按钮右边的线 */
.container a::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f0;
    width: 20px;
    height: 2px;
    box-shadow: -5px -8px 0 #0f0,
                -5px 8px 0 #0f0;
    transition: width 0.5s, height 0.5s, right 0.5s,
                 box-shadow 0.5s;
    transition-delay: 0s, 1s, 0s, 0.5s;
}
/* 鼠标经过时改变线条的样式 */
.container a:hover::after {
    width: 60%;
    height: 100%;
    right: -2px;
    box-shadow: 0 0 0 #0f0,
                0 0 0 #0f0;
}



今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。有什么不明白的地方欢迎给我留言，如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！

button是一个行内块级元素display:inline-block;

所以处理方式很简单，可以用以下两种方式：

方式一：

 <div style="text-align:center">
   <button>按钮居中</button>                     
 </div>

方式二：

<div>   
   <button  style="display:block;margin:0 auto">按钮居中</button>                      
</div>

 

 

将下方代码贴到博客园中设置选项里面的页面定制CSS代码中：

/*添加按钮*/
.cnblogs-markdown pre {
  position: relative;
}
.cnblogs-markdown pre > span {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  /*注释下面这一行，button一直显示*/
  display:none;
}
.cnblogs-markdown pre:hover > span {
  display:block;
}
.cnblogs-markdown pre > .copyed {
  background: #67c23a;
}






申请JS权限；






将下方代码粘贴到页脚HTML代码区域:

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>









作者: 艾孜尔江