iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Mobile Development

30天 - Flutter 日常系列 第 9

[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,
      ),
    );
  }
}


上一篇
[Day8] Flutter - 顯示文字元件 ( Text )
下一篇
[Day10] Flutter - 文字輸入元件 ( TextField )
系列文
30天 - Flutter 日常30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言