佈局基礎（一）：線性佈局Column與Row的排列、對齊與間距控制詳情 - Text,線性佈局,嵌套,Android,移動開發 mb6923acc0735dc 博客

引言：構建UI界面的基石

線性佈局是HarmonyOS應用開發中最基礎、使用最頻繁的佈局方式。作為ArkUI佈局體系的基石，Column和Row組件幾乎出現在每一個HarmonyOS應用的界面中。理解線性佈局的核心原理和靈活運用技巧，是構建精美、響應式用户界面的首要步驟。

線性佈局的核心思想是沿單一方向順序排列子元素，這種簡潔而強大的佈局模型能夠滿足大多數常見的界面排版需求。無論是垂直排列的列表內容，還是水平排列的按鈕組，線性佈局都能提供高效且性能優異的解決方案。

一、線性佈局的基本概念與容器選擇

1.1 Column與Row的本質區別

線性佈局通過兩個核心容器組件實現：Column（垂直排列）和Row（水平排列）。這兩種容器的根本區別在於主軸方向的不同。

Column容器：主軸為垂直方向，子元素從上到下依次排列，適合構建列表、表單等垂直結構界面。
Row容器：主軸為水平方向，子元素從左到右依次排列，適合構建導航欄、按鈕組等水平結構界面。

1.2 主軸與交叉軸的概念

理解主軸和交叉軸是掌握線性佈局的關鍵：

主軸：子元素的主要排列方向。Column的主軸是垂直方向，Row的主軸是水平方向。
交叉軸：與主軸垂直的方向。Column的交叉軸是水平方向，Row的交叉軸是垂直方向。

這兩個軸的概念在設置對齊方式時尤為重要，後續的對齊屬性都是基於這兩個軸進行定義的。

二、核心屬性詳解與實用技巧

2.1 間距控制：space屬性的使用

通過space屬性可以設置子元素在主軸方向上的均勻間距，這是實現等距排列的最簡潔方法。

// 垂直等間距排列示例
Column({ space: 20 }) {
  Text('第一項').fontSize(18)
  Text('第二項').fontSize(18)
  Text('第三項').fontSize(18)
}
.width('100%')

在實際開發中，space屬性特別適合用於列表項、按鈕組等需要等距排列的場景，比手動設置margin更加簡潔和可靠。

2.2 對齊方式：主軸與交叉軸對齊

主軸對齊（justifyContent）

控制子元素在主軸上的排列方式：

Row() {
  Text('開始').width('20%')
  Text('中間').width('20%')
  Text('結束').width('20%')
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween) // 兩端對齊，元素均勻分佈

主要的主軸對齊選項包括：

FlexAlign.Start：從主軸起始位置開始排列
FlexAlign.Center：在主軸上居中對齊
FlexAlign.End：從主軸結束位置開始排列
FlexAlign.SpaceBetween：兩端對齊，元素間等距
FlexAlign.SpaceAround：元素兩側間隔相等

交叉軸對齊（alignItems）

控制子元素在交叉軸上的對齊方式：

Column() {
  Text('短文本')
  Text('這是一個較長的文本內容')
  Text('中長文本')
}
.width('100%')
.alignItems(HorizontalAlign.Start) // 水平方向左對齊

2.3 自適應尺寸：百分比與layoutWeight

在響應式佈局中，尺寸自適應是至關重要的能力。

百分比尺寸

使用百分比設置寬度或高度，使元素尺寸隨容器大小變化：

Row() {
  Text('33%寬度').width('33%').backgroundColor('#F5DEB3')
  Text('33%寬度').width('33%').backgroundColor('#D2B48C')
  Text('34%寬度').width('34%').backgroundColor('#F5DEB3')
}

權重分配（layoutWeight）

當需要子元素按比例分配剩餘空間時，layoutWeight是更好的選擇：

Column() {
  Text('佔1份').layoutWeight(1).backgroundColor('#F5DEB3')
  Text('佔2份').layoutWeight(2).backgroundColor('#D2B48C')
  Text('佔3份').layoutWeight(3).backgroundColor('#F5DEB3')
}
.height('100%')

三、實戰應用：構建常見界面佈局

