iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Mobile Development

初窺Flutter系列 第 16

Buttom (按鈕)

  • 分享至 

  • xImage
  •  

按鈕是提供使用者與app互動的功能,在Flutter中提供多種不同風格的buttom 讓開發著一句不同需求做選擇

1.ElevatedButton:凸起按鈕

ElevatedButton(
  onPressed: () {
    // 在按下按鈕時執行的操作
  },
  child: Text('提交'),
)

https://ithelp.ithome.com.tw/upload/images/20231001/20162684tlpkWamwmZ.png
2.TextButton:文本按鈕

TextButton(
  onPressed: () {
    // 在按下按鈕時執行的操作
  },
  child: Text('提交'),
)

https://ithelp.ithome.com.tw/upload/images/20231001/20162684p1qTarVisN.png
3.OutlinedButton:邊框按鈕

OutlinedButton(
  onPressed: () {
    // 在按下按鈕時執行的操作
  },
  child: Text('提交'),
)

https://ithelp.ithome.com.tw/upload/images/20231001/20162684rYWe04WHj6.png
4.IconButton:圖標按鈕

IconButton(
   onPressed: () {
      // 在按下按鈕時執行的操作
   },
   icon: Icon(Icons.add_a_photo), // 在此設置圖標
)

https://ithelp.ithome.com.tw/upload/images/20231001/20162684r284k9uB5P.png

若要處理按鈕點及的事件,可寫在onPressed:()中


上一篇
Positioned(層疊定位)
下一篇
Flutter 手勢-滑動刪除
系列文
初窺Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言