[Ionic 2从入门到精通] 3.3 基本布局

课程开始我们学习会很慢且很简单，只是专注创建应用的基本布局。我们需要给Home页面创建模板，用来显示所有创建的检查列表，对于Checklist页面，用于展示一个指定检查列表的所有条目。如果你稍加留意的话，你就知道还有另一个页面，这个的制作就是比较靠后的事情了。
如之前所说，我会尽量使课程模组化，这样制作应用可以引起你的兴趣，而不用强制遵循一个固定的顺序。由于这是第一个应用，也因为这是基本包里面唯一包含的原因，我会注意确保所有细节解释清楚。

Home页面

在进入代码编写之前，我们需要在脑中有一个清晰的视图我们要制作什么样子的一个东西（译者：胸有成竹）。一下是完成的home页面的截图：

主页

可以看到它有一个很漂亮的样式，这个我们后续会涉及，但是实际上他就是个很简单的列表，右上角有一个按钮用来添加一个新的检查列表。虽然不是全部都简单，你会发现其中一个列表项有点不一样，他有一个‘Edit’和‘Delete’按钮。这是因为我们将使用Ionic提供的滑动列表组件，他允许我们指定在用户滑动列表项的时候展示一些内容。
那么，我们开始制作吧。首先，我们看一下整个模板里面的内容，然后我们将他分成小块来详细讨论：
> 修改src/pages/home/home.html为如下内容

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
            <img src = "assets/images/logo.png" />
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="addChecklist()"><ion-icon name="add-circle"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list no-lines>
        <ion-item-sliding>
        <button ion-item (click)="viewChecklist(checklist)">
        TITLE GOES HERE
        <span>0 items</span>
        </button>
            <ion-item-options>
            <button ion-button icon-only color="light" (click)="renameChecklist(checklist)"><ion-icon        name="clipboard"></ion-icon> Edit</button>
            <button ion-button icon-only color="danger"  (click)="removeChecklist(checklist)"><ion-icon
            name="trash"></ion-icon> Delete</button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

我们先开始讨论<ion-header>部分：

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
        <img src = "assets/images/logo.png" />
            </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="addChecklist()"><ion-icon   name="add-circle"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-navbar>允许我们添加一个页首条到我们的应用，可以持有一些按钮，标题甚至在需要的时候直接与Ionic的导航系统整合来显示后退按钮。
我们给navbar添加了color属性并制定为secondary颜色，此颜色定义在theme/variable.scss里面。navbar里面我们用到一个<ion-title>，他基本上就是用来展示一个当前页面的文本标题，展示logo。我们也用到了<ion-buttons>在navbar里面创建了一个按钮。通过指定end属性，所有按钮在iOS上都会排列在右边，但是如果我们指定的是‘start’属性，按钮将会排列到左边。记住，Ionic 2有平台一致性编译，所以在不同的运行平台上，他默认会展示到合适的位置上。
最后，我们将按钮放到<ion-buttons>里面。这个按钮用到了一个圆形图标并添加了一个点击处理器在点击的时候调用home.ts里面的addChecklist()方法（现在还没创建这个方法）。同时注意，我们给按钮用了ion-button和icon-only属性，这可以是Ionic知道我们将对按钮使用Ionic样式，这个样式将使按钮只有图标没有文本。
我们现在来看列表部分：

<ion-content>
    <ion-list no-lines>
        <ion-item-sliding>
            <button ion-item (click)="viewChecklist(checklist)">
            TITLE GOES HERE
            <span>0 items</span>
            </button>
            <ion-item-options>
            <button ion-button icon-only color="light"   (click)="renameChecklist(checklist)"><ion-icon
            name="clipboard"></ion-icon> Edit</button>
            <button ion-button icon-only color="danger"  (click)="removeChecklist(checklist)"><ion-icon   name="trash"></ion-icon> Delete</button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

在讲解列表之前，我们先看到所有的东西都被包围在<ion-content>里面 -- 这个标签用来持有页面的主体内容，在大部分的案例中，所有navbar之外的内容都将放在这里。
和纯HTML创建的列表相比：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Ionic创建列表的方式基本上是一样的：

<ion-list>
    <ion-item></ion-item>
    <ion-item></ion-item>
    <ion-item></ion-item>
</ion-list>

