2.14　使用自定义小部件

在main.dart文件中，已经删除了渲染Card的代码，再删除Container中的按钮，并将其放入到自己创建的小部件中。创建一个新的文件news_manager.dart，用它管理News小部件。首先引入flutter/material包，创建类NewsManager继承StatefulWidget，因为在NewsManager中需要管理news数据。StatefulWidget需要创建createState（）方法，我们可以通过IDE的提示来创建，同时需要添加第二类_NewsManagerState继承State，泛型连接到NewsManager，并且在_NewsManagerState中需要创建build（）方法，在build（）方法中需要返回的是按钮和Card列表。代码如下：

现在缺少News小部件，需要在按钮下面显示News小部件。所以build（）方法需要返回一个Column，并给参数children赋值，其中一个是包装按钮的小部件Container，另一个是在2.13节中的News小部件。现在不可用，因为还没有引入，引入News小部件的代码如下：

点代表当前目录，点点代表上一级目录，这里只是在当前目录，所以使用./news.dart。下面就可以使用News小部件了，News需要传入一个参数，所以把news数组传入。代码如下：

通过setState改变news数据，并再次调用build（）方法渲染，同时也会渲染这里的News小部件，它被传入了更新后的news数组列表，这将导致在News小部件中再次调用build（）方法，这就是我们的NewsManager小部件。

下面在main.dart文件中使用NewsManager小部件。在main.dart中我们不需要处理任何状态，所以可以把StatefulWidget改成StatelessWidget，删除createState（）方法，只需要覆盖build（）方法，body中不再是一个Column，而是NewsManager小部件，所以引入news_manager.dart，代码如下：

创建一个NewsManager小部件对象，代码如下：

现在应用代码的结构更清晰，包含多个文件，多个小部件，并且小部件可以复用，也使代码更容易管理，因为每一个文件的内容都不多，而且容易理解。