返回博客首页
← 所有帖子

克隆者的攻击：使用 Flexbox 创建 Twitter 克隆

2017 年 2 月 21 日 — 作者 Jen Looper
在 NativeScript 中使用 Flexbox 创建布局的引入为开发者开辟了一个全新的布局世界。是的，“布局”是一个词，就像“这个周末你会做一些有趣的布局吗？”实际上，NativeScript 中有两种主要的布局类型——使用 StackLayout 和 GridLayout 等布局模块，以及新的 Flexbox 布局。您可以为您的应用程序使用任何一种布局；那些对 Web 上的 Flexbox 有点熟悉的人可能会很高兴地在他们的原生应用程序中使用 Flexbox。 

那么 Flexbox 到底是什么？它是一种建立用户界面的成熟方法，尤其是在 Web 上。使用 Flexbox 开发用户界面的经典例子是在 css-tricks 中；对于视觉学习者（像我一样），看看 这篇优秀的文章，它使用动画 GIF 来解释 Flexbox。要了解如何使用 NativeScript 中的 Flexbox 的良好介绍，请查看 TJ 的 这篇博客文章。TJ 还向我们指出了一个非常酷的学习资源：flexboxfroggy.com，在那里您可以使用 Flexbox 在池塘里排列青蛙和荷叶。

然而，对布局系统的真正考验是，当您需要立即构建一个现实世界的布局时。克隆一个众所周知的 UI 是创建概念验证的好方法，所以让我们试一试！最近我突然意识到，这个世界需要一个猫咪的 Twitter 客户端

所以，我决定创建一个，Yowwlr。您可以在这里关注此项目的进展 这里（注意，完整的 Twitter 客户端的业务逻辑尚未到位——该项目主要用作布局教学工具）。该项目使用 Firebase 进行基本身份验证，并允许猫发送 yowls（而不是推文），这些 yowls 目前是硬编码的。这是一个循环布局，基本上是一个交互式滚动列表。该布局在移动设备上有一个基本形状，两列，第一列有一个图像，第二列嵌套了三行

Screenshot 2017-02-07 16.22.18

此布局是使用标记和 css 的组合完成的。通过 Nathan Walker 的 NativeScript fonticon 插件 包含字体图标，Firebase 通过 Eddy Verbruggen 的 Firebase 插件 进行管理。在选项卡式界面中，让我们构建一个页面来列出 yowls。从 ScrollView 和 StackLayout 开始，以便内部内容可以在选项卡内正确滚动。添加一个 FlexboxLayout 标签来循环来自 Firebase 的内容

<ScrollView>
    <StackLayout>
        <FlexboxLayout class="container" *ngFor="let yowl of (yowls$ | async)">                 
        </FlexboxLayout>
    </StackLayout>
</ScrollView>
虽然您可以使用驼峰式大小写（例如 <FlexboxLayout justifyContent="center">）在标记中直接添加所有 Flexbox 属性，但我发现，在像这样的业务规则繁重的应用程序中，容器的嵌套相当多，在 css 中管理 Flexbox 属性更容易。所以，我将 .container 类设置为将所有项目对齐到 flex-start，这意味着它们将对齐到布局区域的左上角——这对图像很重要，图像需要精确地放置在左上角
.container {
  border-bottom-width: 1;
  border-color: lightgray;
  align-items: flex-start;
  padding: 5;
}
然后，我开始在这个布局中构建列和行。首先，我添加了两列，一列用于猫咪的图像，另一列用于嵌套内容（姓名、日期等）。
<Image class="column" src="~/images/k2" width="120" height="75"></Image>
<FlexboxLayout class="column">
</FlexboxLayout>
这些列在 css 中被设置为以列格式（从上到下）布局，它们的孩子被设置为不换行（在 Twitter 中，如果姓名、用户名和日期太长，它们会被截断，而不是换行）。在图像的情况下，css 本身就足以设置它的 flex-direction
.column {
  flex-direction: column;
  flex-wrap: nowrap;
}
现在是时候构建三个嵌套的行。在第二列中，我添加了三行。 

第一行是姓名、用户名、一个类似 Twitter 格式的小圆点、一个模拟的日期和一个用于共享内容的斜线箭头。此内容被赋予 justifyContent="space-between" 属性以将其均匀地分布在顶部。 

第二行只是 yowl 的文本，第三行是一行均匀分布的按钮。这里的间距处理略有不同；该行的子元素被赋予百分比宽度，以强制布局正确对齐——根据 Twitter 模式，这行按钮没有对齐，而是对齐到左侧。
<FlexboxLayout class="row pad" justifyContent="space-between">
   <Label class="bold" [text]="yowl.name"></Label>
   <Label class="small" [text]="'@'+yowl.username"></Label>
   <Label [text]="'fa-circle' | fonticon" class="fa grey tiny"></Label>
   <Label class="small" text="{{yowl.date | date:'mm'}} m"></Label>
   <Label [text]="'fa-chevron-down' | fonticon" class="fa grey small"></Label>
</FlexboxLayout>
<!-- yowl -->
      <Label class="row regular" textWrap="true" [text]="yowl.text"></Label>
<FlexboxLayout class="row pad">
   <Button width="25%" [text]="'fa-mail-reply' | fonticon" class="fa grey"></Button>
   <Button width="25%" [text]="'fa-retweet' | fonticon" class="fa grey"></Button>
   <Button width="25%" [text]="'fa-heart' | fonticon" class="fa grey"></Button>
   <Button width="25%" [text]="'fa-envelope' | fonticon" class="fa grey"></Button>
</FlexboxLayout>
行的 css 也很简单；内容按行布局，不换行，并对齐到 flex-start 以保持特定顶部元素的基线对齐。
.row {
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
}
花任何时间查看 Twitter 应用程序，您都会意识到，有很多可能的布局可以模仿。例如，当有人转发（或者，在我们的例子中，重新 yowls）一只猫时会发生什么？

好吧，为了支持这种情况，现在是时候添加另一个嵌套的 FlexboxLayout 了
<FlexboxLayout class="column ry" borderWidth="1" borderColor="lightgray" borderRadius="2">
    <FlexboxLayout class="row">
          <Label class="bold" text="Mrs. Fluffypants"></Label>
          <Label class="small" text="@mrsfluffypants"></Label>
    </FlexboxLayout>     
        <Label class="row regular" textWrap="true" text="Reading your tweets is like lapping up a wonderful bowl of sweet cream."></Label>                       
</FlexboxLayout>
这里，我添加了一个 FlexboxLayout 列作为容器，然后是另一个 FlexboxLayout 和一个作为行的标签。太容易了！过了一段时间，使用这种类型的布局开始感觉像在使用 <divs> 一样。一个 Re-Yowl 看起来像这样

Screenshot 2017-02-07 17.14.16

当然，我们还有很多可以对这个项目进行的调整。我邀请您参与！事实上，我正在提供奖品！

挑战：向此项目提交一个 PR，该 PR 将创建 Twitter 的另一个著名布局，例如推广的推文（即 Yowl），或一个主从页面，该页面将完整显示推文。或者更进一步，在选项卡视图中构建“我”页面。如果我接受您的 PR，我会给您寄一件 NativeScript T 恤！玩得开心，访问 http://www.github.com/jlooper/yowwlr 开始吧！