Flutter 最佳实践 - 02

原文 https://vipinvijayannair.medium.com/

前言

作者把工作中的经验做了罗列，这是第 2 部分，持续更新。

正文

1. 避免使用 Functional Widgets

我们通常会遇到这样一种情况: 我们需要将 UI 代码从 widget 中分离出来，但是我们避免创建单独的 widget ，而是使用返回 widget 的函数。这种做法有一些好处，比如不需要在新的 widget 中传递所有参数，代码和文件都会更少。但是当您想要检查 widget 时，这种方法可能会导致问题。让我们深入了解一下。

使用函数式 widget 时，代码如下所示。

Widget functionWidget({ Widget child}) {
  return Container(child: child);
}

现在可以将其用作

functionWidget(
  child: functionWidget(),
);

在这种情况下，Widget 树看起来是这样的

Container
  Container

相反，如果我们使用 Widget，我们的 Widget 看起来像

class ClassWidget extends StatelessWidget {
  final Widget child;

  const ClassWidget({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
    );
  }
}

你可以把它当做

ClassWidget(
  child: ClassWidget(),
);

在这个例子中，Widget 树看起来像这样

ClassWidget
  Container
    ClassWidget
      Container

优点:

• 通过使用函数将 widget 树分割成多个 widget ，您将自己暴露在 bugs 之下，并错过了一些性能优化。
• 不能保证使用函数时会出现 bug，但是通过使用类，可以保证不会遇到这些问题。 点击这个链接了解更多信息。

https://stackoverflow.com/questions/53234825/what-is-the-difference-between-functions-and-classes-to-create-reusable-widgets/53234826#53234826

2. 为变量指定类型

不要

var count = 10;
final person = Person();
const timeOut = 6000;

这样

inal int count = 10;
final Person person = Person();
final String name = 'John Doe';
const int timeOut = 6000;

明确变量类型，推荐

这可能是一个个人的选择，因为 Dart 给你权力，不指定类型时，分配或内部的函数/类。根据个人喜好，你可能不想使用它。如果你分配的变量类型是直接在类/函数中分配的，编译器可能会给你一个警告。在这些情况下，您可以删除类型，但是当变量是全局的时候，最好保留类型。

3. 用 is 代替 as

不要

(item as Person).name = 'John Doe';

这样

if (item is Person)
item.name = 'John Doe';

4. 如果列表较长，则在列表中使用项目范围

如果您想通过单击按钮或其他方式跳转到特定的索引，ItemExent 将大大提高性能。

优点: 指定 itemExent 比让子元素确定其范围更有效，因为滚动已经知道子元素的范围以节省时间和精力。

class MyListView extends StatelessWidget {
  final _scrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(onPressed: () {
        _scrollController.jumpTo(
          _scrollController.position.maxScrollExtent,
        );
      }),
      body: ListView(
        controller: _scrollController,
        children: List.generate(10000, (index) => Text('Index: $index')),
        itemExtent: 600,
      ),
    );
  }
}

5. 使用 ?? 和 ? 操作符号

// 不要
bool isValid =  done == null ? false : true;

// 这样
bool isValid = done ?? false;

// 不要
bool isValid = done == null ? null : a.b;

// 这样
bool isValid = a?.b;

结束语

如果本文对你有帮助，请转发让更多的朋友阅读。

也许这个操作只要你 3 秒钟，对我来说是一个激励，感谢。

祝你有一个美好的一天~

---

© 猫哥

• 微信 ducafecat

• https://wiki.ducafecat.tech

• https://ducafecat.com