《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-3-1 Row與Column組件的使用

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