[Day9] Flutter - 按钮元件 ( Button )

前言

Hi, 我是鱼板伯爵今天要教大家 Button 这个元件，教学内容只会撷取片段程序码，建议大家搭配完整程序码来练习。

完整程序码

Button

• IconButton：图示按钮
• TextButton：文字按钮
• OutlineButton：边框按钮
• ElevatedButton：漂浮按钮

IconButton 元件，常用属性

可以加入小图标的按钮

• color：Icon的颜色
• highlightColor：当按钮按下时的颜色
• splashColor：当按钮按下时的水波颜色
• icon：按钮Icon
• onPressed：按钮按下时所调用的逻辑，若为null则不使用
• iconSize: Icon大小，预设为24

class DemoIconButton extends StatelessWidget {
  const DemoIconButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: IconButton(
        iconSize: 50,
        color: Colors.amber,
        // 水波和触发颜色为透明
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
        icon: Icon(Icons.ac_unit),
        onPressed: () {
          log("click", name: "INFO");
        },
      ),
    );
  }
}

TextButton 元件，常用属性

文字按钮

• style：利用TextButton.styleFrom变更按钮颜色、风格
• child：子元件
• onPressed：点击按钮时触发的逻辑
• onLongPress：长压按钮时触发的逻辑

class DemoTextButton extends StatelessWidget {
  const DemoTextButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextButton(
        child: Text(
          "Hello",
          style: TextStyle(color: Colors.white),
        ),
        style: TextButton.styleFrom(
          backgroundColor: Colors.green,
        ),
        onPressed: () {
          log("click", name: "INFO");
        },
        onLongPress: () {
          log("long click", name: "INFO");
        },
      ),
    );
  }
}

OutlinedButton 元件，常用属性

会有编框的按钮

• style：利用OutlinedButton.styleFrom变更按钮颜色、风格
• child：子元件
• onPressed：点击按钮时触发的逻辑
• onLongPress：长压按钮时触发的逻辑

class DemoOutlinedButton extends StatelessWidget {
  const DemoOutlinedButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: OutlinedButton(
        child: Text("Hello"),
        style: OutlinedButton.styleFrom(
          primary: Colors.white,
          backgroundColor: Colors.blueGrey,
        ),
        onPressed: () {
          log("click", name: "INFO");
        },
        onLongPress: () {
          log("long click", name: "INFO");
        },
      ),
    );
  }
}

ElevatedButton 元件，常用属性

这个按钮会有漂浮的感觉。

• style：利用ElevatedButton.styleFrom变更按钮颜色、风格
• child：子元件
• onPressed：点击按钮时触发的逻辑
• onLongPress：长压按钮时触发的逻辑

class DemoElevatedButton extends StatelessWidget {
  const DemoElevatedButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ElevatedButton(
        child: Text("Hello"),
        style: ElevatedButton.styleFrom(
          elevation: 20,
        ),
        onPressed: () {
          log("click", name: "INFO");
        },
      ),
    );
  }
}

锁住按钮

若将onPressed後面带null的话，按钮就会变成灰色不能按。

class DemoNullButton extends StatelessWidget {
  const DemoNullButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: OutlinedButton(
        child: Text("Hello"),
        onPressed: null,
      ),
    );
  }
}