Flutter 按钮Button多样式练习

冷不防 2021-09-04 05:45 788阅读 0赞

**目录**

一、Flutter 常用的 Button

二、演示图如下

三、代码案例

四、参数详解

--------------------

## 一、Flutter 常用的 Button ##

*  **RaisedButton：**凸起的按钮，其实就是 Material Design 风格的 Button
 *  **FlatButton：**扁平化的按钮
 *  **OutlineButton：**线框按钮
 *  **IconButton：**图标按钮
 *  **ButtonBar：**按钮组
 *  **FloatingActionButton：**浮动按钮
 *  **DropdownButton：**下拉框按钮

--------------------

## 二、演示图如下 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70][]

--------------------

## 三、代码案例 ##

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('Flutter Button'),),
 floatingActionButton: FloatingActionButton(
 backgroundColor: Colors.red[500],
 child: Icon(Icons.add_comment),
 tooltip:'测试',
 onPressed: () {print('loating Action Button');},
 ),
 floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
 
 body: MyBody(),
 
 ),
 );
 }
 }
 
 class MyBody extends StatefulWidget {
 @override
 _MyBodyState createState() => _MyBodyState();
 }
 
 class _MyBodyState extends State<MyBody> {
 var value;
 int count = 0;
 
 @override
 Widget build(BuildContext context) {
 return Container(
 padding: EdgeInsets.all(8),
 child: Column(
 children: <Widget>[
 Wrap(
 spacing: 8,
 runSpacing: 8,
 children: <Widget>[
 RaisedButton(
 child: Text('普通按钮'),
 onHighlightChanged:(bool b) {
 print(b);
 },
 onPressed: (){},
 ),
 
 RaisedButton(
 child: Text('带颜色'),
 onPressed: (){},
 textColor: Colors.white,
 color: Colors.blue[200],
 ),
 
 RaisedButton(
 child: Text('带颜色带阴影'),
 onPressed: (){},
 textColor: Colors.white,
 color: Colors.blue[200],
 elevation: 15,
 ),
 
 Container(
 width: 300,
 height: 50,
 child: RaisedButton(
 child: Text('设置宽高'),
 onPressed: (){},
 textColor: Colors.white,
 color: Colors.blue[500],
 elevation: 15,
 ),
 ),
 
 RaisedButton.icon(
 icon: Icon(Icons.account_box),
 label: Text('我前边有图标'),
 onPressed: () {},
 ),
 
 RaisedButton(
 child: Text('圆角按钮'),
 onPressed: (){},
 color: Colors.red,
 shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.circular(10)
 ),
 ),
 
 Container(
 width: 100,
 height: 100,
 child: RaisedButton(
 child: Text('圆形按钮'),
 onPressed: (){},
 color: Colors.red,
 shape: CircleBorder(
 // side: BorderSide(color: Colors.yellow[500])
 )
 ),
 ),
 
 RaisedButton(
 child: Text('水波纹'),
 onPressed: (){},
 color: Colors.blue[200],
 splashColor:Colors.yellow[100],
 ),
 
 RaisedButton(
 child: Text('长按变色'),
 onPressed: (){},
 color: Colors.blue[200],
 highlightColor:Colors.red[500],
 ),
 
 FlatButton(
 child: Text('扁平按钮'),
 onPressed: (){},
 color: Colors.blue[200],
 ),
 
 OutlineButton(
 child: Text('边框按钮'),
 onPressed: (){},
 textColor: Colors.red,
 borderSide: BorderSide(color: Colors.red,),
 ),
 
 IconButton(
 icon: Icon(Icons.access_alarms),
 onPressed: () {},
 color: Colors.deepOrange,
 splashColor:Colors.limeAccent,
 highlightColor:Colors.blue[300],
 tooltip:'干啥',
 ),
 
 DropdownButton(
 hint:new Text('请选择...'),
 value: value,//下拉菜单选择完之后显示给用户的值
 iconSize: 50.0,//设置三角标icon的大小
 items: <DropdownMenuItem>[
 DropdownMenuItem(
 value: '1',
 child: Text('One'),
 ),
 DropdownMenuItem(
 value: '2',
 child: Text('Two'),
 ),
 DropdownMenuItem(
 value: '3',
 child: Text('Three'),
 ),
 DropdownMenuItem(
 value: '4',
 child: Text('four'),
 ),
 DropdownMenuItem(
 value: '5',
 child: Text('five'),
 ),
 ],
 onChanged: (v) {
 setState(() {
 print(v);
 value = v;
 });
 },
 ),
 ],
 ),
 
 
 Container(
 color: Colors.pink[100],
 child: ButtonBar(
 children: <Widget>[
 RaisedButton(
 child: Text('按钮一'),
 onPressed: (){},
 textColor: Colors.white,
 color: Colors.blue,
 elevation: 15,
 ),
 RaisedButton(
 child: Text('按钮二'),
 onPressed: (){},
 textColor: Colors.white,
 color: Colors.blue,
 elevation: 15,
 ),
 ],
 ),
 ),
 
 Container(
 alignment: Alignment.center,
 child: Column(
 children: <Widget>[
 SizedBox(height: 30,),
 Text("一个Button事件与回调，更改数值"),
 
 SizedBox(height: 15,),
 Text("$count",style: TextStyle(fontSize: 50,color: Colors.purple,fontWeight:FontWeight.w800)),
 SizedBox(height: 20,),
 
 RaisedButton(
 child: Text('点我',style: TextStyle(fontSize: 18),),
 onPressed: (){setState(() {
 count += 1;
 });},
 textColor: Colors.white,
 color: Colors.blue,
 elevation: 15,
 ),
 ],
 ),
 )
 ],
 ),
 );
 
 }
 }

