最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

創(chuàng)新互聯(lián)長(zhǎng)期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為越城企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，越城網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

在之前的章節(jié)中我使用的是Java 代碼構(gòu)建UI界面，從本節(jié)開始，將使用XML構(gòu)建UI界面。

使用XML構(gòu)建UI(默認(rèn)你已經(jīng)會(huì)在項(xiàng)目中創(chuàng)建XML布局文件)界面相對(duì)Java代碼構(gòu)建的好處是：結(jié)構(gòu)清晰，代碼簡(jiǎn)潔。

DirectionalLayout(單一方向排列布局)是Java UI的一種重要的組件布局，用于將一組組件按照水平或垂直方向排布，能夠方便地對(duì)齊布局內(nèi)的組件。與Android中的線性布局相似?？梢酝ㄟ^設(shè)置orientation屬性來控制組件的排列方式，默認(rèn)為垂直排列。

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
                   ohos:width="match_parent"
  
  
  
  
                   ohos:height="match_parent"
  
  
  
  
                   ohos:background_element="#FFCCCCCC"
  
  
  
  
                   ohos:orientation="vertical">
  
  
  
  
    
  
  
  
  
        ohos:id="$+id:txtOne"
  
  
  
  
        ohos:width="match_content"
  
  
  
  
        ohos:height="match_content"
  
  
  
  
        ohos:padding="20vp"
  
  
  
  
        ohos:margin="20vp"
  
  
  
  
        ohos:text_size="30vp"
  
  
  
  
        ohos:text_color="#FFFFFFFF"
  
  
  
  
        ohos:background_element="#FFFF00FF"
  
  
  
  
        ohos:text="我是第一個(gè)"/>
  
  
  
  

  
  
  
  
    
  
  
  
  
        ohos:id="$+id:txtTwo"
  
  
  
  
        ohos:width="match_content"
  
  
  
  
        ohos:height="match_content"
  
  
  
  
        ohos:padding="20vp"
  
  
  
  
        ohos:margin="20vp"
  
  
  
  
        ohos:text_size="30vp"
  
  
  
  
        ohos:text_color="#FFFFFFFF"
  
  
  
  
        ohos:background_element="#FFFF00FF"
  
  
  
  
        ohos:text="我是第二個(gè)"/>
  
  
  
  

  
  
  
  
    
  
  
  
  
        ohos:id="$+id:txtThird"
  
  
  
  
        ohos:width="match_content"
  
  
  
  
        ohos:height="match_content"
  
  
  
  
        ohos:padding="20vp"
  
  
  
  
        ohos:margin="20vp"
  
  
  
  
        ohos:text_size="30vp"
  
  
  
  
        ohos:text_color="#FFFFFFFF"
  
  
  
  
        ohos:background_element="#FFFF00FF"
  
  
  
  
        ohos:text="我是第三個(gè)"/>
  
  
  
  

  
  
  
  

 
 
 
 

將上面代碼中的ohos:orientation="vertical"換成ohos:orientation="horizontal" 然后運(yùn)行查看效果如下所示。

DirectionalLayout布局中的組件不會(huì)自動(dòng)換行，會(huì)按照設(shè)定的方向依次排列，若超出布局本身大小，超出布局大小的部分將不會(huì)顯示。我們將上面示例代碼中的Text組件寬度設(shè)定為400vp，然后運(yùn)行效果如下所示，我們可以看到，第三個(gè)Text組件顯示了一部分。

