亲宝软件园·资讯

展开

你知道吗,Flutter内置了10多种Button控件

老孟程序员 人气:0
![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201038285-1789164881.png) > 注意:无特殊说明,Flutter版本及Dart版本如下: > - Flutter版本: 1.12.13+hotfix.5 > - Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。 ## RaisedButton RaisedButton是一个material风格”凸起“的按钮,基本用法: ```dart RaisedButton( child: Text('Button'), onPressed: (){ }, ) ``` 效果: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201038534-185458527.png) `onPressed`为null或不设置时,按钮是禁用状态。 `onHighlightChanged`为高亮变化回调,按下时处于高亮状态,抬起处于不高亮状态,用法如下: ```dart RaisedButton( onHighlightChanged: (high){ }, ... ) ``` 按钮可以设置字体及各种状态颜色,总结如下: | 属性 | 说明 | | ----------------- | ---------------------------------- | | textColor | 字体颜色 | | disabledTextColor | 禁用状态下字体颜色 | | color | 背景颜色 | | disabledColor | 禁用状态下背景颜色 | | highlightColor | 高亮颜色,按下时的颜色 | | splashColor | 水波纹颜色,按下松开会有水波纹效果 | 以textColor为例,用法如下: ```dart RaisedButton( textColor: Colors.red, ... ) ``` 也可以通过textTheme设置字体样式,用法如下: ```dart RaisedButton( textTheme: ButtonTextTheme.primary, ... ) ``` ButtonTextTheme的值介绍如下: - normal:黑色或者白色字体,依赖于`ThemeData.brightness` - accent:字体颜色依赖于`ThemeData.accentColor` - primary :字体颜色依赖于`ThemeData.primaryColor` 这3个值在MaterialApp控件中进行全局设置,设置如下: ```dart MaterialApp( title: 'Flutter Demo', theme: ThemeData( primaryColor: Color(0xFF42A5F5), accentColor: Colors.yellow, brightness: Brightness.light ), ... ) ``` 设置按钮阴影、高亮阴影、禁用阴影,用法如下: ```dart RaisedButton( elevation: 5.0, highlightElevation: 5.0, disabledElevation: 5.0, ... ) ``` `shape`设置按钮的形状,比如设置为圆形,代码如下: ```dart RaisedButton( shape: CircleBorder(), ... ) ``` 效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201038684-822336132.png) 和`hover`相关的属性是指鼠标悬停时的状态,移动端没有效果,`focus`相关的属性为获取焦点时的状态。 ## FlatButton FlatButton是一个扁平的按钮,用法和RaisedButton一样,代码如下: ```dart FlatButton( child: Text('Button'), color: Colors.blue, onPressed: () {}, ) ``` 效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201038910-1145178383.png) ## OutlineButton OutlineButton 是一个带边框的按钮,用法和RaisedButton一样,代码如下: ```dart OutlineButton( child: Text('Button'), onPressed: () {}, ) ``` 效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201039088-96298219.png) 设置其边框样式,代码如下: ```dart OutlineButton( borderSide: BorderSide(color: Colors.blue,width: 2), disabledBorderColor: Colors.black, highlightedBorderColor: Colors.red, child: Text('Button'), onPressed: () {}, ) ``` 效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201039451-1064787320.png) ## DropdownButton DropdownButton为下拉选择按钮,基本用法如下: ```dart var _dropValue = '语文'; _buildButton() { return DropdownButton( value: _dropValue, items: [ DropdownMenuItem(child: Text('语文'),value: '语文',), DropdownMenuItem(child: Text('数学'),value: '数学'), DropdownMenuItem(child: Text('英语'),value: '英语'), ], onChanged: (value){ setState(() { _dropValue = value; }); }, ); } ``` `items`是点击时弹出选项,`onChanged`选项发生变化时回调。效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201041034-279196388.gif) 如果你对选中的选项的样式不满意,可以自定义,用法如下: ```dart DropdownButton( selectedItemBuilder: (context){ return [ Text('语文',style: TextStyle(color: Colors.red),), Text('数学',style: TextStyle(color: Colors.red),), Text('英语',style: TextStyle(color: Colors.red),) ]; }, ... ) ``` selectedItemBuilder返回的组件要和`items`中一一对应,选中样式如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201041230-498069152.png) 当用户未选中时,即value 为null,显示''请选中",用法如下: ```dart DropdownButton( hint: Text('请选择'), value: null, ... ) ``` 效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201041404-447809045.png) 默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下: ```dart DropdownButton( icon: Icon(Icons.add), iconSize: 24, iconDisabledColor: Colors.red, iconEnabledColor: Colors.red, ... ) ``` 效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201041608-79053771.png) ## RawMaterialButton RawMaterialButton是基于`Semantics`, `Material`和`InkWell`创建的组件,它不使用当前的系统主题和按钮主题,用于自定义按钮或者合并现有的样式,而RaisedButton和FlatButton都是基于RawMaterialButton配置了系统主题和按钮主题,相关属性可以参考RaisedButton,参数基本一样,基本用法如下: ```dart RawMaterialButton( onPressed: (){}, fillColor: Colors.blue, child: Text('Button'), ) ``` 效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200315201041765-933109315.png) ## PopupMenuButton PopupMenuButton是一个菜单选中控件,用法如下: ```dart PopupMenuButton

加载全部内容

相关教程
猜你喜欢
用户评论