2.9　官方文档及使用按钮RaisedButton

Flutter官网上提供了很多内容，用浏览器访问flutter.dev，单击“Get started”按钮，如图2.16所示。

图2.16　Flutter官网

在左侧找到Widget catalog，单击此链接，如图2.17所示，可以看到Flutter自带的所有小部件，而且它们被分类了。

图2.17　Flutter中的小部件

最重要的一个分类是Basics小部件，还有一个很重的分类是Material Components小部件。Material Components中包含AppBar、按钮、输入框、对话框、Card等。Basics小部件包含行、列、Container、Text、Image小部件，可以单击小部件上的链接了解更多的内容，例如小部件的构造器，有的还有一些关于小部件的示例代码。这些小部件看起来很多，不用担心，我们将在本书中使用大量的小部件，一切都会变得更加清晰。

知道怎么找到这些小部件了，现在可以继续丰富App的功能了。当前的App只是显示了Card，它占据了整个空间，这种效果并不是我们想要的。现在修改它，添加更多的Card来展示一列Card。

可以使用Column小部件，并给参数children传值，然后把Card添加到数组[]中，代码如下：

重启后会发现Card底部有一个边了，如图2.18所示。

图2.18　Card显示在列中

现在可以加更多的Card了。同时需要在Card所在的列上面添加一个按钮，可以添加RaisedButton小部件。它是一个带有背景的按钮，按钮也需要配置一下，最重要的一个参数是child，它用来定义这个按钮内部显示，可以传入Text小部件，也可以传入一个图标。这里使用Text，Text的内容是'添加资讯'。这里还需要传入另外一个参数onPressed。值应该是一个方法，所以这里可以简单定义一个空的方法，这个叫匿名方法，没有名称，只有参数列表和方法体。现在都是空的，所以单击按钮不会执行任何内容。代码如下：

保存并重新加载，会发现屏幕顶部有一个按钮可以单击，但没有任何反应。这个按钮显示得并不美观，可以用Container小部件把它包装起来。Container小部件中child参数的值就是按钮。Container小部件有一个参数叫margin，表示Container与四周的外边距。margin参数可以使用flutter/material包中的类EdgeInsets来赋值，这个类可以使用.all来调用构造器，传入一个浮点类型来定义四周边界的距离，例如10.0像素。代码如下：

这个像素会自动适配设备的像素，现在我们可以看见按钮周围产生了边距，但这个按钮没有任何功能，下一节让我们将给这个按钮加些功能！