一、

在鸿蒙环境中，应用需要运行在手机、平板、折叠屏、智能手表、车机等多种设备上。不过，这些设备的屏幕尺寸、分辨率、形态差异巨大。为了实现“一次开发，多端部署”的目标。HarmonyOS 提供了强大的自适应布局能力。

**痛点这方面，** - 开发者往往只能为单一尺寸设计界面导致在其他端出现“挤占”“空白”问题。怎么说呢，- 资源文件管理繁琐，无法自动加载最合适的图片与字体。说起来，- 需要频繁修改代码才能满足不同端交互习惯。

二、什么是“一次开发，多端适配”？按理说，

• 逻辑归一统一使用 ArkTS 与 ArkUI 编写主要业务逻辑与 UI。
• 布局自适应界面元素根据容器尺寸变化自动调整。
• 资源差异化针对不同密度与尺寸提供专属资源，程序自动匹配加载。

只需关注一套代码，而自适应布局与资源管理共同完成多端美观展示。

三、自适应布局的七种主要能力

四、实战：七种常用自适应布局能力演示

下面通过完整示例演示上述七种布局能力的具体用法与效果。

示例代码

interface NavItem {
再看icon，Resource
label这方面，string
priority: number
}
interface TabItem {
说到label，string
}
@Entry @Component
struct AdaptiveLayoutFullDemo {
// 导航项列表，用于演示隐藏能力
@State navItems: NavItem =
// 卡片颜色列表，用于演示折行能力
@State cardColors =
// 标签页列表，用于演示延伸能力
@State tabItems =
@State selectedIndex = -1
build {
Scroll {
Column}) {
StretchSection
EvenlySection
ProportionSection
ScaleSection
ExtensionSection
HideSection
WrapSection
}.padding.backgroundColor
}
.width.height
}
/* ---------- 拉伸 ---------- */
@Builder StretchSection {
Column}) {
Text')
.fontSize).fontWeight
Flex({
direction:flexDirection.Row,alignItems:itemAlign.Center}) {
TextInput
.flexGrow.flexShrink
.height)
.backgroundColor
.borderRadius)
.padding,right:px})
Button
.flexGrow.flexShrink
.width).height)
.margin})
.borderRadius)
}.width
}
}
/* ---------- 均分 ---------- */
@Builder EvenlySection {
Column}) {
Text')
.fontSize).fontWeight
Row {
Button.width).height).borderRadius)
Button.width).height).borderRadius)
Button.width).height).borderRadius)
}.justifyContent.width
}
}
/* ---------- 占比 ---------- */
@Builder ProportionSection {
Column}) {
Text')
.fontSize).fontWeight
Row {
Column({
layoutWeight:1。height,backgroundColor:'#E3F2FD',borderRadius:px,justifyContent:flexAlign.Center })
{Text.textAlign}
Column({
layoutWeight:1,height,backgroundColor:'#FFF3E0',borderRadius:px,justifyContent:flexAlign.Center })
{Text.textAlign}
}.margin}).width
}
}
/* ---------- 缩放 ---------- */
@Builder ScaleSection {
Column}) {
Text')
.fontSize).fontWeight
Column({
width,aspectRatio:,backgroundColor:'#7986CB',borderRadius:px,justifyContent:flexAlign.Center })
{Text
.fontSize).fontColor
.textAlign}
}
}
/* ---------- 延伸 ---------- */
@Builder ExtensionSection {
Column {
Text')
.fontSize.fontWeight
Scroll({
scrollable:true,scrollBar:false,width,'%':true,height:%20px,backgroundColor:'#FFFFFF',borderRadius:px{8}})
}{
Row {{
ForEach=>(
Text
.fontSize:px{14}
.color
.weight
.padding
.borderRadius{px{8}}
.backgroundColor
.$onClick=>this.selectedIndex=i)
))
}}}.padding
}}
/* ---------- 隐藏 ---------- */
@Builder HideSection {
Column {
Text')
..size{16}.weight
Row{
ForEach=>{
Column{Image.size{32};Text.size{14}}
..size{64}.center.displayPriority
})
}.justifyContent.width}
/* ---------- 折行 ---------- */
@Builder WrapSection{
Column{Text').size{16}.weight;怎么说呢，Flex({
direction:flexDirection.Row。wrap:flexWrap.Wrap}){
ForEach=>(
Column{
Text.color.size{14}
}..size{100}.height.bg.radius.center.margin)}
}}

运行效果预览图可自行截屏展示以帮助视觉定位问题。

代码说明 & 痛点：

• *痛点 A： 大量重复代码导致维护成本高——方法：将每个自适应块封装成单独的 @Builder 函数，便于复用和单测。

五、关键注意事项与常用方法

各能力的关键注意事项及对应使用者痛点对策：

拉伸 & 均分技巧：

data-id="">* 痛点：“子组件过长导致溢出”，建议同时设置 flexGrow 和 flexShrink 并限制最小/最大值；避免仅依赖 flexShrink 默认收缩，以免造成视觉错位。”