IconButton

如果即是一個(gè)圖標(biāo)又想點(diǎn)擊，那么就用這個(gè)

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

普通按鈕FlatButton

這種按鈕沒(méi)有深度，所以沒(méi)有陰影，一個(gè)例子

FlatButton(child: Text("去補(bǔ)測(cè)"),onPressed: (){}, )

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

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

這樣就是一個(gè)藍(lán)色背景白色字體的按鈕。

注意如果要顯示背景，必須設(shè)置onPressed，否則即使設(shè)置了color依然沒(méi)有背景色顯示

但是這個(gè)背景并不是圓角的（其實(shí)有一點(diǎn)點(diǎn)圓角），如果想實(shí)現(xiàn)圓角，則需要添加shape，如下：

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

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

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

注意color改成透明的了，這樣就實(shí)現(xiàn)了邊框背景，且?guī)в袌A角。

其他button

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

去除默認(rèn)間距

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

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

設(shè)置完會(huì)發(fā)現(xiàn)沒(méi)有效果，文字四周還是有間距。這是因?yàn)槿帜瑯邮紹uttonTheme導(dǎo)致的，影響這個(gè)間距的因素有兩個(gè)。

第一個(gè)就是寬高，因?yàn)閎utton的高度可以通過(guò)height設(shè)置，但是沒(méi)有width屬性，所以寬度無(wú)法設(shè)置固定。所以這里的關(guān)鍵就是minWidth，在ButtonTheme中的minWidth默認(rèn)是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,})

這個(gè)就導(dǎo)致了我們無(wú)論如何設(shè)置padding，寬度都不會(huì)小于88。

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

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

修改了minWidth后再運(yùn)行看效果，發(fā)現(xiàn)按鈕寬度減少了，但是兩邊還有間距。這就是第二個(gè)影響因素：padding。

我們不是已經(jīng)將padding設(shè)置為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，而這個(gè)也是有padding的，是由buttonTheme的padding決定的。

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

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

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

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

關(guān)注公眾號(hào)：BennuCTech，獲取更多干貨！

總結(jié)

以上是生活随笔為你收集整理的Flutter入门：Button的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。