Flutter學習-6 Button組件

Flutter不同類型的按鈕很多，改版的flutter為了讓Button在使用時可以統一外觀，支援web或是桌面程式在滑鼠和鍵盤上的運用，因此棄用了一些按鈕(點我)，把Button的類型樣式統一放在 ButtonStyle中規劃。並配合material Design這個模版設計，引入了MaterialStateProperty這個類別。

以下介紹幾個常會用到的Button

一、ElevatedButton （會有飄浮感覺的按鈕，原為RaiseButton，Flutter 2.0使用ElevatedButton）

主要有下列幾種屬性及方法，onPressed(點擊)、onLongPress（長按點擊）、onFocusChange(焦點改變)、onHover(滑鼠滑過)、style（按鈕屬性）、focusNode(焦點)、clipBehavior(剪裁樣式)、autofocus(自動對焦)、child（包含組件），其中onPressed及child為必要參數，有些屬性是用於滑鼠，或鍵盤上，在手機上沒有作用。

const ElevatedButton({
Key? key, //key，可視作此button的id
required VoidCallback? onPressed, //點擊時要有的反應 onPressed: () {},
VoidCallback? onLongPress, //長點擊的反應 onPressed: () {},
ValueChanged<bool>? onHover, //滑鼠滑過時的作用，注意是滑鼠
ValueChanged<bool>? onFocusChange, //焦點改變時的作用,
ButtonStyle? style, //設定button的基本樣式 stytle:ButtonStyle()
FocusNode? focusNode,
bool autofocus = false, //是否自動對焦
Clip clipBehavior = Clip.none, //採取的剪裁方式 .nono .hardEdge(剪裁稍快，易失真，有矩齒)  .antiAlias(剪的速度在中間) .antiAliasWithSaveLayer(剪裁慢，品質較佳)
required Widget? child, //必需給值，一般都給按鍵的文字

其中style的部份有下列項目：記得都要先加MaterialStateProperty.all() 或是 MaterialStateProperty..resolveWith() MaterialStateProperty..resolve()

const ButtonStyle({
  this.textStyle, //文字樣式
  this.backgroundColor, //背景顏色
  this.foregroundColor, //前景顏色
  this.overlayColor, //按鈕處於焦點時的顏色
  this.shadowColor, //陰影顏色
  this.elevation, //按鈕陰影大小
  this.padding, //內距
  this.minimumSize, //按鈕最小值
  this.fixedSize, //按鈕大小
  this.maximumSize, //按鈕大小
  this.side, //邊框
  this.shape, //外形
  this.mouseCursor, //滑鼠進入時的圖示
  this.visualDensity, //按鈕圖示可顯示區域
  this.tapTargetSize, //點擊區域大小
  this.animationDuration, //動畫顯示時間
  this.enableFeedback, //手勢是否提供聲音及觸覺回饋
  this.alignment, //對齊方式
  this.splashFactory, //
});

範例:

ElevatedButton(
  onPressed: () {
    print('點擊');
  },
  onLongPress: () {
    print('長點擊');
  },
  autofocus: false,
  //.false 不自動對焦 .true 自動對焦
  clipBehavior: Clip.antiAliasWithSaveLayer,
  child: Text('ElevetedButton懸浮按鈕'),
  style: ButtonStyle(
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 18)),
    backgroundColor: MaterialStateProperty.all(Colors.green),
    //背景色
    foregroundColor: MaterialStateProperty.all(Colors.blue),
    //前景色
    overlayColor: MaterialStateProperty.all(Colors.red),
    //按鈕處於hover、pressed時的顏色
    shadowColor: MaterialStateProperty.all(Colors.black),
    //陰影顏色
    elevation: MaterialStateProperty.all(10),
    //陰影值
    padding: MaterialStateProperty.all(EdgeInsets.all(10)),
    //內距
    minimumSize: MaterialStateProperty.all(Size(10, 10)),
    //最小size
    fixedSize: MaterialStateProperty.all(Size.fromWidth(320)),
    //採用固定尺寸
    maximumSize: MaterialStateProperty.all(Size.infinite),
    //最大尺寸
    side: MaterialStateProperty.all(
      BorderSide(
          color: Colors.red,
          width: 1,
          style: BorderStyle.solid), //設定邊線的顏色，寬度和線是solid(實線)還是none
    ),
    //邊框
    shape: MaterialStateProperty.all(
      CircleBorder(
        side: BorderSide(
            color: Colors.red, width: 1, style: BorderStyle.solid),
      ),
    ),
  ),
),
ElevatedButton(
  onPressed: null, //null時無法點擊
  style: ButtonStyle(
    side: (MaterialStateProperty.all(
      //設定邊線顏色，寬度和是否要有邊線
      BorderSide(
        color: Colors.black, //顏色
        width: 1.0, //寬度
        style: BorderStyle.solid, //實線
      ),
    )),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
      //設定為邊角為圓弧的矩形
      side: BorderSide(
        color: Colors.red,
        width: 2.0,
      ),
      borderRadius: BorderRadius.circular(10), //圓角的弧度
    )),
  ),
  child: Text('矩形有邊角按鈕'),
),

