flutter常见组件之Button(第二期)

亦凉 2022-03-02 08:26 268阅读 0赞

内容如果对你有帮助,帮忙点下赞,你的点赞是我更新最大的动力,谢谢啦!如果在开发的过程遇到问题可以一起讨论,可以加我的QQ群!167646174!也可以加我微信,在群里!  
具体代码见[github][] ,欢迎各位Star,以及提issues!

## 1.RaisedButton ##

![clipboard.png][]

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>作用</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>背景色</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>与文字的内边距</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>textColor</td> 
   <td>按钮内文字颜色</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>textTheme</td> 
   <td>按钮主题</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>disabledColor</td> 
   <td>按钮被禁用显示的颜色</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>disabledTextColor</td> 
   <td>按钮被禁用时文字显示颜色</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>highlightColor</td> 
   <td>击高亮的时候显示在控件上面，水波纹下面的颜色</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>splashColor</td> 
   <td>水波纹颜色</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>colorBrightness</td> 
   <td>按钮主题高亮</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>elevation</td> 
   <td>按钮下面的阴影</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>highlightElevation</td> 
   <td>高亮时候的阴影</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>disabledElevation</td> 
   <td>按下时候的阴影</td> 
  </tr> 
  <tr> 
   <td>clipBehavior</td> 
   <td>抗锯齿能力</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>onHighlightChanged</td> 
   <td>水波纹高亮时候回调</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>onPressed</td> 
   <td>点击事件</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>shape</td> 
   <td>拓展样式</td> 
   <td>_</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>小图标按钮</td> 
   <td>只有IconButton才会使用到</td> 
  </tr> 
 </tbody> 
</table>

### \---扩展--- ###

### 1.1带斜角的按钮 ###

![clipboard.png][clipboard.png 1]

shape: BeveledRectangleBorder(
           borderRadius: BorderRadius.all(Radius.circular(20))
    ),

### 1.2圆按钮 ###

![clipboard.png][clipboard.png 2]

shape: CircleBorder(
       // 圆边颜色
         side: BorderSide(
          color: Colors.black
         )
    ),

### 1.3圆角矩形按钮 ###

![clipboard.png][clipboard.png 3]

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10))
      ),

### 1.4两端半圆按钮 ###

![clipboard.png][clipboard.png 4]

shape: StadiumBorder(),

## 2.OutlineButton ##

API同RaisedButton  
默认边线且背景透明的按钮

![clipboard.png][clipboard.png 5]

## 3.FlatButton ##

API同RaisedButton

## 4.ButtonBar ##

![clipboard.png][clipboard.png 6]

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>作用</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>alignment</td> 
   <td>对齐方式</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>mainAxisSize</td> 
   <td>主轴大小，默认MainAxisSize.max</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

## 5.FloatingActionButton ##

![clipboard.png][clipboard.png 7]

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>backgroundColor</td> 
   <td>背景色</td> 
  </tr> 
  <tr> 
   <td>elevation</td> 
   <td>未点击的阴影值</td> 
  </tr> 
  <tr> 
   <td>highlightElevation</td> 
   <td>点击时的阴影值</td> 
  </tr> 
  <tr> 
   <td>tooltip</td> 
   <td>长按文字提示</td> 
  </tr> 
  <tr> 
   <td>foregroundColor</td> 
   <td>按钮里面文字小图标颜色</td> 
  </tr> 
 </tbody> 
</table>

具体代码见[github][] ,欢迎各位Star,以及提issues!  
不定期更新,根据工作繁忙度决定!  
以下是往期相关文章:

[flutter常见组件API(第一期)][flutter_API]

[github]: https://github.com/UvDream/Flutter_UvDream
[clipboard.png]: /images/20220302/b2b666dac7f44370955ae0500f9136ca.png
[clipboard.png 1]: /images/20220302/9cdac715dc6f49b8973c3a538ed0d6cb.png
[clipboard.png 2]: /images/20220302/4dc995ed0ed8455aba082dd9ad891a32.png
[clipboard.png 3]: /images/20220302/95706698ef2c4ac89bf887288cdc2209.png
[clipboard.png 4]: /images/20220302/19398b01de8b4387b7d67b843553d12f.png
[clipboard.png 5]: /images/20220302/0f8cb82768c74c458859a3d6ac73d946.png
[clipboard.png 6]: /images/20220302/2b764db284214e93867fc9540816b4f3.png
[clipboard.png 7]: /images/20220302/4664ddd5adc0490bab66664eec408aa0.png
[flutter_API]: https://segmentfault.com/a/1190000017928399