如何使用GriRow和GriCol開發自適應布局
作者：野生菌君
OpenHarmony為開發者提供了較為靈活的自適應布局能力，本文即為大家做一個簡單的介紹。
場景說明
開發者經常需要將一個應用適配到不同的設備上運行，比如手機、平板、折疊屏等等。為了保證用戶的瀏覽體驗，就需要根據不同設備的屏幕尺寸設計相應的UI布局變化。常見的如閱讀軟件，在手機上顯示一頁內容，在折疊屏上就可以顯示兩頁內容，這樣才能給用戶更好的閱讀體驗。
針對上述場景，OpenHarmony為開發者提供了較為靈活的自適應布局能力，本文即為大家做一個簡單的介紹。
兩個重要的自適應布局組件
使用OpenHarmony進行自適應布局的開發離不開以下兩個組件：GridRow、GridCol。
- GridRow用來將屏幕等分為特定列數，并設置區分屏幕大小的臨界點（breakpoints），比如可以將屏幕列數根據屏幕大小劃分為：小屏設備4列，中屏8列，大屏12列（假設屏幕寬度<=520vp為小屏，520vp<屏幕寬度<=840vp為中屏，屏幕寬度>840vp為大屏）。那么就可以將520vp和840vp設置為臨界點，當屏幕尺寸由[0，520vp]區間跨越到[520vp，840vp]區間時，屏幕劃分的列數也會由4列變為8列。臨界點的詳細介紹可參考GridRow指南。
- GridCol是Gridrow的子組件，可以根據屏幕大小設置其所覆蓋的列數，那么GridCol中的子組件就可以相應的隨屏幕的大小變化而變化。比如界面中有一個搜索框，我們希望其長度在小屏設備上占2列，中屏設備占4列，大屏設備占8列，那么就可以將搜索框放在一個GridCol組件中，并設置GridCol組件在小、中、大設備上所占的列數分別為2、4、8。
可參考如下GridRow和GridCol的示意圖理解兩者之間的關系：
一個小示例
接下來用一個小示例來展示GridRow和GridCol是怎么協同實現自適應布局的。
頁面元素
頁面中包含一個文本框，一個搜索框，一個滑動條。
實現效果
- 小屏頁面時，文本框、搜索框和滾動條縱向排列，搜索框和滾動條跟屏幕等寬，滾動條一次顯示一個頁面。
- 當拖動頁面至中屏大小時，文本框和搜索框在一行顯示，滾動條一次顯示兩個頁面。
效果圖如下：
開發步驟
接下來我們來看如何完成上述效果的開發。開發步驟中僅展示相關步驟代碼，全量代碼請參考完整代碼章節的內容。
首先，使用GridRow對屏幕進行劃分，本例按照不同屏幕大小進行如下劃分：最小屏4列、小屏4列、中屏8列。設置最小屏到小屏，小屏到中屏兩個斷點（最小屏到小屏的斷點本例效果沒有演示）。
GridRow({
// 劃分屏幕：最小屏4列、小屏4列、中屏8列
columns:{xs: 4, sm: 4, md: 8},
gutter:{x:$r('app.float.gutter_home')},
// 設置最小屏到小屏，小屏到中屏兩個斷點
breakpoints: { value: ["320vp", "520vp"] }
}){
//...
}
.height("100%")
.width("100%")
.padding({top:10,bottom:10,left:10,right:10})補充UI元素，將文本框、搜索框、滑動條放在GridCol中，GridCol為GridRow的子組件。
GridRow({
// 劃分屏幕：最小屏4列、小屏4列、中屏8列
columns:{xs: 4, sm: 4, md: 8},
gutter:{x:$r('app.float.gutter_home')},
// 設置最小屏到小屏，小屏到中屏兩個斷點
breakpoints: { value: ["320vp", "520vp"] }
}){
// 文本框：首頁
GridCol(){
Row() {
Text("首頁")
//...
}
}
.height(56)
.margin({ bottom: 8})
// 搜索框
GridCol(){
Search({placeholder:'搜索...'})
//...
}
.height(48)
// 滾動條
GridCol(){
Swiper(){
//...
}
.height(144)
.itemSpace(12)
.autoPlay(true)
.displayCount(this.currentbp == 'md' ? 2 : 1)
}
.height(144)
}
.height('100%')
.width('100%')
.padding({top:10,bottom:10,left:10,right:10})分別設置文本框、搜索框、滾動條所在GridCol在不同屏幕尺寸下所占的列數。
- 由于小屏時文本框、搜索框和滾動條縱向排列，且搜索框和滾動條跟屏幕等寬，所以可以讓三個元素占滿屏幕劃分的列數，即4列。
- 中屏大小時，文本框和搜索框在一行顯示，此時屏幕總共劃分為8列，所以可以讓文本框占2列，搜索框占6列（只要兩個元素占用的列數之和小于8都可以在一行顯示）。
- 中屏大小時，滾動條一次顯示兩個頁面。滾動條占滿8列，然后通過displayCount屬性控制顯示的頁數。
代碼如下：
GridRow({
// 劃分屏幕：最小屏4列、小屏4列、中屏8列
columns:{xs: 4, sm: 4, md: 8},
gutter:{x:$r('app.float.gutter_home')},
// 設置最小屏到小屏，小屏到中屏兩個斷點
breakpoints: { value: ["320vp", "520vp"] }
}){
// 文本框：首頁
// 小屏sm：4列，中屏md：2列
GridCol({span:{ xs: 2, sm: 4, md: 2}}){
Row() {
Text("首頁")
//...
}
}
.height(56)
.margin({ bottom: 8})
// 搜索框
// 小屏sm：4列，中屏md：6列
GridCol({span:{xs: 2, sm: 4, md: 6}}){
Search({placeholder:'搜索...'})
//...
}
.height(48)
// 滾動條
// 小屏sm：4列，中屏md：8列
GridCol({span:{ xs: 4, sm: 4, md:8 }}){
Swiper(){
//...
}
.height(144)
.itemSpace(12)
.autoPlay(true)
// 小屏時顯示一個頁面，中屏時顯示兩個頁面
.displayCount(this.currentbp == 'md' ? 2 : 1)
}
.height(144)
}
.height('100%')
.width('100%')
.padding({top:10,bottom:10,left:10,right:10})
// 獲取斷點
.onBreakpointChange((breakpoint)=>{
this.currentbp = breakpoint
})完整代碼
本例完整代碼如下：
示例中用到的資源請替換為開發者本地資源。
//AdaptiveUI.ets
@Entry
@Component
export struct HomePage{
@State currentbp: string = ''
build(){
GridRow({
// 劃分屏幕：最小屏4列、小屏4列、中屏8列
columns:{xs: 4, sm: 4, md: 8},
gutter:{x:24},
// 設置最小屏到小屏，小屏到中屏兩個斷點
breakpoints: { value: ["320vp", "520vp"] }
}){
// 文本框：首頁
// 小屏sm：4列，中屏md：2列
GridCol({span:{ xs: 2, sm: 4, md: 2}}){
Row() {
Text("首頁")
.fontSize(24)
.fontWeight(500)
.width('100%')
.margin({
top: 12,
bottom: 12,
left: 12
})
}
}
.height(56)
.margin({ bottom: 8})
// 搜索框
// 小屏sm：4列，中屏md：6列
GridCol({span:{xs: 2, sm: 4, md: 6}}){
Search({placeholder:'搜索...'})
.width('100%')
.height(40)
.margin({ bottom: 8})
.placeholderFont({ size: 16 })
}
.height(48)
// 滾動條
// 小屏sm：4列，中屏md：8列
GridCol({span:{ xs: 4, sm: 4, md:8 }}){
Swiper(){
ForEach(SwiperList, (item: CardItem) => {
Stack({ alignContent: Alignment.TopStart }) {
Image(item.img)
.width('100%')
.height('100%')
.borderRadius(16)
.objectFit(ImageFit.Cover)
Column() {
Text(item.title)
.fontSize(16)
.fontColor(Color.White)
.margin({ bottom: 4 })
Text(item.info)
.fontSize(12)
.fontColor(Color.White)
.opacity(0.6)
}
.alignItems(HorizontalAlign.Start)
.margin({ top: 20, left: 14 })
}
}, item => JSON.stringify(item))
}
.height(144)
.itemSpace(12)
.autoPlay(true)
// 小屏時顯示一個頁面，中屏時顯示兩個頁面
.displayCount(this.currentbp == 'md' ? 2 : 1)
}
.height(144)
}
.height('100%')
.width('100%')
.padding({top:10,bottom:10,left:10,right:10})
// 獲取斷點
.onBreakpointChange((breakpoint)=>{
this.currentbp = breakpoint
})
}
}參考
責任編輯：jianghua
來源：
51CTO 開源基礎軟件社區
