Flutter map 妙用及 .. 使用

时间 2019-12-13

标签 flutter map 妙用使用繁體版

原文原文链接

前言

本篇文章对于熟悉 flutter 或者 dart 的小伙伴来讲可能以为比较简单，可是对于初学者或者没用过的小伙伴仍是有些收获的。html

背景

说到 map 妙用的发现，还要归功于 Tooltip 的研究。java

在研究这个 Widget 的时候，看到了它的源码 demo，因此发现了这个 map 的妙用。git

那么妙用在哪呢？github

统一处理

咱们在上节课说到了 Expanded 的比例布局。express

源代码以下：设计模式

return Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red,
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.blue,
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.grey,
          ),
        ),
      ],
    );

使用 map 能够转换为以下代码：app

return Column(
      children: <Widget>[
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.blue,
        ),
        Container(
          color: Colors.grey,
        ),
      ]
      //.map((Widget widget){ 也是能够的
      .map<Widget>((Widget widget){
          return Expanded(
            flex: 1,
            child: widget,
          );
      })
      .toList(),
    );

这样就统一管理了，减小了冗余代码，更加优雅了～less

可是有时候可能咱们有 10 个子组件，可是可能有 8 个须要统一处理，有两个不须要，怎么办呢？布局

咱们能够利用 widget 的标识属性 key 来处理。学习

以上面代码为例，假设我但愿第一个子组件占两块比例，另外两个都占一块比例。

能够修改代码以下：

return Column(
      children: <Widget>[
        Container(
          key: Key('1'),
          color: Colors.red,
        ),
        Container(
          color: Colors.blue,
        ),
        Container(
          color: Colors.grey,
        ),
      ]
      //.map((Widget widget){ 也是能够的
      .map<Widget>((Widget widget){
        print(widget.key);
        int flex = 1;
        if (widget.key == Key('1')) {
          flex = 2;
        }
        return Expanded(
          flex: flex,
          child: widget,
        );
      })
      .toList(),
    );

能够看到咱们经过 key 对第一个子组件作了区分处理。

另外正如学习设计模式的时候，不要为了设计而设计。
Map 的妙用可以使代码更优雅，可是咱们也不要为了优雅而优雅。
而是真的适用你的场景，咱们再使用。判别就是可否减小冗余代码。

其实上面的 map 用法有点让我想起 RxJava 里面 map 的使用。

咱们能够认为上面的 map 是对一个列表里的每一个元素按照特定规则进行处理。

.. Operator

.. 操做符在 dart 里面的描述是 cascade，翻译出来是级联。

这边的一个用法实际上是链式写法。

什么意思呢？

咱们举 StringBuffer 这个例子。

dart 里面的 StringBuffer 和 java 里面的 StringBuffer 是有差异的。

首先咱们看下下面的字符串链接用 java 实现，代码以下：

StringBuffer valueBuffer = new StringBuffer();
        valueBuffer.append("I")
                   .append(" ")
                   .append("love")
                   .append(" ")
                   .append("Flutter");
        System.out.println(valueBuffer.toString());

若是用 dart 实现的话，首先第一个点就是 dart 里面的 StringBuffer 没有 append 方法，取而代之的是 write 方法。

你觉得只是上面的 append 改成 write？

若是你将 append 改成 write，以下

StringBuffer valueBuffer = new StringBuffer();
  valueBuffer.write("I")
    .write(" ")
    .write("love")
    .write(" ")
    .write("Flutter");
  print(valueBuffer.toString());

编译器会提示下面错误：

The expression here has a type of 'void', and therefore cannot be used.

若是运行，也会报下面错误：

Error compiling to JavaScript:
DetailedApiRequestError(status: 400, message: main.dart:3:15:
Error: This expression has type 'void' and can't be used.
  valueBuffer.write("I")
              ^
main.dart:4:6:
Error: The method 'write' isn't defined for the class 'void'.
    .write(" ")
     ^^^^^
Error: Compilation failed.
)

很明显，write 方法返回类型是 void，所以不能这样写。

因此这个时候 .. 的做用就出现了，你只须要把 .append 改成 ..write 便可，以下：

StringBuffer valueBuffer = new StringBuffer();
  valueBuffer..write("I")
    ..write(" ")
    ..write("love")
    ..write(" ")
    ..write("Flutter");
  print(valueBuffer.toString());

上面全部代码输出都是同样的，就是 I love Flutter

另外 Tooltip Demo 地址：👇
https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/tooltip_demo.dart

Flutter & dart
dart 如何优雅的避空