Flutter中常用的Button

• RaisedButton ：凸起的按钮
• FlatButton ：扁平化的按钮
• OutlineButton ：带边框的按钮
• IconButton ：图标按钮 继承StatelessWidget

微信图片_20201126174745.png

flutter中的Button基本上都是继承MaterialButton
先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。

  const MaterialButton({
    Key key,
    @required this.onPressed,   //按下事件
    this.onLongPress,    //长按事件
    this.onHighlightChanged, //水波纹高亮变化回调
    this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
    this.textTheme, //按钮的主题
    this.textColor, //文字的颜色
    this.disabledTextColor, //按钮禁用时候文字的颜色
    this.color, //按钮的背景颜色
    this.disabledColor, //按钮禁用的背景颜色
    this.focusColor, //获取焦点的颜色
    this.hoverColor, //悬停颜色
    this.highlightColor, //点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色
    this.splashColor, //水波纹的颜色
    this.colorBrightness, //按钮主题高亮
    this.elevation, //按钮下面的阴影
    this.focusElevation, //获取焦点的阴影
    this.hoverElevation,  //悬停的阴影
    this.highlightElevation, //高亮时候的阴影
    this.disabledElevation,    //未设置点击时的阴影高度
    this.padding,  //内边距
    this.visualDensity, // 按钮布局的紧凑程度
    this.shape, //设置形状
    this.clipBehavior = Clip.none,
    this.focusNode, //在Flutter使用FocusNode来捕捉监听焦点获取与失去
    this.autofocus = false,
    this.materialTapTargetSize, //是配置组件点击区域大小的属性，很多组件都有
    this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
    this.minWidth, //最小宽度
    this.height, //高度
    this.enableFeedback = true, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上
    // ，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
    this.child, //子view
  }) : assert(clipBehavior != null),

RaisedButton VS FlatButton

FlatButton 和 RaisedButton 属性差不多

• RaisedButton ：凸起的按钮
• FlatButton ：扁平化的按钮

shape

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

微信图片_20201126181559.png

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

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

常用的两个属性

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

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

borderRadius

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

---

OutlineButton

OutlineButton默认带有一个边框，我们可以通过属性指定正常状态，跟用户点击状态下的边框颜色。
常用的属性

  @required VoidCallback onPressed,
  ButtonTextTheme textTheme,  //按钮上字体主题
  Color textColor,  //字体颜色
  Color disabledTextColor, //按钮禁用时候文字的颜色
  Color color,  //按钮背景颜色
  Color highlightColor,//点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色
  Color splashColor, //水波纹的颜色
  double highlightElevation,//高亮时候的阴影
  this.borderSide,//按钮边框
  this.disabledBorderColor, //按钮禁用时边框的颜色
  this.highlightedBorderColor,//高亮时边框的颜色
  EdgeInsetsGeometry padding,//边距
  ShapeBorder shape, //设置shape
  Clip clipBehavior = Clip.none,
  Widget child,

简单效果图

代码

import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      RaisedButton(
        child: Text("normal"),
        onPressed: () {},
      ),
      FlatButton(onPressed: () {}, child: Text("normal")),
      OutlineButton(
        child: Text("normal"),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.thumb_up),
        onPressed: () {},
      ),
      RaisedButton.icon(
          onPressed: () {}, icon: Icon(Icons.send), label: Text("发送")),
      FlatButton(
        color: Colors.blue,
        highlightColor: Colors.blue[700],
        colorBrightness: Brightness.dark,
        splashColor: Colors.grey,
        child: Text("Submit"),
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
        onPressed: () {},
      ),
      RaisedButton(
        color: Colors.blue,
        highlightColor: Colors.blue[700],
        colorBrightness: Brightness.dark,
        splashColor: Colors.grey,
        child: Text("Submit"),
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
        onPressed: () {},
      ),
      //自定义button
      FlatButton(
          color: Colors.amberAccent,
          onPressed: () {},
          shape:RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20)
          ) ,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [Icon(Icons.label_important_outlined), Text("喜欢")],
          )),
    ])));
  }
}