Flutter之Button的基本使用

学习flutter的时候做的笔记，方便以后查看。

Flutter的按钮有很多种，大致的使用方法是差不多的。

1、MaterialButton

MaterialButton(
  onLongPress: () {
    //长按事件处理
  },
  onPressed: () {
    //点击事件处理
  },
  minWidth: double.infinity,//设置按钮最小宽度 = 充满屏幕
  height: 50,//  设置按钮高度
  color: Colors.green,//设置按钮背景颜色
  textColor: Colors.white, //设置按钮文本颜色
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),//设置按钮圆角
  child: const Text(
    "MaterialButton",
    style: TextStyle(
      color: Colors.red, //设置按钮文本颜色,可覆盖textColor的值
    ),
  ), //设置按钮文本
)

2、ElevatedButton

SizedBox(
  width: double.infinity,//设置按钮显示宽度
  height: 50,//设置按钮显示高度
  child: ElevatedButton(
    onLongPress: (){
      //长按事件处理
    },
    onPressed: () {
      //点击事件处理
    },
    style: const ButtonStyle(
          backgroundColor: MaterialStatePropertyAll<Color>(Colors.green),//设置按钮背景颜色
        ),
    child: const Text(
      "ElevatedButton",//设置按钮文本内容
      style: TextStyle(color: Colors.white),//设置按钮文本颜色
    ),
  ),
)

3、OutlinedButton

SizedBox(
  width: double.infinity,//设置按钮显示宽度
  height: 50,//设置按钮显示高度
  child:  OutlinedButton(
    onLongPress: (){
      //长按事件处理
    },
    onPressed: () {
      //点击事件处理
    },
      style: ButtonStyle(
        side: MaterialStateProperty.all(const BorderSide(width:1,color: Colors.green))//设置按钮背景颜色
      ),
      child:const Text(
        "OutlinedButton",//设置按钮文本内容
        style: TextStyle(color: Colors.red),//设置按钮文本颜色
      ),
  )
)