flutter学习笔录 基础容器widget----按钮

1.RaisedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大

const RaisedButton({

    Key key,

    @required VoidCallback onPressed, //点击回调，不写按钮是禁用状态

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

    ButtonTextTheme textTheme, //按钮的主题

    Color textColor, //文字的颜色

    Color disabledTextColor, //按钮禁用时候文字的颜色

    Color color, //按钮的背景颜色

    Color disabledColor, //按钮被禁用的时候显示的颜色

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

    Color splashColor, //水波纹的颜色

    Brightness colorBrightness, //按钮主题高亮

    double elevation, //按钮下面的阴影

    double highlightElevation, //高亮时候的阴影

    double disabledElevation, //不可用时候的阴影

    EdgeInsetsGeometry padding,  // padding间距

    ShapeBorder shape, //设置形状

    Clip clipBehavior = Clip.none,  // 据此选项，内容将被剪裁（或不剪辑）

    MaterialTapTargetSize materialTapTargetSize, // 配置点击目标的最小尺寸

    Duration animationDuration,  // 动画的持续时间

    Widget child,  // 按钮的标签部件

})

2.RaiseButton Examples

RaisedButton(

    child: Text("测试按钮"),

    onPressed: ()=>{},

    onHighlightChanged: (val)=> print(val),

    textTheme: ButtonTextTheme.accent,

    textColor: Color.fromRGBO(255, 120, 66, 0.8),

    disabledTextColor: Color(0xffae00),

    color: Colors.green,

    disabledColor: Colors.deepOrange,

    colorBrightness: Brightness.light,

    elevation: 6.0,

    padding: EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 15.0),  // left,top,right,bottom

    clipBehavior: Clip.hardEdge,

    shape: RoundedRectangleBorder(
        side: BorderSide(width: 1.0,color: Colors.redAccent),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.0))
    ),
),

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

 const FlatButton({

    Key key,

    @required VoidCallback onPressed,

    ValueChanged onHighlightChanged,

    ButtonTextTheme textTheme,

    Color textColor,

    Color disabledTextColor,

    Color color,

    Color disabledColor,

    Color highlightColor,

    Color splashColor,

    Brightness colorBrightness,

    EdgeInsetsGeometry padding,

    ShapeBorder shape,

    Clip clipBehavior = Clip.none,

    MaterialTapTargetSize materialTapTargetSize,

    @required Widget child,
 }) 

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

const OutlineButton({

      Key key,

      @required VoidCallback onPressed,

      ButtonTextTheme textTheme,

      Color textColor,

      Color disabledTextColor,

      Color color,

      Color highlightColor,

      Color splashColor,

      double highlightElevation: 2.0,

      BorderSide borderSide,

      Color disabledBorderColor,

      Color highlightedBorderColor,

      EdgeInsetsGeometry padding,

      ShapeBorder shape,

      Clip clipBehavior: Clip.none,

      Widget child
})

5.IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景

const IconButton({

    Key key,

    double iconSize: 24.0,  //大小

    EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),

    AlignmentGeometry alignment: Alignment.center,  //对齐方式

    @required Widget icon,  //图标

    Color color,

    Color highlightColor,

    Color splashColor,

    Color disabledColor,

    @required VoidCallback onPressed,

    String tooltip  // 长按后显示的提示
})

6.icon Example

 IconButton(

      icon: Icon(Icons.settings_overscan),

      padding: EdgeInsets.all(10.0),

      alignment: Alignment.center,

      color: Colors.brown,

      splashColor: Colors.lightGreen,

      highlightColor: Colors.redAccent,

      onPressed: ()=>{}, 

      tooltip: "这是个按钮",

      iconSize: 60,

 ),