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

注意：无特殊说明，Flutter版本及Dart版本如下：

  • Flutter版本： 1.12.13+hotfix.5
  • Dart版本： 2.7.0

Flutter内置了10多种Button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度。

RaisedButton

RaisedButton是一个material风格”凸起“的按钮，基本用法：

RaisedButton(
  child: Text('Button'),
  onPressed: (){
  },
)

效果：

onPressed为null或不设置时，按钮是禁用状态。

onHighlightChanged为高亮变化回调，按下时处于高亮状态，抬起处于不高亮状态，用法如下：

RaisedButton(
  onHighlightChanged: (high){
  },
  ...
)

按钮可以设置字体及各种状态颜色，总结如下：

属性 说明
textColor 字体颜色
disabledTextColor 禁用状态下字体颜色
color 背景颜色
disabledColor 禁用状态下背景颜色
highlightColor 高亮颜色，按下时的颜色
splashColor 水波纹颜色，按下松开会有水波纹效果

以textColor为例，用法如下：

RaisedButton(
  textColor: Colors.red,
  ...
)

也可以通过textTheme设置字体样式，用法如下：

RaisedButton(
  textTheme: ButtonTextTheme.primary,
  ...
)

ButtonTextTheme的值介绍如下：

  • normal：黑色或者白色字体，依赖于ThemeData.brightness
  • accent：字体颜色依赖于ThemeData.accentColor
  • primary ：字体颜色依赖于ThemeData.primaryColor

这3个值在MaterialApp控件中进行全局设置，设置如下：

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primaryColor: Color(0xFF42A5F5),
    accentColor: Colors.yellow,
    brightness: Brightness.light
  ),
  ...
)

设置按钮阴影、高亮阴影、禁用阴影，用法如下：

RaisedButton(
  elevation: 5.0,
  highlightElevation: 5.0,
  disabledElevation: 5.0,
  ...
)

shape设置按钮的形状，比如设置为圆形，代码如下：

RaisedButton(
  shape: CircleBorder(),
  ...
)

效果如下：

和hover相关的属性是指鼠标悬停时的状态，移动端没有效果，focus相关的属性为获取焦点时的状态。

FlatButton

FlatButton是一个扁平的按钮，用法和RaisedButton一样，代码如下：

FlatButton(
  child: Text('Button'),
  color: Colors.blue,
  onPressed: () {},
)

效果如下：

OutlineButton

OutlineButton 是一个带边框的按钮，用法和RaisedButton一样，代码如下：

OutlineButton(
  child: Text('Button'),
  onPressed: () {},
)

效果如下：

设置其边框样式，代码如下：

OutlineButton(
  borderSide: BorderSide(color: Colors.blue,width: 2),
  disabledBorderColor: Colors.black,
  highlightedBorderColor: Colors.red,
  child: Text('Button'),
  onPressed: () {},
)

效果如下：

DropdownButton

DropdownButton为下拉选择按钮，基本用法如下：

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选项发生变化时回调。效果如下：

如果你对选中的选项的样式不满意，可以自定义，用法如下：

DropdownButton(
  selectedItemBuilder: (context){
    return [
      Text('语文',style: TextStyle(color: Colors.red),),
      Text('数学',style: TextStyle(color: Colors.red),),
      Text('英语',style: TextStyle(color: Colors.red),)
    ];
  },
  ...
)

selectedItemBuilder返回的组件要和items中一一对应，选中样式如下：

当用户未选中时，即value 为null，显示‘‘请选中"，用法如下：

DropdownButton(
  hint: Text('请选择'),
  value: null,
  ...
)

效果如下：

默认情况下，下拉选项的图标是倒立的三角，也可以进行自定义，用法如下：

DropdownButton(
  icon: Icon(Icons.add),
  iconSize: 24,
  iconDisabledColor: Colors.red,
  iconEnabledColor: Colors.red,
  ...
)

效果如下：

RawMaterialButton

RawMaterialButton是基于Semantics, Material和InkWell创建的组件，它不使用当前的系统主题和按钮主题，用于自定义按钮或者合并现有的样式，而RaisedButton和FlatButton都是基于RawMaterialButton配置了系统主题和按钮主题，相关属性可以参考RaisedButton，参数基本一样，基本用法如下：

RawMaterialButton(
  onPressed: (){},
  fillColor: Colors.blue,
  child: Text('Button'),
)

效果如下：

PopupMenuButton

PopupMenuButton是一个菜单选中控件，用法如下：

