IconButton

如果即是一個圖標又想點擊，那么就用這個

IconButton(icon: Icon(Icons.close),onPressed: (){//} )

普通按鈕FlatButton

這種按鈕沒有深度，所以沒有陰影，一個例子

FlatButton(child: Text("去補測"),onPressed: (){}, )

這是一個普通的按鈕，無背景的。如果想添加背景，可以添加color: Colors.XXX, 如下

FlatButton(color: Colors.blue,textColor: Colors.white,child: Text("去補測"),onPressed: (){}, )

這樣就是一個藍色背景白色字體的按鈕。

注意如果要顯示背景，必須設置onPressed，否則即使設置了color依然沒有背景色顯示

但是這個背景并不是圓角的（其實有一點點圓角），如果想實現圓角，則需要添加shape，如下：

FlatButton(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),color: Colors.blue,textColor: Colors.white,child: Text("去補測"),onPressed: (){}, )

這樣就添加了大小為10的圓角。但是如果我們想實現邊框背景，即中間透明四周有邊框的，需要修改shape如下：

FlatButton(shape: RoundedRectangleBorder(side: BorderSide(color: Colors.blue,width: 1,),borderRadius: BorderRadius.circular(10),),color: Colors.transparent,textColor: Colors.blue,child: Text("去補測"),onPressed: (){}, )

注意color改成透明的了，這樣就實現了邊框背景，且帶有圓角。

其他button

其他如MaterialButton等，有的是有陰影的，不過使用方式大致一樣。

去除默認間距

在flutter中使用button組件，默認四周是有間距的，如果想去掉這個間距，直接設置padding是不夠的，比如

FlatButton(padding: EdgeInsets.all(0),child: Text("1"),onPressed: (){...}, ),

設置完會發現沒有效果，文字四周還是有間距。這是因為全局默樣式ButtonTheme導致的，影響這個間距的因素有兩個。

第一個就是寬高，因為button的高度可以通過height設置，但是沒有width屬性，所以寬度無法設置固定。所以這里的關鍵就是minWidth，在ButtonTheme中的minWidth默認是88，如下

const ButtonThemeData({this.textTheme = ButtonTextTheme.normal,this.minWidth = 88.0,this.height = 36.0,EdgeInsetsGeometry padding,ShapeBorder shape,this.layoutBehavior = ButtonBarLayoutBehavior.padded,this.alignedDropdown = false,Color buttonColor,Color disabledColor,Color focusColor,Color hoverColor,Color highlightColor,Color splashColor,this.colorScheme,MaterialTapTargetSize materialTapTargetSize,})

這個就導致了我們無論如何設置padding，寬度都不會小于88。

要改變這個值可以不用修改樣式，直接通過button的minWidth屬性即可，如：

FlatButton(minWidth: 0, padding: EdgeInsets.all(0),child: Text("1"),onPressed: (){...}, ),

修改了minWidth后再運行看效果，發現按鈕寬度減少了，但是兩邊還有間距。這就是第二個影響因素：padding。

我們不是已經將padding設置為0了么？看一下FlatButton源碼：

@override Widget build(BuildContext context) {final ThemeData theme = Theme.of(context);final ButtonThemeData buttonTheme = ButtonTheme.of(context);return RawMaterialButton(onPressed: onPressed,onLongPress: onLongPress,onHighlightChanged: onHighlightChanged,mouseCursor: mouseCursor,fillColor: buttonTheme.getFillColor(this),textStyle: theme.textTheme.button.copyWith(color: buttonTheme.getTextColor(this)),focusColor: buttonTheme.getFocusColor(this),hoverColor: buttonTheme.getHoverColor(this),highlightColor: buttonTheme.getHighlightColor(this),splashColor: buttonTheme.getSplashColor(this),elevation: buttonTheme.getElevation(this),focusElevation: buttonTheme.getFocusElevation(this),hoverElevation: buttonTheme.getHoverElevation(this),highlightElevation: buttonTheme.getHighlightElevation(this),disabledElevation: buttonTheme.getDisabledElevation(this),padding: buttonTheme.getPadding(this),visualDensity: visualDensity ?? theme.visualDensity,constraints: buttonTheme.getConstraints(this).copyWith(minWidth: minWidth,minHeight: height,),shape: buttonTheme.getShape(this),clipBehavior: clipBehavior,focusNode: focusNode,autofocus: autofocus,materialTapTargetSize: buttonTheme.getMaterialTapTargetSize(this),animationDuration: buttonTheme.getAnimationDuration(this),child: child,); }

可以看到FlatButton中又包了一層RawMaterialButton，而這個也是有padding的，是由buttonTheme的padding決定的。

所以要去掉這個padding就必須要重新設置buttonTheme，需要在button外面加一層theme，如下：

Theme(data: ThemeData(buttonTheme: ButtonThemeData(padding: EdgeInsets.all(0),),),child: FlatButton(minWidth: 0, padding: EdgeInsets.all(0),child: Text("1"),onPressed: (){...},), ),

這樣就徹底去除了按鈕的間距。

注意這個樣式只對這個button起作用，如果想對整個頁面（或更多組件）起作用就可以放到更外層

關注公眾號：BennuCTech，獲取更多干貨！

總結

以上是生活随笔為你收集整理的Flutter入门：Button的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。