​Flutter | 1.9 全新组件 ToggleButtons

前几天的 GDD 相信大家还记忆犹新,Flutter 官宣发布了 1.9 正式版。

随之而来的有一些全新的组件和对于 web 的支持等等。

那我们今天就来看一下这其中的一个组件 --「ToggleButtons」。


ToggleButtons

首先按照惯例,看看官方对于这个组件是怎么说的:

Creates a horizontal set of toggle buttons.

It displays its widgets provided in a [List] of [children] horizontally.

创建一组水平的切换按钮。

它水平的显示 children 列表中提供的小部件。

其实这段文本是在源码中翻出来的,现在在网上搜 「ToggleButtons」 还是搜不出来官方文档的。

构造函数

还是按照惯例看一下构造函数:

const ToggleButtons({
  Key key,
  @required this.children,
  @required this.isSelected,
  this.onPressed,
  this.color,
  this.selectedColor,
  this.disabledColor,
  this.fillColor,
  this.focusColor,
  this.highlightColor,
  this.hoverColor,
  this.splashColor,
  this.focusNodes,
  this.renderBorder = true,
  this.borderColor,
  this.selectedBorderColor,
  this.disabledBorderColor,
  this.borderRadius,
  this.borderWidth,
}) :
assert(children != null),
assert(isSelected != null),
assert(children.length == isSelected.length),
super(key: key);

解释一下每个参数:

1.children:不多介绍了,一个 Widget 的集合
2.isSelected:List,每个切换按钮相应的状态,true 为选中,该字段的长度必须和 children 的长度一致
3.onPressed:切换按钮的点击事件,如果为 null, 则该控件的状态为 disable
4.color:Text / Icon 状态为已启用并且未选中时的颜色
5.selectedColor:不用多说,选中时的颜色
6.disabledColor:未启用时的颜色
7.fillColor:选中按钮的背景颜色
8.focusColor:当按钮中具有输入焦点时填充的颜色
9.highlightColor:点击时的颜色
10.hoverColor:当按钮上有指针悬停时用于填充按钮的颜色
11.splashColor:点击后的颜色
12.focusNodes:每一个按钮的焦点
13.renderBorder:是否在每个切换按钮周围呈现边框
14.borderColor:边框颜色
15.selectedBorderColor:选中的边框颜色
16.disabledBorderColor:不可用时边框颜色
17.borderRadius:边框半径
18.borderWidth:边框宽度

这参数太多了,但是其实也没什么难度。

第一个示例

在组件介绍的下面有很多的代码,我们一一来看。

先看第一个:

Here is an implementation that allows for multiple buttons to be simultaneously selected, while requiring none of the buttons to be selected.

这里有一个实现,它允许同时选择多个按钮,而不需要选择任何一个按钮。

看一下代码:

List<bool> isSelected = [true, false, false];

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

运行效果如下:

其中最重要的代码就是:

1.添加了 「onPress」方法
2.在「onPress」回调中刷新每一个切换按钮的值

第二个示例

再来看第二个示例:

Here is an implementation that requires mutually exclusive selection, but allows for none of the buttons to be selected.

这是一个互斥选择的实现,但允许一个都不选择。

代码如下:

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
        if (buttonIndex == index) {
          isSelected[buttonIndex] = !isSelected[buttonIndex];
        } else {
          isSelected[buttonIndex] = false;
        }
      }
    });
  },
  isSelected: isSelected,
),

效果如下:

该示例展示了只能选择一个、并且可以不选 demo,主要逻辑如下:

循环所有的切换按钮的值,如果是当前 index,则置反,如果不是,则置为 false。

第三个示例

最后一个示例,

代码如下:

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    int count = 0;
    isSelected.forEach((bool val) {
      if (val) count++;
    });

    if (isSelected[index] && count < 2)
      return;

    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

效果如下:

逻辑其实都在 「onPressed」中,导致的结果不一样。

最后

这里我没有改变外观之类的,只是借用了官方的 demo,其实想改变外观之类的,回头看看构造函数,我想了一下,基本能用到的都提供了。

Flutter 上的内存泄漏监控

Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏。在 Android 平台上有个内存泄漏检测工具 LeakCanary[1], 它可以方便地在 debug 环境下检测当前页面是否泄漏。本文将会带你实现一个 Flutter 可用的 LeakCanary,并讲述怎么用该工具检测出了 1.9.1 Framework 上的两个泄漏。

发布于:7天以前  |  32次阅读  |  详细内容 »

网易支付-高性能NEJFlutter小程序动态化架构实践

大家好,今天跟大家分享的主题是《NEJFlutter小程序动态化高性能架构》,这是关于网易支付团队在Flutter小程序动态化方向上尝试的一套技术解决方案,一句话介绍NEJFlutter,就是用JavaScript开发业务逻辑、Flutter开发UI布局的小程序架构,性能堪比原生Flutter应用;

发布于:19天以前  |  92次阅读  |  详细内容 »

Flutter卡顿问题的监控与思考

使用Flutter技术构建的应用,一直以高性能高流畅度著称。但是随着应用复杂度越来越高,Flutter会出现一些页面流畅度明显低于Native的情况,甚至可能发生一些卡顿。而很多时候卡顿都发生在线上,即使获得了用户的操作路径,也难以重现。如果我们有一套卡顿监控系统,能够帮助我们捕获到卡顿时的堆栈,那么在发生卡顿的时候,我们就可以定位到具体是哪个函数引起的卡顿,从而解决这些问题。

发布于:19天以前  |  91次阅读  |  详细内容 »

​Flutter | 1.9 全新组件 ToggleButtons

前几天的 GDD 相信大家还记忆犹新,Flutter 官宣发布了 1.9 正式版。 随之而来的有一些全新的组件和对于 web 的支持等等。 那我们今天就来看一下这其中的一个组件 --「ToggleButtons」。

发布于:25天以前  |  104次阅读  |  详细内容 »

最多阅读

在Flutter中添加资源和图片 1年以前  |  2323次阅读
Flutter的手势GestureDetector分析详解 1年以前  |  1830次阅读
发布Flutter开发的iOS程序 1年以前  |  1650次阅读
Flutter插件详解及其发布插件 11月以前  |  1626次阅读
Flutter Widget框架概述 1年以前  |  1397次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1374次阅读
使用Inspector检查用户界面 1年以前  |  1339次阅读
JSON和序列化 1年以前  |  1256次阅读
Flutter框架概览 1年以前  |  1213次阅读
Flutter 状态管理指南之 Provider 1年以前  |  1195次阅读
为Flutter应用程序添加交互 1年以前  |  1170次阅读
使用自定义字体 1年以前  |  1156次阅读
Flutter for Web详细介绍 1年以前  |  1096次阅读
处理文本输入 1年以前  |  1059次阅读
Flutter路由详解 1年以前  |  1049次阅读
使用包来开发Flutter应用 1年以前  |  991次阅读
发布Flutter开发的Android程序 1年以前  |  989次阅读
编写国际化Flutter App 1年以前  |  970次阅读