PlanetsFlutter:向卡片中添加内容
阿里巴巴口碑Android开发内推
译自：Sergi & Replace
在前一篇文章中，我们学习了如何创建一张卡片来展示行星的一些信息，现在是时候把这些信息放置到卡片中来了。
文章图片
任务描述
我们想在PlanetRow中提供行星信息并在屏幕中绘制出来。
创建数据源
一个行星的列表是静态的，并且数据不会改变，从代码中创建这些信息足够了。
首先我们创建一个类来保存单一行星的信息：
文章图片
好了，只是一个简单的对象（PODO？Plain Old Dart Object？）
现在我们来创建行星列表：
文章图片
所有信息都是mock的数据，我推荐你使用真实的数据，如果你想的话。
同样地，我们把图片放置到img文件夹，把所有的图片都从仓库中找出来。
OK，我们现在来修改PlanetRow这个类。
一个PlanetRow通用于所有行星
我们需要PlanetCard能够接收并且绘制一个Planet对象：
文章图片
首先我们在构造函数中添加了一个参数，参数接收一个Planet对象并存储在final类型的成员变量中，下一步，我们来改一下planetThumbnail：
文章图片
唯一的改动是把thumbnail的路径从常量改为planet对象的image成员变量。
同样的，在前一篇文章中，我们声明
planetThumbnail和planetCard为final类成员变量，为了能够引用planet的成员变量，这个声明应该移动至build函数中。
文章图片
最终，我们修改了PlanetRow在HomePage中的构建，这样就可以把数组中的一个元素传给它，
你可以试着把0改成其他数字来观察缩略图是如何工作的
让我们来添加卡片的剩余成员变量。
一张可爱的卡片
【PlanetsFlutter:向卡片中添加内容】因为我们要用到三种不同的文本样式，所以把它们创建为常量类型并在后面重用。
文本样式
我们添加了Poppins-regular.ttf文件到assets/fonts并在pubspec.yml中添加了记录，所以最终看起来是这样的：
文章图片
如果你不知道字体的权重，有个技巧就是查看FontWeight这个类，每个常量（w100,w200,等等）表示字体名称的常用前缀对应的weight（thin纤细，extra-light超细,light细,bold加粗,regular常规，诸如此类）
我们所有的文本都使用同一个字体，我们可以创建一个基础的样式来指示字体
文章图片
现在我们可以通过拷贝基础样式来创建头部样式：
文章图片
copyWith允许我们通过修改对象的某些属性，来生成另一个新的文本样式对象。
对于常规样式来说也是同样的：
文章图片
对于二级头部来说，我们可以拷贝常规样式，仅仅改一下字体大小即可：
文章图片
这远远不是组织文本样式的理想方式，但总比啥都没有强，在后面的文章中我们将讨论如何组织和集中管理所有的样式，以节省大量的样板代码
添加新的内容
我修改了设计稿中的部分边距以获得更好地dp大小（基本上除以3就可以得到）
文章图片
结果就是下面的代码：
文章图片
这里发生了些什么？
我们创建了一个container来作为整个内容的基础widget
为每个设计定义了边距
我们必须定义约束（BoxConstraints.expand()），否则container将会调整为它内部children要求的最小尺寸，我们想要获得整个row
每个文本都在另一个的下面，所以我们使用Column来排布它们
我们使用空的container来达到两个文本元素之间的分离
第一个元素使用headerTextStyle来显示行星的名字
第二个元素使用subHeaderTextStyle来显示行星的位置
我们使用一个单独的container来生成蓝色的线条，仅表明边距和大小，并给一个合适的背景色
行星的重力加速度和距离应当放在一个row中，因为它们是横向排列的。各自包含一个取自assets的icon，一个间隔和一个文本
有很多更方便的方法来做数值这一行（重力加速度和距离）
设想一下如果我们想要第二个数值从中间开始，不考虑row的宽度，我们只能使用Expand这个Widget才能做到：
文章图片
现在row包含了两个Expanded类型的widget。并且它们会分别填充50%的空间。内容部分是向左对齐，那么第二部分一定是从中心位置开始的。
两部分的内容都十分的小，我们可以抽取出来放到一个函数中：
文章图片
（译者注：作者这里应该是贴错了，应该是new Text(value, style: regularTextStyle)）
所以最终应该是这样的：
文章图片
这样看起来就干净多了，
最终效果应该是这样的：
文章图片
未完待续
在这一篇中我们学习了关于布局和样式的一些知识：
如何使用相同字体的不同权重，如果你是Android native开发的工作者，这会看起来像一个小小的奇迹;
)
如何通过重写styles来简化文本样式，我们会看到很多更加简单干净的实现方法
如何生成和使用一个小的数据源，得以绘制任意的行星
如何在一个container中使用constrain使其可扩展
使用expended widget使得内部条目能够平均分布
这个项目的整个代码已经上传到flutter-planets-tutorial仓库中，这篇文章在分支 Lesson_3_Planets-Flutter_adding_content_to_the_card
中，所有的资源都可以在这个项目中找到。
在下一篇文章中，我们最终将会生成一个列表来展示所有行星相关的信息。
敬请期待！
Flutter程序员公众号，关注Flutter相关话题～
文章图片
推荐阅读
- 目前最好用的linux环境下获取网卡地址的方法
- 消费|靠一张300元会员卡，直播代购能月入10万？
- 2018-02-27
- 面瘫、面神经炎、面神经麻痹、面肌痉挛怎么办用FSI面神经靶向修复疗法
- 刘叶叶【利他组】精进打卡2018.04.07
- 各向同性和各向异性简述
- 周总结
- 漏洞|web漏洞--控制访问漏洞
- C语言经典题刷题打卡日记
- 向内探索，寻找“真爱”--记第一次线上分享