《HarmonyOS應用開發(fā)基礎》 課件知識點2-3-1 Row與Column組件的使用

Row與Column組件的使用010203容器組件概述Column和Row組件介紹線性布局的權重設置容器組件概述容器組件是一種比較特殊的組件，它可以包含其他的組件，而且按照一定的規(guī)律布局。容器組件除了放置基礎組件外，也可以放置容器組件，通過多層布局的嵌套，可以布局出更豐富的頁面。ArkTS為我們提供了豐富的容器組件來布局頁面，例如使用Column和Row容器組件實現(xiàn)如下效果。Column和Row組件介紹線性布局容器概念Column和Row組件是ArkTS提供用來實現(xiàn)線性布局的容器組件。線性布局表示按照垂直方向或者水平方向排列子組件的容器。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。Column和Row組件介紹主軸與交叉軸的概念在線性布局容器中，存在兩根軸，分別是主軸和交叉軸，這兩個軸始終是相互垂直的。不同的容器中主軸的方向不一樣的。主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向；在Row容器中的組件是按照從左到右的水平方向布局的，其主軸的方向是水平方向。Column和Row組件介紹交叉軸：與主軸垂直相交的軸線，如果主軸是垂直方向，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向。Column和Row組件介紹主軸與交叉軸的對齊格式Column和Row容器默認都在主軸和交叉軸上居中顯示子組件。同時，他們也提供屬性justifyContent和alignItems用來設置子組件在主軸和交叉軸的對齊格式。主軸方向的對齊格式（justifyContent）子組件在主軸方向上的對齊使用justifyContent屬性來設置，其參數(shù)類型是FlexAlign。FlexAlign定義了以下幾種類型：StartCenterEndSpaceBetweenSpaceAroundSpaceEvenlyColumn和Row組件介紹Column在主軸上的對齊格式：Row在主軸上的對齊格式：Column和Row組件介紹交叉軸方向的對齊（alignItems）子組件在交叉軸方向上的對齊方式使用alignItems屬性來設置。Column容器的主軸是垂直方向，交叉軸是水平方向，其參數(shù)類型為HorizontalAlign（水平對齊），HorizontalAlign定義了以下幾種類型：Start：設置子組件在水平方向上按照起始端對齊。Center（默認值）：設置子組件在水平方向上居中對齊。End：設置子組件在水平方向上按照末端對齊。Column和Row組件介紹Row容器的主軸是水平方向，交叉軸是垂直方向，其參數(shù)類型為VerticalAlign（垂直對齊），VerticalAlign定義了以下幾種類型：Top：設置子組件在垂直方向上居頂部對齊。Center（默認值）：設置子組件在豎直方向上居中對齊。Bottom：設置子組件在豎直方向上居底部對齊。線性布局的權重設置權重屬性表示