ionic3 — 标题居中以及添加button的方法,修改图标大小

        先看一下效果图：

        我想要的结果是：标题居中显示，并且在标题的左边显示一个button。首先我查阅了官网的API，官网给的代码是这样的：

<ion-header>

  <ion-navbar>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
      Page Title
    </ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="openModal()">
        <ion-icon name="options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

        理论上应该是左边会有一个“menu”图形的按钮，中间显示“page title”标题，右边可以显示一个“options”图形的按钮。想象是完美的，当运行后发现结果如下：

        从图中可以看出，左边的图标没有了，pageTitle直接左对齐。显然不符合我想要的结果。接下来我又查看了官网给的demo，代码为：

<ion-toolbar no-border-top>
    <ion-buttons start>
      <button  ion-button icon-only solid>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Solid</ion-title>
    <ion-buttons end>
      <button  ion-button icon-end solid color="secondary">
        Help
        <ion-icon name="help-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>

        我们发现与开始的代码不同，这里将左边的button放在了ion-buttons标签中，并且加入了一个start属性。本以为可以得到想要的结果，然而结果却是：

        本应该出现在左边的图标竟然放在了右边。之后我尝试使用css对button进行调整，结果图标和标题竟然出现了分行：

        以上就是我出现的问题，接下来讲一下我是怎么解决这个问题的：

        解决方案：

        其实很简单，只是将第二部分代码的start和end改成了left和right。看似简单，却尝试了很多次才找到的。同时为了使标题居中，需要加入属性style="text-align:center"。不         然标题会左对齐。代码如下：

    <ion-navbar>
     <ion-buttons left>
      <button ion-button icon-only>
        <ion-icon name="ios-arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title style="text-align:center">标题</ion-title>

    <ion-buttons right>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>   
   </ion-navbar>

效果图：

        经过查阅资料原来：

        当安卓使用start和end时都会显示在右边。

        这个时候基本就实现了功能。另外如果只想要左边的图标，不想要右边的图标怎么办。这个时候如果只是将右边的图标删除，那标题就不会在标题栏正中间，而是会向右偏移一些。所以，我相出的方法是，即使右边没有图标，那仍然要保留一块和左边图标一样的区域，这样标题就能完美的显示在正中间。我的代码如下：

    <ion-navbar>
     <ion-buttons left>
      <button ion-button icon-only style="width:20px">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title style="text-align:center">标题</ion-title>
    <ion-buttons right>
      <button ion-button disabled="disabled" style="width:20px">
      </button>
    </ion-buttons> 
   </ion-navbar> 

这代码中，我在右边保留了一个button，但是这个button不能使用（加入了disabled="disabled"属性）。而且和左边的图标宽度相同，这样就能显示出文章最初的效果图。

        另外，如果说你觉得图标太小，想变大一点，也有方法，其实icon属于一种字体，我们只需要改变font-size的大小就行了。比如下面我们修改字体大小

< ion-buttons left >

< button ion-button icon-only style= "width:20px;font-size:20px" >

< ion-icon name= "ios-arrow-back" ></ ion-icon >

</ button >

</ ion-buttons >

        效果图：

        是不是比之前大了不少。

        如果你有什么更好的方法，欢迎一起交流！

        官网地址： http://ionicframework.com/docs/api/components/toolbar/Navbar/