setState Dart/Flutter中带有花括号的胖箭头表示法 [英] Fat Arrow notation with curly braces in setState Dart/Flutter

问题描述

我对Dart/Flutter非常陌生，并且对=>表示法感到困惑.该文档说==表示法是返回单个表达式的简写.

I am very new to Dart/Flutter and I have a confusion regarding the => notation. The documentation says that the => notation is used as a shorthand to return a single expression.

bool isNoble(int atomicNumber)=> _nobleGases [atomicNumber]！= null;

bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;

当我试图在Flutter应用程序中设置状态时，我会怀疑.

My doubt comes when I am trying to set state in a flutter application.

RaisedButton(
  onPressed: () => {
    setState(() {
      print('hello');
      _products.add('More stuff');
    })
  },
  child: Text('Add Product'),
),

现在，当我用=>表示法更改setState方法时

Now when i change the setState method with => notation

RaisedButton(
  onPressed: () => {
    setState(() => {
      print('hello'),
      _products.add('More stuff'),
    })
  },
  child: Text('Add Product'),
),

上述两种方法都可以工作，即它们可以按预期设置状态.我要做的就是在使用粗箭头表示法时将分号更改为逗号.

Both methods mentioned above work, that is they set the state as expected. All i had to do was change the semicolons to commas when using the fat arrow notation.

这背后的逻辑是什么?粗箭头符号如何与其中包含多个表达式的花括号一起使用.

What is the logic behind this ? How is the fat arrow notation working with curly braces which contains multiple expressions within it.

修改

正如Hemanth Raj所提到的，=>返回一个集合，并且包含=>表示法的代码段可以编写如下.

As mentioned by Hemanth Raj the => returns a set and the code segment containing the => notation can be written as follows.

RaisedButton(
  onPressed: () => {
    setState(() {
     return {
       print('hello'),
       _products.add('More stuff'),
     };
    })
  },
  child: Text('Add Product'),
),

包含打印功能和_products.add的返回的 set 如何实际更新状态.它不应该引发某种错误，因为通常setState是由诸如 _products.add('More stuff'); 之类的表达式完成的.

How is the returned set containing a print function and _products.add actually updating the state. Shouldn't it throw some kind of error because usually setState is done by an expression such as _products.add('More stuff');.

推荐答案

这是我想回答的有趣问题之一.

This is one of the interesting questions that I would love to answer.

官方文件说此处，是 => 用作 {return ...} 的简写语法，这意味着 => 将只返回右侧产生的任何内容.

As the official documents say here, yes => is used as a shorthand syntax to { return ... } which means => will just return whatever is produced on the righthand side.

还可以从 Dart 2.2 及更高版本中定义 Set ，并用逗号分隔的值括在 {} 中，如docs中所述<请在href ="https://www.dartlang.org/guides/language/language-tour#sets" rel ="noreferrer">此处.

Also from Dart 2.2 and above, a Set can be defined with comma separated values enclosed in a {} as mentioned in docs here.

因此，您正在使用的语法(即 {} 且语句之间用逗号分隔)被 => <视为 Set /code>函数.每个元素都是一个函数调用，()=>{f(a)，f(b)，g(a)，} 将返回一个 Set 以及每个函数调用返回的元素.

Hence, the syntax you are using, i.e {} with statements separated with a comma, it is treated as a Set by the => functions. Each element being a function call, () => { f(a) , f(b), g(a),} would return a Set with the elements returned by each function call.

此示例可以帮助您了解实际情况:

This example might help you understand what is happening under the hood:

dynamic reflect(dynamic a){
  return a;
}

void main() {  
    Function shortHand = () => {reflect(1),reflect('a'),reflect({}),reflect([]),}; // this function when called will return a Set<dynamic>
    print(shortHand().runtimeType); // will print `_LinkedHashSet<dynamic>`
}

所以语法

()=>'...'返回 String ，

()=>[...，...，...] 返回列表

以及类似的()=>{...，...，...} 实际上返回一个 Set

and similarly () => { ... , ... , ... } actually returns a Set

注意:不建议使用这种用逗号分隔的函数调用返回set的方法，除非您希望将 Set 作为结果返回，否则将要求您也不要使用它.>

Note: This method of returning set with comma separated function calls is not recommended, would request you also not to use it unless you wanted a Set to be returned as result

回复

让我为您分解函数调用和结果.所以你的代码是这样的，

Let me breakdown the function call and results for you. So your code goes like this,

() => {
    setState(() {
     return {
       print('hello'),
       _products.add('More stuff'),
     };
    })
  }

此处 => 返回带有 setState 结果的 Set ，即它将返回 {(setState call)} 可能是 {null}

Here the => returns a Set with the result of setState, i.e it'll return { (result of setState call) } which might be { null }

调用 setState 后，将执行以下代码，该代码再次返回带有 {(打印结果)，(_product.add的结果)的 Set )，}

As you have call setState the below code gets executed, which again returns a Set with { (result of print), (result of _product.add), }

() {
      return {
        print('hello'),
        _products.add('More stuff'),
      };
    }

在执行 _products.add('更多东西')时，状态将更新，其中'更多东西'将被添加到 _products 不论您在何处调用它.调用 setState 时，将使用 _products 并添加新数据来重建小部件.

State will update, as you are executing _products.add('More stuff'), where 'More stuff' will be added to _products irrespective of where you call it. When setState is being called, the widget will be rebuilt with the _products with new data added.

希望这对您有帮助！

这篇关于setState Dart/Flutter中带有花括号的胖箭头表示法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！