当然，我们的看起来稍微复杂些，所以我们来了解一下。第一个超出寻常的事物是我们家了一个 no-lines属性到<ion-list>。和我们给navbar添加的secondary属性一样，这个属性让我们的列表里面的项不能显示边界。
接下来的有点棘手，也就是我们设置滑动项的地方，和<ion-item>不同的是，我们用的是<ion-sliding-item>，由两个部分的内容组成 -- 列表项本身，和<ion-item-options>，这是是用户滑动列表项显示的。
<ion-sliding-item>第一块是普通的<ion-item>定义，但是不是直接使用的<ion-item>我们使用的是<button ion-item>实际上是一个用来列表项样式的按钮。视觉上，这两个方法基本上是一样的，但是实际上在移动应用里任何非<button>和<a>元素的点击处理器都会有一点点延迟。我们不喜欢延迟，所以我们用了按钮。
我们给按钮附加的点击处理器调用了一个viewChecklist函数同时也传入了一个参数名为checklist。我们目前还没有这个函数定义，但是实际上我们会根据一个数据数组创建大量的此类列表项。所以最终此处传入的checklist将是点击的想的引用（详情后续讲解）。
最后，我们的第二个代码块<ion-item-block>，简单的定义了在用户滑动列表项的时候的显示内容。在本案例中我们只是加入了一个‘Edit’和‘Delte’按钮，他们也会在调用函数的时候注入checklist引用（再次提醒，我们稍后创建这个原因，目前他会引发问题）。
这就是home页面的所有内容，我们现在去checklist页面。

Checklist页面

跟之前流程一样，在学习之前我们先看看效果图：

列表详情页

看起来跟之前那个差不多，最起码大部分看起来是这样的，但是还是有一些不同点。显然，我们有另外的一个按钮，一个返回按钮用于返回主页。列表项旁边有一个checkbox用于标记一个项是否完成，我们这里也设置了滑动项。
再次，我们将添加模板代码然后来讲解：
> 修改 src/pages/checklist/checklist.html为以下：

<ion-header>
    <ion-navbar color="secondary">
    <ion-title>
        CHECKLIST TITLE
    </ion-title>
    <ion-buttons end>
    <button ion-button icon-only (click)="uncheckItems()"><ion-icon name="refresh-circle"></ion-icon></button>
    <button ion-button icon-only (click)="addItem()"><ion-icon  name="add-circle"></ion-icon></button>
    </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
<ion-list no-lines>
    <ion-item-sliding>
    <ion-item>
        <ion-label>ITEM TITLE</ion-label>
        <ion-checkbox [checked]="item.checked" (click)="toggleItem(item)">
        </ion-checkbox>
    </ion-item>
    <ion-item-options>
        <button ion-button icon-only color="light" (click)="renameItem(item)"><ion-icon name="clipboard"></ion-icon> Edit</button>
        <button ion-button icon-only color="danger"  (click)="removeItem(item)"><ion-icon name="trash"></ion-icon>
        Delete</button>
    </ion-item-options>
    </ion-item-sliding>
</ion-list>
</ion-content>

你已经知道了navbar的如何工作的，本次我们只是在<ion-buttons>里面新加入了一个按钮，他也使用了end属性，这样所有的项都会排列到右边。本次我们将使用<ion-title>的传统方式，显示当前展示的检查列表（最起码，我们马上就会做这个）的标题。按钮也都有不同的点击处理函数，但是由于我们当前是在ChecklistPage组件，这些函数都会在checklist.ts文件里面触发（这个东西我们当前也没有创建）。
现在你也知道滑动项怎么工作的，但是这次我们有一个<ion-checkbox>作为主体内容，当他被点击的时候他会触发toggleItem()函数，这个函数稍后也会定义。注意，我们用来普通的<ion-item>来替代<button ion-item>，这是因为我们是直接给checkbox附加点击处理器而不用附加到整个项。
这里也有一点新语法，我们靠近点看：

[checked]="item.checked"

如果某些东西被 [方括号] 包围的话，因为这我们将在这个元素上修改一个属性property，我们将设置引号里面包含的表达式expression，而不是字符串。所以，在本案例中，我们将设置checked属性到item.checked的值。目前我们还没有创建一个item的引用所以现在是没有任何作用的，但是后续会。这里需要重点记住的是方括号会评估引号里面的任何内容。我们想象一下你的组件的类里有如下定义：

this.myName = "Josh"

如果我如下使用：

<something myName="myName">

myName属性attribute将被设为“myName”文本值，但是如果我们使用如下代码的话：

<something [myName]="myName">

myName属性property将被设置为‘Josh’，因为myName在此示例中将会评估（译者：表达式估值）。继续，模板里没有别的新玩意了 -- 我们简单的添加了‘Edit’和‘Delete’按钮到滑动列表，就像上一个页面一样。
如果现在运行ionic serve，将会看到如下结果：

列表详情页

我想我们都会认为这看起来好丑，但是结构就在那里。请记住，我们还没有对logo指定样式，因此根据你使用何种尺寸的设备，他可能和上图看起来不大一样。
接下来的课程我们将给列表拉取真是数据并对他自定义样式，这样他会看起来顺眼些。Ionic 2的模板语法第一眼看起来可能会有点迷糊，但是一旦你熟悉了之后将会很好使用。