PopupMenuButton<String>(
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: '语文',
        child: Text('语文'),
      ),
      PopupMenuItem<String>(
        value: '数学',
        child: Text('数学'),
      ),
      PopupMenuItem<String>(
        value: '英语',
        child: Text('英语'),
      ),
      PopupMenuItem<String>(
        value: '生物',
        child: Text('生物'),
      ),
      PopupMenuItem<String>(
        value: '化学',
        child: Text('化学'),
      ),
    ];
  },
)

效果如下：

设置其初始值：

PopupMenuButton<String>(
  initialValue: '语文',
  ...
)

设置初始值后，打开菜单后，设置的值将会高亮，效果如下：

获取用户选择了某一项的值，或者用户未选中，代码如下：

PopupMenuButton<String>(
  onSelected: (value){
    print('$value');
  },
  onCanceled: (){
    print('onCanceled');
  },
  ...
)

tooltip是长按时弹出的提示，用法如下：

PopupMenuButton<String>(
  tooltip: 'PopupMenuButton',
  ...
)

效果如下：

设置其阴影值、内边距和弹出菜单的背景颜色：

PopupMenuButton<String>(
  elevation: 5,
  padding: EdgeInsets.all(5),
  color: Colors.red,
  ...
)

默认情况下，PopupMenuButton显示3个小圆点，我们也可以对齐进行设置，设置文字如下：

PopupMenuButton<String>(
  child: Text('学科'),
  ...
)

child组件将会被InkWell包裹，点击弹出菜单，效果如下：

也可以设置其他图标：

PopupMenuButton<String>(
    icon: Icon(Icons.add),
    ...
)

效果如下：

设置弹出菜单边框：

PopupMenuButton<String>(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.red
    ),
    borderRadius: BorderRadius.circular(10)
  ),
    ...
)

效果如下：

IconButton

IconButton是一个图标按钮，用法如下：

IconButton(
  icon: Icon(Icons.person),
  iconSize: 30,
  color: Colors.red,
  onPressed: () {},
)

设置提示属性：

IconButton(
  tooltip: '这是一个图标按钮',
  icon: Icon(Icons.person),
  iconSize: 30,
  color: Colors.red,
  onPressed: () {},
)

当长按时显示提示，效果如下：

BackButton

BackButton是一个material风格的返回按钮，本身是一个IconButton，点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。

BackButton()

Android和IOS平台显示的图标是不一样的，ios效果如下：

Android效果如下：

CloseButton

CloseButton是一个material风格的关闭按钮，本身是一个IconButton，点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。

和BackButton适用场景不同，BackButton适用于全屏的页面，而CloseButton适用于弹出的Dialog。

用法如下：

CloseButton()

效果如下：

ButtonBar

ButtonBar并不是一个单独的按钮控件，而是末端对齐的容器类控件，当在水平方向上没有足够空间时候，按钮将整体垂直排列，而不是换行。基本用法如下：

ButtonBar(
  children: <Widget>[
    RaisedButton(),
    RaisedButton(),
    RaisedButton(),
    RaisedButton(),
  ],
)

效果如下：

设置主轴的对齐方式及主轴的尺寸：

ButtonBar(
  alignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  ...
)

效果如下：

ToggleButtons

ToggleButtons组件将多个组件组合在一起，并让用户从中选择，ToggleButtons基础用法如下：

List<bool> _selecteds = [false, false, true];
ToggleButtons(
      isSelected: _selecteds,
      children: <Widget>[
        Icon(Icons.local_cafe),
        Icon(Icons.fastfood),
        Icon(Icons.cake),
      ],
      onPressed: (index) {
        setState(() {
          _selecteds[index] = !_selecteds[index];
        });
      },
    );

isSelected 属性是bool类型集合，数量和children的数量一致，onPressed是点击回调，这时就有了不错了切换按钮行，效果如下：

我们还可以自定义外观，比如设置按钮的颜色：

ToggleButtons(
      color: Colors.green,
      selectedColor: Colors.orange,
        fillColor: Colors.red,
      ...
)

效果如下：

fillColor是选中按钮的背景颜色。

如果不需要边框，可以将renderBorder设置为false：

ToggleButtons(
    renderBorder: false,
)

效果如下：

当然我们也可以设置边框的圆角半径、宽度、颜色等：

