Flutter中常用的按钮组件-FlatButton(扁平化的按钮)

Posted 2023-02-24 不二菜菜子

//扁平化的按钮，继承自MaterialButton
new FlatButton(
//点击事件
    onPressed: () 
      print("哎呀，不好被点击了~~");
    ,
//按钮背景颜色
    color: Colors.blue,
//按钮文本控件，一般都传入的是Text Widget
    child: new Text(
"点击登录",
      style: new TextStyle(
// color: Colors.lightGreen,
        // backgroundColor: Colors.deepOrangeAccent
      ),
    ),

//按钮文本颜色，当与上方Text Widget共用时，会被Text Widget覆盖
    textColor: Colors.deepPurple,
//按下后水波纹颜色
    splashColor: Colors.white,
//长按时，高亮显示颜色
    highlightColor: Colors.amber,
//禁用时的颜色
    disabledColor: Colors.tealAccent,
//禁用时的文本颜色
    disabledTextColor: Colors.purple,

//按钮向外扩充区域
    //EdgeInsets:all---四周均向外扩充设置大小距离;
    //EdgeInsets:fromLTRB---分别指定四个方向的填充；
    //EdgeInsets:symmetric---用于设置对称方向的填充，vertical：top,bottom；horizontal:left,right
    //EdgeInsets:only---可以设置具体方向的填充，单个或者多个，也可以不设置即为默认大小
    padding: EdgeInsets.all(3),
//shape:用于设置按钮的形状，其接收值是ShapeBorder
    //shape:BeveledRectangleBorder--带斜角的长方形边框
    //shape:CircleBorder--圆形边框
    //shape:RoundedRectangleBorder--圆角矩形
    //shape:ContinuousRectangleBorder--圆形矩形
    //shape:StadiumBorder --两边圆形
    shape: BeveledRectangleBorder(
      side: new BorderSide(
        color: Colors.black87,
      ),
//边框颜色
      //BorderRadius:all---四周控制
      //BorderRadius:only---四周可单独设置或多个设置也可以不设置:topLeft,topRight,bottomLeft,bottomRight
      //BorderRadius:vertical---垂直方向:top,bottom
      //BorderRadius:horizontal---水平方向:left,right

      borderRadius:
new BorderRadius.horizontal(left: Radius.circular(12)),
    )),


//注：FlatButton与RaisedButton的区别在于没有elevation阴影属性，其他基本一致