[教學] 手機APP開發入門--14. 格狀排列 - 討論區

之前一直用 Stack Layout 已經有讀者不耐煩了，現在就來介紹 Grid Layout 格狀排列。
NativeScript 總共提供5種畫面不覺模式，其中 Stack 和 Grid 使用情況超過 95%,
所以其他3種 Absolute, Dock 和 Wrap 為了加快進度就暫時不講，
等將來有機會在說，或著您自己參考官方說明.

Grid Layout 的定義格式如下：

<GridLayout rows="*,*,*" columns="*,*" width="300" height="450">
  ... //填充內容 
</GridLayout>

屬性說明如下：

• rows: 定義行數（縱向）
• columns: 定義列數（橫向）
• width: 畫面寬度
• height: 畫面高度

這是最普通的格式，每個格子大小相同。
另外還有兩種更複雜細緻的定義格式，可以分別定義每個格子的大小，這裡也先暫時掠過。

上面範例在寬 300, 高 450 點（像素）的畫面上分隔出直3橫2總共6個格子，
每個格子都一樣長寬都是 150 點。
這6個格子的座標分別是 (0,0), (0,1), (1,0), (1,1), (2,0), (2,1).
下面我們舊來時做這個畫面。

請在 home.xml 新增一個『我的其他作品』按鈕，作用是跳轉到 product 畫面。
product.xml 內容如下：

<Page>
  <GridLayout rows="*,*,*" columns="*,*" width="300" height="450">
    <Button row="0" col="0" text="猜數字"/>
    <Button row="0" col="1" text="計算機"/>
    <Button row="1" col="0" text="圈差遊戲"/>
    <Button row="1" col="1" text="戳戳樂"/> 
    <Button row="2" col="0" text="點點愛"/>
    <Button row="2" col="1" text="明盤欣賞"/>
  </GridLayout>
</Page>

GridLayout 如果要針對每一格套用兩個以上的元件標籤就必須套疊 StackLayout, 像這樣：

<GridLayout rows="*,*,*" columns="*,*" width="300" height="450">
  <StackLayout row="0" col="0" style="background-color: #CCCCCC">
    <Label text="針對這一格加上背景顏色和圖片" textWrap="true" />
    <Image src="MyPicture" width="75" height="75" />
  </StackLayout>
</GridLayout>

走到這裡應該要講講 CSS 美編部份了，可惜這不是我的專長再加上對我也確實有視力的限制，所以打算暫時跳過。
還好這種資料網路上並不難找，有需要就去找找吧。
不然就要等我公立進步了再回頭來講。

使用者界面部份當然不只這些內容，但是基於這是入門課程，
為了帶領大家早日登堂入室，暫時就此打住。
接下來就要往技術核心部份邁進，不怕苦的就繼續跟我走吧！
※最後更新時間：2019-12-29 11:57:15 From：123.193.249.19 By：coscell