Flutter基础控件：RaisedButton、 MaterialButton、 FloatingActionButton

@TOCRaisedButton
Material Design中的button， 一个凸起的材质矩形按钮

属性

onPressed

点击事件。如果传递了 null 值，整个按钮是不可点击的，disabled 状态

onLongPress

长按事件

onHighlightChanged

水波纹高亮变化回调,按下返回true,抬起返回false

textTheme

按钮的主题
enum ButtonTextTheme {
/// Button text is black or white depending on [ThemeData.brightness].
normal,
/// 字体变成了主题同一颜色。
accent,
/// Button text is based on [ThemeData.primaryColor].
primary,
}

textColor

文字的颜色

disabledTextColor

按钮禁用时候文字的颜色

color

按钮的背景颜色

disabledColor

按钮被禁用的时候显示的颜色

focusColor

联动节点获得焦点时的颜色

hoverColor

鼠标悬停时的颜色

highlightColor

点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色

splashColor

水波纹的颜色

RaisedButton(
  splashColor: Colors.pink,
  child: Text('波纹'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(25),
  ),
  onPressed: () {},
),

colorBrightness

按钮主题高亮

elevation

按钮下面的阴影，值越大阴影范围越大

focusElevation

联动节点获得焦点时的阴影尺寸

hoverElevation

鼠标悬停时阴影尺寸

highlightElevation

高亮时候的阴影

disabledElevation

按下的时候的阴影

padding

内间距

shape

形状

基于ShapeBorder的类有四个，下面看一下这四个类。
//圆形
const CircleBorder({
  BorderSide side: BorderSide.none
})
//斜角（了解过机械的话可以理解成倒角）
const BeveledRectangleBorder({
  BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero
})
//圆角
const RoundedRectangleBorder({
  BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero
})
//也是圆角，但是和RoundedRectangleBorder不同，有最大值，超过最大值以最大值显示。
const ContinuousRectangleBorder({
  BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero
})

RaisedButton(
  child: Text('圆角按钮'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(25),
  ),
  onPressed: () {},
),

clipBehavior

剪裁

枚举值
Clip.hardEdge
Clip.antiAlias
Clip.antiAliasWithSaveLayer
Clip.none

focusNode

联动节点

autofocus

materialTapTargetSize

设置按钮点击区域大小

animationDuration

水波纹动画持续时间

new Expanded(
     child: RaisedButton(
           onPressed: () {},
           animationDuration: Duration(milliseconds: 400),
           textTheme: ButtonTextTheme.normal,
           splashColor: Colors.pink,
           color: Colors.red,
           textColor: Colors.white,
           disabledColor: Colors.blueGrey,
           child: Text('Button', style: TextStyle(fontSize: 12)),
      ),
),

child

一般是Text widget

RaisedButton 本身不支持宽度和高度的属性控制，如果要指定宽度和高度，可以借助 Container Widget，指定 Container 宽度和高度即可同时控制 Button 宽度和高度

Container(
  width: 300,
  height: 50,
  child: RaisedButton(
    child: Text('宽度高度按钮'),
    onPressed: () {},
  ),
),

MaterialButton

RaisedButton不支持宽高但是 MaterialButton支持 minWidth（最小宽）和hight（高）

OutlineButton

默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。

disabledBorderColor

禁用时边框颜色，默认为灰色。

borderSide

边框样式，color和width没啥说的，一个颜色一个宽度，style要说一下，这个只有solid和none，也就是说只有实线边框和没有边框。

RaisedButton

和MaterialButton默认样式不同，默认带有阴影和灰色背景。按下后，阴影会变大没有height和minWidth。

FlatButton

扁平按钮，默认背景透明并不带阴影。按下后，会有背景色。

FloatingActionButton

页面的悬浮按钮。

const FloatingActionButton({
  Key key,
  Widget child,
  String tooltip,
  Color foregroundColor,          //前景色，不会覆盖文字，加了之后改变了文字的颜色
  Color backgroundColor,        //背景色
  Color focusColor,
  Color hoverColor,
  Object heroTag: const _DefaultHeroTag(),      //动画效果
  double elevation,
  double focusElevation, 
  double hoverElevation, 
  double highlightElevation,  
  double disabledElevation,   
  @required VoidCallback onPressed,
  bool mini: false,                    //为true时按钮尺寸会变小
  ShapeBorder shape,
  Clip clipBehavior: Clip.none,
  FocusNode focusNode, 
  MaterialTapTargetSize materialTapTargetSize,
  bool isExtended: false              //是否扩展
})

heroTag

设置为null，则不启用过渡动画，如果悬浮按钮在两个页面内的位置不同，页面切换时动作生硬。不设置的话为默认值，平滑过渡。

mini

为true时为按钮会缩小，但是要注意的是，这个缩小只是尺寸缩小，不是整体缩放，内容大小还是需要手动设置

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
             print(1);
          },
          child: Icon(Icons.add)
        ),
      )
    );
  }
}

圆角Button

Widget loginBtn() {
  return Container(
    height: BaseSize.dp(40),
    width: double.infinity,
    padding: EdgeInsets.only(right: BaseSize.dp(35), left: BaseSize.dp(35)),
    child: RaisedButton(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(28),
          side: BorderSide(color: Colors.red)),
      color: Colors.white,
      elevation: 0,
      highlightElevation: 0,
      disabledElevation: 0,
      onPressed: () {},
      child: Text('登录'),
    ),
  );
}