3.1 頂部導航欄實現

使用Row容器可以輕鬆實現水平導航欄：

@Component
struct TopNavigation {
  build() {
    Row() {
      Image($r('app.media.back_icon'))
        .width(24).height(24)
      
      Text('頁面標題')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .layoutWeight(1) // 佔據剩餘空間
        .textAlign(TextAlign.Center)
      
      Image($r('app.media.menu_icon'))
        .width(24).height(24)
    }
    .width('100%')
    .padding({ left: 16, right: 16, top: 12, bottom: 12 })
    .backgroundColor('#FFFFFF')
  }
}

3.2 表單佈局實現

Column容器非常適合構建垂直表單：

@Component
struct LoginForm {
  build() {
    Column({ space: 16 }) {
      Text('用户登錄').fontSize(24).margin({ bottom: 32 })
      
      TextInput({ placeholder: '請輸入用户名' })
        .width('100%')
        .height(48)
        .padding(12)
        .border({ width: 1, color: '#E0E0E0' })
      
      TextInput({ placeholder: '請輸入密碼' })
        .width('100%')
        .height(48)
        .padding(12)
        .border({ width: 1, color: '#E0E0E0' })
      
      Button('登錄', { type: ButtonType.Normal })
        .width('100%')
        .height(48)
        .backgroundColor('#007DFF')
    }
    .width('80%')
    .padding(32)
  }
}

3.3 複雜佈局嵌套

在實際項目中，通常需要嵌套使用Column和Row來實現複雜佈局：

@Component
struct ProductItem {
  build() {
    Row() {
      Image($r('app.media.product_thumb'))
        .width(80).height(80)
        .borderRadius(8)
      
      Column({ space: 8 }) {
        Text('商品標題')
          .fontSize(16)
          .fontColor('#333333')
        
        Text('商品描述信息')
          .fontSize(14)
          .fontColor('#666666')
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        
        Row() {
          Text('¥299.00')
            .fontSize(18)
            .fontColor('#FF5000')
          
          Blank() // 空白填充組件，推動後續元素到末端
          
          Text('已售1000+')
            .fontSize(12)
            .fontColor('#999999')
        }
        .width('100%')
        .alignItems(VerticalAlign.Center)
      }
      .layoutWeight(1)
      .margin({ left: 12 })
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#FFFFFF')
  }
}

四、性能優化與最佳實踐

4.1 減少嵌套層級

深層嵌套會顯著影響佈局性能。根據測試數據，當嵌套層級從10層增加到1000層時，佈局時間從約1.88ms增加到10.46ms。應儘量避免不必要的嵌套，保持佈局結構扁平化。

不推薦的做法：

Column() {
  Column() {
    Column() {
      Row() {
        // 過多嵌套
      }
    }
  }
}

推薦的做法：

Column() {
  // 直接使用佈局屬性實現相同效果
  Row() {
    // 內容
  }
}

4.2 合理使用固定尺寸

對於已知尺寸的元素，設置固定寬高可以避免不必要的測量計算，提升佈局性能。特別是在列表項等需要頻繁渲染的場景中，固定尺寸能帶來明顯的性能提升。

4.3 使用Blank組件實現彈性空間

Blank組件是線性佈局中的特殊組件，用於在主軸方向自動填充空白空間：

Row() {
  Text('左側文本')
  Blank() // 推動後續元素到行末
  Text('右側文本')
}
.width('100%')

結語

線性佈局作為HarmonyOS UI開發的基石，掌握了Column和Row的靈活運用，就相當於掌握了構建精美界面的鑰匙。通過合理運用間距、對齊、權重等屬性，結合性能優化實踐，可以構建出既美觀又高效的用户界面。

在實際開發中，建議多使用DevEco Studio的實時預覽功能，實時查看佈局效果，快速迭代優化。同時，記得在不同尺寸的設備上進行測試，確保佈局的響應式表現符合預期。

思考題：在你的項目實踐中，哪些場景下使用線性佈局遇到了挑戰？是如何解決這些佈局難題的？歡迎分享你的經驗與見解。

mb6923acc0735dc 博客

mb6923acc0735dc 博客

博客 / 詳情