【Flutter 程式設計入門實戰 30 天】Day 10：Button 按鈕元件
【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。
哈囉～大家好，我是 KT ，今天實戰第十天，KT 將為大家來介紹，Button 按鈕元件。
Button 按鈕元件
Flutter 常用的 Button 按鈕
- RaisedButton：凸起按鈕
- FlatButton：扁平化按鈕
- OutlineButton：邊框按鈕
- IconButton：圖示按鈕
RaisedButton 按鈕元件，常用的屬性
onPressed：按鈕按下後觸發的方法邏輯程式，若是 null 則不能用此按鈕。(★最重要★)
color：按鈕顏色
textColor：按鈕中顯示文字的顏色
elevation：按鈕陰影大小值
起手式範例
套用下方 Button 按鈕元件範例，可以使用此起手式範例，只要更改程式碼中的「更改此處程式碼」即可。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('HKT線上教室'),
),
body: HomePage(),
));
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text('按鈕'),
));
}
}
範例：點擊按鈕，觸發執行指定函數事件
onPressed 欄位，指定自定義一個函數名稱為 「btnClickEvent」，當按鈕被按下時，則會去執行此函數邏輯區塊邏輯功能。
RaisedButton(
child: Text('按鈕'),
onPressed: btnClickEvent,
)
//當按鈕被按下，則會執行此函數區塊的邏輯程式
void btnClickEvent() {
print('btnClickEvent...');
}
執行畫面
完整程式碼
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('HKT線上教室'),
),
body: HomePage(),
));
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text('按鈕'),
onPressed: btnClickEvent,
));
}
void btnClickEvent() {
print('btnClickEvent...');
}
}
範例：更改按鈕顏色
RaisedButton(
child: Text('按鈕'),
onPressed: btnClickEvent,
color: Colors.red,
)
執行畫面
範例：更改按鈕內文字顏色
RaisedButton(
child: Text('按鈕'),
onPressed: btnClickEvent,
textColor: Colors.amber
)
執行畫面
範例：更改按鈕陰影大小值
RaisedButton(
child: Text('按鈕'),
onPressed: btnClickEvent,
elevation: 20,
)
執行畫面
補充資料
RaisedButton 目前已過時，新版 Flutter 2 採用 ElevatedButton ，更多詳細內容，可參考: New Buttons and Button Themes
ElevatedButton(
child: Text('按鈕'),
onPressed: btnClickEvent,
)
執行畫面
那今天就介紹到這邊囉～
順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉！！！掰掰～
參考資料
HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com
