杂项单题，鸿蒙开发样式编

鸿蒙 ArkUI 常用样式与布局开发手册

 

一、定位体系

 

1. 相对定位

 

组件在 Column/Row 容器中默认相对定位，按容器方向流式排列，基于兄弟组件和父容器位置确定自身位置，无需额外配置。

 

2. 绝对定位

 

使用 Stack 容器作为定位父层，子组件设置.position({ type: PositionType.Absolute })，通过.x()和.y()基于 Stack 左上角坐标精准控制位置。

 

ets

 

 

Stack() {
  Text('绝对定位文本')
    .position({ type: PositionType.Absolute })
    .x(20)
    .y(30)
}
.width('100%')
.height(200)
.backgroundColor('#f5f5f5')

 

 

二、基础样式规范

 

1. 尺寸

 

• 页面根容器：.width('100%')铺满屏幕宽度
• 按钮 / 输入框：固定高度50fp，符合点击热区规范
• 弹性分配：使用.layoutWeight(1)按比例分配剩余空间，多个组件设置不同数值可按比例划分

 

2. 颜色

 

• 系统色：Color.Red/Color.White等枚举值
• 十六进制：0xffddff，前两位为透明度
• 透明背景：Color.Transparent

 

3. 边距

 

• 内边距：.padding({ left:16, right:16 })
• 外边距：全局基础间距16fp，模块间距24fp

 

4. 边框与阴影

 

• 边框：.border({ width:1, color:0xeeeeee, style:BorderStyle.Double })可实现双线边框
• 阴影：.shadow({ radius:12, color:'#1a000000', offsetX:0, offsetY:4 })，适合卡片组件

 

5. 圆角

 

• 按钮：8fp~12fp，推荐12fp
• 卡片：12fp~16fp，推荐16fp
• 圆形头像：设置为宽高一半，如100fp头像设.borderRadius(50)

 

三、常用布局示例

 

1. 列表布局

 

ets

 

 

List({ space: 10 }) {
  ForEach(this.dataList, (item) => {
    ListItem() {
      Column() {
        Text(item.title).fontSize(16)
        Text(item.desc).fontSize(14).fontColor('#666')
      }
      .width('100%')
      .padding(16)
    }
  })
}
.width('100%')
.height('100%')

 

 

2. 九宫格布局

 

ets

 

 

Grid() {
  ForEach(this.gridData, (item) => {
    GridItem() {
      Column() {
        Image(item.img).width('100%').aspectRatio(1)
        Text(item.name).fontSize(14).margin({top:8})
      }
      .padding(8)
    }
  })
}
.columnsTemplate('1fr 1fr 1fr') // 3列等宽
.rowsGap(10)
.columnsGap(10)

 

 

3. 响应式栅格布局

 

基于断点自动调整布局，手机 1 列、平板 3 列：

 

ets

 

 

GridRow({ breakpoints: { value: ['320vp', '600vp'] } }) {
  GridCol({ span: { xs:12, md:4 } }) {
    // 卡片内容
  }
}

 

鸿蒙 ArkUI 常见样式配置参考文档

 

一、基础边距（核心对标前端 margin/padding）

 

1. 内边距 padding

 

控制组件内部内容与边框的距离，支持单方向设置：

 

ets

 

 

// 四个方向统一设置
Text('示例文本').padding(16)
// 单独设置上下左右
Button('提交').padding({top:12, bottom:12, left:20, right:20})
// 百分比设置（以父容器宽度为基准）
Card().padding('5%')

 

 

2. 外边距 margin

 

控制组件与相邻元素的间距，全局推荐基础间距 16fp，模块间距 24fp：

 

ets

 

 

// 单独设置左外边距
Image('logo').margin({left:16})
// 上下统一、左右统一
Row().margin({top:24, bottom:24, left:8, right:8})

 

 

二、定位体系

 

1. 相对定位（默认）

 

Column/Row 容器内子组件默认相对定位，按容器方向流式排列，无需额外配置。

 

2. 绝对定位

 

基于父容器内容区定位，常用在悬浮按钮、置顶元素：

 

ets

 

 

Stack().width('100%').height(300) {
  Text('置顶标题')
    .position({top:0, left:0})
    .width('100%')
    .backgroundColor(0xccffffff)
  Button('悬浮按钮')
    .position({bottom:20, right:20})
}

 

 

三、边框与圆角

 

1. 边框完整配置

 

支持单独设置各边样式：

 

ets

 

 

Text('自定义边框')
.border({
  width: {left:2, right:2, top:1, bottom:1},
  color: {left:Color.Red, right:Color.Blue, top:0xeeeeee, bottom:0xeeeeee},
  style: {left:BorderStyle.Solid, right:BorderStyle.Dashed},
  radius: {topLeft:8, topRight:8, bottomLeft:16, bottomRight:16}
})
.padding(16)

 

 

2. 圆角规范

 

• 按钮：8fp~12fp，推荐 12fp
• 卡片：12fp~16fp，推荐 16fp
• 圆形头像：宽高 100fp 时设 borderRadius (50)

 

四、尺寸与颜色

 

1. 尺寸

 

• 根容器：width ('100%')
• 按钮 / 输入框：固定高度 50fp
• 弹性分配：.layoutWeight (1)

 

2. 颜色

 

• 系统色：Color.Gray
• 十六进制：0xff3366（前两位为透明度）
• 透明：Color.Transparent

 

五、常用布局样式示例

 

1. 列表布局（带边距）

 

ets

 

 

List({space:12}) {
  ForEach(dataList, (item) => {
    ListItem() {
      Column() {
        Text(item.title).fontSize(16)
        Text(item.desc).fontSize(14).fontColor('#666')
      }
      .width('100%')
      .padding(16)
      .backgroundColor(Color.White)
      .borderRadius(12)
    }
    .margin({left:16, right:16})
  })
}
.width('100%')
.backgroundColor('#f5f5f5')

 

 

2. 九宫格布局（带边框间距）

 

ets

 

 

Grid() {
  ForEach(gridData, (item) => {
    GridItem() {
      Column() {
        Image(item.img).width(60).height(60)
        Text(item.name).fontSize(14).margin({top:8})
      }
      .width('100%')
      .padding(12)
      .border({width:1, color:0xeeeeee})
      .borderRadius(8)
    }
  })
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(12)
.rowsGap(12)
.padding(16)