如果覺得用MaterialStateProperty太麻煩，可以用.styleFrom簡化設定你需要的按鈕變化即可

如以下的範例:

ElevatedButton(
  child: Text('透過styleFrom簡化按鈕stytle操作'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
      primary: Colors.orange,
      shape: RoundedRectangleBorder(
        //設定為邊角為圓弧的矩形
        side: BorderSide(
          color: Colors.red,
          width: 2.0,
        ),
        borderRadius: BorderRadius.circular(10), //圓角的弧度
      )),
),

按鈕如果要有不同的外形，請參考此網頁，自行調整shape的設定

【Flutter 实战】各种各样形状的组件 - 老孟Flutter - 博客园 (cnblogs.com)

二、TextButton （文字型的按鈕）

方法大致與ElevatedButton相同。

三、OutlineButton （有邊框的按鍵）

方法大致與ElevatedButton相同。

四、IconButton 

(1)需要的Icon圖形可至以下網站查找

https://fonts.google.com/icons

https://fontawesome.com

(2)設定Icons的size寫法為

IconButton(iconSize:72,onPressed: (){}, icon: Icon(Icons.remove_circle))

也可以把大小寫在icons裡面，如：

IconButton(onPressed: (){}, icon: Icon(Icons.remove_circle,size: 72,))

不過這兩者有所不同，前面會配合iconSize，將整個IconButton的大小進行調整，後面的只會調整 Icon的大小。因此可能出現Icon的圖會變得很大的情況，官網中建議採用第一種作法。

五、FloatingActionButton

六、放置按鈕的容器組件

另外，還有兩個將按鈕組合成群組的widget

ButtonBar(將群組整合的組件)

const ButtonBar({
  Key? key, 
  this.alignment, //對齊方式,默認為end，靠左對齊
  this.mainAxisSize, //主軸佔用的空間，mainAxisSize = MainAxisSize.max or MainAxisSize.min
  this.buttonTextTheme, //按鍵的文字預設主題
  this.buttonMinWidth,//按鈕最小的寬度
  this.buttonHeight, //按鈕高度
  this.buttonPadding, //內距
  this.buttonAlignedDropdown, //按鍵落下對齊的方式，預設為false
  this.layoutBehavior,
  this.overflowDirection, //超過最大長度時排序的方式，UP及donw
  this.overflowButtonSpacing, //外間距
  this.children = const <Widget>[],
}) 

ToggleButtons (1.9版新增)

ToggleButtons詳細的用法可以參考下列的網頁

https://blog.csdn.net/weixin_39748858/article/details/112102952

https://zhuanlan.zhihu.com/p/391049262

ink 和inkwell

https://blog.csdn.net/chuyouyinghe/article/details/118490958

參考網頁：

https://www.gushiciku.cn/pl/pTDA/zh-tw

https://www.jianshu.com/p/88cdb7b8d67a