[译] 为什么 Flutter 能最好地改变移动开发(1)

1. 为电影 item 创建一个无状态的控件（无状态，因为我们只有静态属性），该控件的构造函数参数是 movie（例如Dart类），并以一种声明的方式描述该布局，同时将 movie 的值（电影名称，上映日期等）绑定到控件中。
2. 同样地为 list 也创建一个控件。（为了这篇文章，我尽量把例子保持地简单些。显然，我们需要添加错误状态等等，这只是开发过程的其中一件事情而已。）

@override
Widget build(BuildContext context) {
return new FutureBuilder(
future: widget.provider.loadMedia(widget.category),
builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
return !snapshot.hasData
? new Container(
child: new CircularProgressIndicator(),
)
: new ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) =>
new MovieListItem(snapshot.data[index]),
);
}
);
}

Movie-List-Screen 布局部分。

为了解决这个问题，让我们来看看这里发生了什么。最重要的是，我们使用了 FutureBuilder （Flutter SDK 的一部分），它要求我们指定一个 Future (我们例子中的 API 调用) 和 builder 函数。builder 函数给了我们一个 BuildContext 和要返回 item 的索引值。 利用这个，我们可以检索一部电影，根据 Future 和快照结果的 list，并且创建一个 MovieListItem-Widget（在步骤 1 中创建）作为构造函数的参数。

然后，当 build 方法第一次被调用时，我们就开始等待 Future 的值。一旦有值之后，builder 会再次被数据（快照）调用，我们就可以用它来构建我们的 UI 界面。

这两个类，加上 API 的调用，将会有以下这样的效果：

已完成的电影列表功能。

---

嗯，这很简单。几乎是太简单了…… 意识到用 Flutter 来创建一个 list 是多么容易，这就激起了我的好奇心，让我更加兴奋地用它来继续开发。

下一步来弄清楚如何使用更加复杂的布局。原生应用程序的电影细节页面有一个相当复杂的布局，包括约束布局和一个应用程序栏。我认为这是用户所期望和欣赏的功能，如果 Flutter 真的想有机会与 Andriod 对抗，它需要能够提供更复杂的布局，就像这样。让我们看看我创建了什么：

电影细节的页面。

这个布局由一个 SliverAppBar