DirectionalLayout中的組件使用layout_alignment控制自身在布局中的對(duì)齊方式，當(dāng)對(duì)齊方式與排列方式一致時(shí)，對(duì)齊方式不會(huì)生效，如布局為水平方法排列，則其下組件左對(duì)齊、右對(duì)齊將不會(huì)生效。因?yàn)椴季种锌梢郧短撞季謥碡S富UI樣式，我們可以使用這個(gè)方式來演示一下對(duì)齊樣式。

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
                   ohos:width="match_parent"
  
  
  
  
                   ohos:height="match_parent"
  
  
  
  
                   ohos:orientation="vertical">
  
  
  
  
    
  
  
  
  
            ohos:width="match_parent"
  
  
  
  
            ohos:height="0vp"
  
  
  
  
            ohos:weight="2"
  
  
  
  
            ohos:margin="10vp"
  
  
  
  
            ohos:background_element="#FFDDDDDD"
  
  
  
  
            ohos:orientation="vertical">
  
  
  
  
        
  
  
  
  
                ohos:width="match_content"
  
  
  
  
                ohos:height="match_content"
  
  
  
  
                ohos:padding="10vp"
  
  
  
  
                ohos:margin="10vp"
  
  
  
  
                ohos:text_size="20vp"
  
  
  
  
                ohos:text_color="#FFFFFFFF"
  
  
  
  
                ohos:layout_alignment="left"
  
  
  
  
                ohos:background_element="#FFFF00FF"
  
  
  
  
                ohos:text="左對(duì)齊"/>
  
  
  
  

  
  
  
  
        
  
  
  
  
                ohos:width="match_content"
  
  
  
  
                ohos:height="match_content"
  
  
  
  
                ohos:padding="10vp"
  
  
  
  
                ohos:margin="10vp"
  
  
  
  
                ohos:text_size="20vp"
  
  
  
  
                ohos:text_color="#FFFFFFFF"
  
  
  
  
                ohos:layout_alignment="horizontal_center"
  
  
  
  
                ohos:background_element="#FFFF00FF"
  
  
  
  
                ohos:text="水平方向居中"/>
  
  
  
  

  
  
  
  
        
  
  
  
  
                ohos:width="match_content"
  
  
  
  
                ohos:height="match_content"
  
  
  
  
                ohos:padding="10vp"
  
  
  
  
                ohos:margin="10vp"
  
  
  
  
                ohos:text_size="20vp"
  
  
  
  
                ohos:text_color="#FFFFFFFF"
  
  
  
  
                ohos:layout_alignment="right"
  
  
  
  
                ohos:background_element="#FFFF00FF"
  
  
  
  
                ohos:text="右對(duì)齊"/>
  
  
  
  
        
  
  
  
  
                ohos:width="match_content"
  
  
  
  
                ohos:height="match_content"
  
  
  
  
                ohos:padding="10vp"
  
  
  
  
                ohos:margin="10vp"
  
  
  
  
                ohos:text_size="20vp"
  
  
  
  
                ohos:text_color="#FFFFFFFF"
  
  
  
  
                ohos:layout_alignment="center"
  
  
  
  
                ohos:background_element="#FFFF00FF"
  
  
  
  
                ohos:text="垂直與水平方向都居中"/>
  
  
  
  
    
  
  
  
  
    
  
  
  
  
            ohos:width="match_parent"
  
  
  
  
            ohos:height="0vp"
  
  
  
  
            ohos:margin="10vp"
  
  
  
  
            ohos:weight="1"
  
  
  
  
            ohos:background_element="#FFCCCCCC"
  
  
  
  
            ohos:orientation="horizontal">
  
  
  
  
        
  
  
  
  
                ohos:width="match_content"
  
  
  
  
                ohos:height="match_content"
  
  
  
  
                ohos:padding="10vp"
  
  
  
  
                ohos:margin="10vp"
  
  
  
  
                ohos:text_size="20vp"
  
  
  
  
                ohos:text_color="#FFFFFFFF"
  
  
  
  
                ohos:layout_alignment="top"
  
  
  
  
                ohos:background_element="#FFFF00FF"
  
  
  
  
                ohos:text="頂部對(duì)齊"/>
  
  
  
  

  
  
  
  
        
  
  
  
  
                ohos:width="match_content"
  
  
  
  
                ohos:height="match_content"
  
  
  
  
                ohos:padding="10vp"
  
  
  
  
                ohos:margin="10vp"
  
  
  
  
                ohos:text_size="20vp"
  
  
  
  
                ohos:text_color="#FFFFFFFF"
  
  
  
  
                ohos:layout_alignment="vertical_center"
  
  
  
  
                ohos:background_element="#FFFF00FF"
  
  
  
  
                ohos:text="垂直方向居中"/>
  
  
  
  

  
  
  
  
        
  
  
  
  
                ohos:width="match_content"
  
  
  
  
                ohos:height="match_content"
  
  
  
  
                ohos:padding="10vp"
  
  
  
  
                ohos:margin="10vp"
  
  
  
  
                ohos:text_size="20vp"
  
  
  
  
                ohos:text_color="#FFFFFFFF"
  
  
  
  
                ohos:layout_alignment="bottom"
  
  
  
  
                ohos:background_element="#FFFF00FF"
  
  
  
  
                ohos:text="底部對(duì)齊"/>
  
  
  
  
        
  
  
  
  
                ohos:width="match_content"
  
  
  
  
                ohos:height="match_content"
  
  
  
  
                ohos:padding="10vp"
  
  
  
  
                ohos:margin="10vp"
  
  
  
  
                ohos:text_size="20vp"
  
  
  
  
                ohos:text_color="#FFFFFFFF"
  
  
  
  
                ohos:layout_alignment="center"
  
  
  
  
                ohos:background_element="#FFFF00FF"
  
  
  
  
                ohos:text="垂直與水平方向都居中"/>
  
  
  
  
    
  
  
  
  

 
 
 
 

在上面代碼中我們看到兩個(gè)DirectionalLayout子布局中有ohos:weight="1"屬性，這個(gè)屬性就是設(shè)置組件在布局中的權(quán)重，按照比例來分配組件占用父組件的大小。

DirectionalLayout布局需要掌握的知識(shí)點(diǎn)也就這么多，接下來再說說題外話。

設(shè)置UI顯示界面問題

我們使用XML方式構(gòu)建UI，在AbilitySlice中設(shè)置界面入口的時(shí)候，一般會(huì)報(bào)錯(cuò)，找不到布局文件。官方推薦使用Build -> Build App(s)/Hap(s) > Build Debug Hap(s)重新編譯一次即可。

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

本文標(biāo)題：鴻蒙HarmonyOSJavaUI之DirectionalLayout布局
文章URL：http://m.fisionsoft.com.cn/article/cccpjpe.html