在Flutter中，ElevatedButton是一個(gè)常見(jiàn)的組件，用于創(chuàng)建具有高亮顯示效果的按鈕。有時(shí)我們可能需要根據(jù)特定的需求來(lái)自定義ElevatedButton的形狀和顏色。介紹如何在Flutter中自定義ElevatedButton的形狀和顏色。

1. 使用Material Design樣式

我們可以使用Material Design樣式來(lái)自定義ElevatedButton的形狀和顏色。要實(shí)現(xiàn)這一點(diǎn)，我們需要導(dǎo)入material_design_icons包，并使用ElevatedButton的style屬性來(lái)設(shè)置樣式。

import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('自定義ElevatedButton')),
        body: Center(child: CustomElevatedButton()),
      ),
    );
  }
}

class CustomElevatedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
        elevation: MaterialStateProperty.all<double>(5.0),
        padding: MaterialStateProperty.all<EdgeInsets<2>>(EdgeInsets.all(8.0)),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
      ),
      onPressed: () {},
      child: Text('點(diǎn)擊我'),
    );
  }
}

在上面的代碼中，我們使用了MaterialStateProperty來(lái)設(shè)置背景顏色、陰影、內(nèi)邊距和形狀。通過(guò)這種方式，我們可以自定義ElevatedButton的形狀和顏色。

2. 使用自定義樣式

除了使用Material Design樣式外，我們還可以使用自定義樣式來(lái)自定義ElevatedButton的形狀和顏色。要實(shí)現(xiàn)這一點(diǎn)，我們需要?jiǎng)?chuàng)建一個(gè)自定義的樣式類，并在需要的地方使用它。

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('自定義ElevatedButton')),
        body: Center(child: CustomElevatedButton()),
      ),
    );
  }
}

class CustomElevatedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith((states) {
          if (states.contains(MaterialState.pressed)) {
            return Colors.red; // 當(dāng)按鈕被按下時(shí)，背景顏色變?yōu)榧t色
          } else {
            return Colors.blue; // 當(dāng)按鈕未被按下時(shí)，背景顏色為藍(lán)色
          }
        }),
        elevation: MaterialStateProperty.resolveWith((states) {
          if (states.contains(MaterialState.pressed)) {
            return 5.0; // 當(dāng)按鈕被按下時(shí)，陰影變?yōu)?像素
          } else {
            return 0; // 當(dāng)按鈕未被按下時(shí)，陰影為0像素
          }
        }),
        padding: MaterialStateProperty.resolveWith((states) {
          if (states.contains(MaterialState.pressed)) {
            return EdgeInsets.all(8.0); // 當(dāng)按鈕被按下時(shí)，內(nèi)邊距變?yōu)?像素
          } else {
            return EdgeInsets.all(4.0); // 當(dāng)按鈕未被按下時(shí)，內(nèi)邊距為4像素
          }
        }),
        shape: MaterialStateProperty.resolveWith((states) {
          if (states.contains(MaterialState.pressed)) {
            return RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ); // 當(dāng)按鈕被按下時(shí)，形狀變?yōu)閳A形
          } else {
            return RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0),
            ); // 當(dāng)按鈕未被按下時(shí)，形狀為正方形
          }
        }),
      ),
      onPressed: () {},
      child: Text('點(diǎn)擊我'),
    );
  }
}

在上面的代碼中，我們使用了MaterialStateProperty來(lái)設(shè)置按鈕的狀態(tài)，并根據(jù)不同的狀態(tài)來(lái)設(shè)置背景顏色、陰影、內(nèi)邊距和形狀。通過(guò)這種方式，我們可以自定義ElevatedButton的形狀和顏色。