ToggleButtons(
      borderRadius: BorderRadius.circular(30),
      borderColor: Colors.orange,
      borderWidth: 3,
      selectedBorderColor: Colors.deepOrange,
）

效果如下：

甚至可以设置点击水波纹颜色（splashColor）和按下时的高亮颜色（highlightColor）：

ToggleButtons(
      splashColor: Colors.purple,
      highlightColor: Colors.yellow,
      ）

效果如下：

如果按钮处于禁用状态，可以设置禁用状态下按钮及边框的颜色：

ToggleButtons(
      onPressed: null,
      disabledColor: Colors.grey[300],
      disabledBorderColor: Colors.blueGrey,
      )

效果如下：

如果开发的是web程序，我们可以设置鼠标悬停颜色：

ToggleButtons(
      hoverColor: Colors.cyan,
      )

欢迎加入Flutter的微信交流群(mqd_zzy)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。

原文地址：https://www.cnblogs.com/mengqd/p/12499682.html

时间： 2024-10-12 04:56:06

你知道吗，Flutter内置了10多种Button控件的相关文章

[深入浅出Windows 10]分屏控件（SplitView）

4.18 分屏控件(SplitView) 分屏控件(SplitView)是Windows 10新增的控件类型,也是Windows 10通用应用程序主推的交互控件,通常和一个汉堡按钮搭配作为一种抽屉式菜单来进行呈现.控件的XAML语法如下: <SplitView> <SplitView.Pane > ……菜单面板的内容 </SplitView.Pane > ……主体内容 </SplitView> SplitView控件主要由两部分组成,一部分是菜单的面板,另一

[深入浅出Windows 10]实现饼图控件

13.2 实现饼图控件 上一小节讲解了动态生成折线图和区域图,对于简单的图形这样通过C#代码来生成的方式是很方便的,但是当我们的图表要实现更加复杂的逻辑的时候,这种动态生成的方式就显得力不从心了,那就需要利用控件封装的方式来实现更加强大的图表控件功能.这一小节将来讲解怎样去用封装控件的方式去实现图表,用一个饼图控件作为例子进行分析讲解. 13.2.1 自定义饼图片形形状 饼图其实就是把一个圆形分成若干块,每一块代表着一个类别的数据,可以把这每一块的图形看作是饼图片形形状.要实现一个饼图控件,首先

delphi7 Delhi 10.2 sgcWebSockets 控件安装.

最近使用到WebSocket功能. 在临时任务中用网上C#类已实现.但是以后的平台是delphi上面进行开发的.上网找到该控件.折腾两天安装成功.记录下!! 国内网站下载的3.2版本,不支持最新delphi 10.2. 3.2版本在Delphi7上边安装,需要卸载indy9,下载最新indy10,我下载的版本是10.5.9, 安装注意: 1:Indy10.95.9不要安装SuperCor包,虽然是可以选择安装,但是最好不要纠结.少一个过程,安装不过去,所以就不纠结了. 2:sgcWebSocke

Master内使用FindControl找不到控件的解决方案

0.问题描述:已经在XXX.Master文件中定义了控件 <asp:LinkButton ID="lnk_new_user_after" runat="server" OnClick="lnk_new_user_Click" Visible="false">新增用户</asp:LinkButton> 但是在XXX.Master对应的代码文件XXX.master.cs的protected void Pag

flutter showDatePicker显示中文日期_Flutter时间控件显示中文

flutter showDatePicker showTimePicker显示中文日期 1.配置flutter_localizations依赖 找到pubspec.yaml配置flutter_localizations dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 2.导入国际化的包 flutter_localizations import 'package:flutter_localization

Python内置函数(10)——chr

英文文档: chr(i) Return the string representing a character whose Unicode code point is the integer i. For example, chr(97) returns the string 'a', while chr(8364) returns the string '€'. This is the inverse of ord(). The valid range for the argument is

Flutter内置ICON

由于有时打不开flutter的icon官网 https://material.io/tools/icons/?style=baseline 截图存下icon 如果看不清  Ctrl +   恢复Ctrl 0 原文地址:https://www.cnblogs.com/ckAng/p/10751545.html

ExtJS4.2学习(10)分组表格控件--GroupingGrid（转）

鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html --------------------------------------------------------------------------------------------- 分组表格控件在我们的开发中经常被用到,GroupingGrid分组表格就是在普通表格的基础上,根据某一列的数据显示表格中的数据分组的表格控

《Flutter 动画系列二》Google工程师带你选择Flutter动画控件

对初学者来说,看完这篇文章,我想你脑瓜子一定是嗡嗡的,这都说的是什么啊. 不要急躁,开始的我和你是一样的,第一遍看完,完全不知道在说什么,不明白不要紧,请先收藏此文章,然后先去学习下Flutter内置的25种动画组件. 地址:http://laomengit.com/flutter/module/animated_1/. 不要仅仅是看,要多写,只有写才能发现问题. 当你对动画控件有了一定的了解,在回过头来细细的品一品这篇文章,你会有不一样的感受,你品,你细品. 这篇文章的内容是Google 的F