前端學習-flutter學習-010-按鈕

ayubene發表於2024-07-14
前端Flutter

《Flutter實戰·第二版》

ElevatedButton(
    child: Text("ElevatedButton 預設帶有陰影和灰色背景。按下後，陰影會變大"),
    onPressed: () {},
  ),
  TextButton(
    child: Text("TextButton 預設背景透明並不帶陰影。按下後，會有背景色"),
    onPressed: () {},
  ),
  OutlinedButton(
    child: Text("OutlinedButton 預設有一個邊框，不帶陰影且背景透明。按下後，邊框顏色會變亮、同時出現背景和陰影(較弱)"),
    onPressed: () {},
  ),
  IconButton(
    icon: Icon(Icons.thumb_up),
    onPressed: () {},
  ), // IconButton是一個可點選的Icon，不包括文字，預設沒有背景，點選後會出現背景
  // ElevatedButton、TextButton、OutlinedButton都有一個icon 建構函式，透過它可以輕鬆建立帶圖示的按鈕，
  ElevatedButton.icon(
    icon: Icon(Icons.send),
    label: Text("傳送"),
    onPressed: () {},
  ),
  OutlinedButton.icon(
    icon: Icon(Icons.add),
    label: Text("新增"),
    onPressed: () {},
  ),
  TextButton.icon(
    icon: Icon(Icons.info),
    label: Text("詳情"),
    onPressed: () {},
  ),

相關文章