1. 首頁 > 生活百科 > >

二 APICloud可視化編程( 二 )

生活百科


③最右側是屬性編輯區，我們可以通過屬性編輯對當前組件進行樣式修改，注冊事件以及修改組件的一些內部屬性 。

二 APICloud可視化編程

文章插圖
上手體驗 首先在左側拖拽一個view視圖容器，鼠標長按view組件拖拽到中間的畫布區域中 ， 然后松開鼠標 。可以看到在畫布中有一個綠色的小框，這個就是生成view組件，接下來將當前容器組件中再拖拽一個text的文本組件 。
接下來我們再去修改組件 ， 先修改當前文本外面的view容器組件 。
  • 選中view組件，然后在右側的樣式中找到高度選項填寫高度200px，這樣它的高度變為了200像素；
  • 接下來修改組件的背景顏色，找到下面的背景顏色，填充方式分為顏色填充、背景填充，顏色填充就是使用十六進制的色號填充；背景填充是讓組件背景是一張圖片 。我們這里選擇顏色填充，可以看到當前的微有容器變成一個天藍色 。

二 APICloud可視化編程

文章插圖
  • 布局屬性，除了修改尺寸大小之外 ， 還可以修改它的主軸方向，主軸對齊、副軸對齊以及是否換行 ， 這個就是我們的flex布局，我們可以通過這些配置項選擇它的對接方式 。

二 APICloud可視化編程

文章插圖
  • 修改元素內外邊距 ， 這里設置margin-top屬性20px，那他距離頂部的距離就變成了20像素，然后下面的定位當前元素是默認有一個相對定位，然后可以使用相對定位和絕對定位，對當前元素進行位置的固定 。

二 APICloud可視化編程

文章插圖
  • 下面就是設置字體 ， 我們選中文本組件，修改它的字號，這里輸入24像素，可以看到文本的字體變大，然后也可以修改它行高，還有它的自重也就是粗細，然后點擊修改文本顏色 。

二 APICloud可視化編程

文章插圖

推薦閱讀