--------------------

## 四、参数详解 ##

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>onPressed</td> 
 <td>点击事件监听，传 null 表示按钮禁用</td> 
 </tr> 
 <tr> 
 <td>onHighlightChanged</td> 
 <td>水波纹高亮变化回调,按下返回true,抬起返回false</td> 
 </tr> 
 <tr> 
 <td>textTheme</td> 
 <td>定义按钮主题</td> 
 </tr> 
 <tr> 
 <td>textColor</td> 
 <td>按钮文字颜色</td> 
 </tr> 
 <tr> 
 <td>disabledTextColor</td> 
 <td>无效按钮文字颜色</td> 
 </tr> 
 <tr> 
 <td>color</td> 
 <td>按钮颜色</td> 
 </tr> 
 <tr> 
 <td>disabledColor</td> 
 <td>无效按钮颜色</td> 
 </tr> 
 <tr> 
 <td>focusColor</td> 
 <td>获取焦点 按钮颜色</td> 
 </tr> 
 <tr> 
 <td>hoverColor</td> 
 <td>不知道啥玩应儿</td> 
 </tr> 
 <tr> 
 <td>highlightColor</td> 
 <td>长按 按钮颜色</td> 
 </tr> 
 <tr> 
 <td>splashColor</td> 
 <td>点击 水波纹 颜色</td> 
 </tr> 
 <tr> 
 <td>colorBrightness</td> 
 <td>官网：用于此按钮的主题亮度。默认为主题的亮度</td> 
 </tr> 
 <tr> 
 <td>elevation</td> 
 <td colspan="1">阴影</td> 
 </tr> 
 <tr> 
 <td>focusElevation</td> 
 </tr> 
 <tr> 
 <td>hoverElevation</td> 
 </tr> 
 <tr> 
 <td>highlightElevation</td> 
 </tr> 
 <tr> 
 <td>disabledElevation</td> 
 </tr> 
 <tr> 
 <td>padding</td> 
 <td>内边距</td> 
 </tr> 
 <tr> 
 <td>shape</td> 
 <td>设置形状，如圆角，圆形等</td> 
 </tr> 
 <tr> 
 <td>clipBehavior</td> 
 <td> 剪裁 Clip.antiAlias：剪辑具有抗锯齿功能 Clip.antiAliasWithSaveLayer：在剪辑后立即剪辑具有抗锯齿和saveLayer Clip.hardEdge：剪辑，但不应用抗锯齿。 Clip.none：不剪辑。 </td> 
 </tr> 
 <tr> 
 <td>focusNode</td> 
 <td>焦点</td> 
 </tr> 
 <tr> 
 <td>materialTapTargetSize</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>animationDuration</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>child</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td colspan="2"> OutlineButton 特性 </td> 
 </tr> 
 <tr> 
 <td> borderSide </td> 
 <td>线框&nbsp; &nbsp; 线颜色 ，如红色：BorderSide(color: Colors.red,),</td> 
 </tr> 
 <tr> 
 <td> clipBehavior </td> 
 <td>相框风格，如：Clip.antiAlias</td> 
 </tr> 
 <tr> 
 <td colspan="2"> RaisedButton.icon&nbsp;特性 </td> 
 </tr> 
 <tr> 
 <td> icon </td> 
 <td>图标</td> 
 </tr> 
 <tr> 
 <td> label </td> 
 <td>通常是文字</td> 
 </tr> 
 <tr> 
 <td colspan="2"> IconButton&nbsp;特性 </td> 
 </tr> 
 <tr> 
 <td> icon </td> 
 <td>图标</td> 
 </tr> 
 <tr> 
 <td> color </td> 
 <td>图标颜色</td> 
 </tr> 
 <tr> 
 <td> tooltip </td> 
 <td>长按文字提示</td> 
 </tr> 
 <tr> 
 <td colspan="2"> DropdownButton 特性&nbsp; &nbsp;&nbsp;DropdownButton&nbsp; </td> 
 </tr> 
 <tr> 
 <td> hint </td> 
 <td>提示语</td> 
 </tr> 
 <tr> 
 <td> value </td> 
 <td>当前值</td> 
 </tr> 
 <tr> 
 <td> iconSize </td> 
 <td>下拉框图片大小</td> 
 </tr> 
 <tr> 
 <td>icon</td> 
 <td>右边图标&nbsp; 默认为下三角</td> 
 </tr> 
 <tr> 
 <td> items </td> 
 <td>下拉框数据集合</td> 
 </tr> 
 <tr> 
 <td> onChanged </td> 
 <td>监听</td> 
 </tr> 
 <tr> 
 <td colspan="2"> FloatingActionButton 特性 </td> 
 </tr> 
 <tr> 
 <td>child</td> 
 <td>子元素，一般为 Icon，不推荐使用文字</td> 
 </tr> 
 <tr> 
 <td>tooltip</td> 
 <td>长按文字提示</td> 
 </tr> 
 <tr> 
 <td>backgroundColor</td> 
 <td>背景颜色（默认使用主题颜色）</td> 
 </tr> 
 <tr> 
 <td>mini</td> 
 <td>是否是 mini 类型默认 false</td> 
 </tr> 
 <tr> 
 <td colspan="2">设置位置，在外部使用（与FloatingActionButton同级）floatingActionButtonLocation。 FloatingActionButtonLocation.centerDocked： 底部剧中&nbsp;&nbsp;与底部无间距 FloatingActionButtonLocation.centerFloat： 底部剧中&nbsp; 与底部有间距 FloatingActionButtonLocation.endDocked：右下角&nbsp;&nbsp;与底部无间距 FloatingActionButtonLocation.endFloat：右下角&nbsp;&nbsp;与底部有间距 FloatingActionButtonLocation.endTop：右上角&nbsp;&nbsp; FloatingActionButtonLocation.startTop：左上角 </td> 
 </tr> 
 </tbody> 
</table>

参考：[https://blog.csdn.net/ruoshui\_t/article/details/91428229][https_blog.csdn.net_ruoshui_t_article_details_91428229]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70]: /images/20210802/03bfce3c2a6a4740ac4f558f815d622f.png
[https_blog.csdn.net_ruoshui_t_article_details_91428229]: https://blog.csdn.net/ruoshui_t/article/details/91428229