183.HarmonyOS NEXT系列教程之列表交换组件布局设计详解

Column() {                 // 最外层容器
    Row() {               // 标题栏
        Text()            // 左侧文本
        Blank()          // 中间空白
        Text()           // 右侧文本
    }
    
    ListExchange({        // 列表区域
        // 列表配置
    })
}

Column() {
    // 容器配置
}
.height('100%')          // 全屏高度
.width('100%')           // 全屏宽度
.justifyContent(FlexAlign.Center)  // 居中对齐
.backgroundColor($r('app.color.list_exchange_background_color'))  // 背景色
.padding({               // 内边距
    left: $r('app.string.ohos_id_card_padding_start'),
    right: $r('app.string.ohos_id_card_padding_start')
})

Row() {
    Text($r('app.string.list_exchange_deduction_sort'))  // 左侧标题
        .textAlign(TextAlign.Start)
    Blank()  // 弹性空间
    Text($r('app.string.list_exchange_custom_sort'))     // 右侧文本
}

Row() {
    // 内容...
}
.backgroundColor(Color.White)  // 背景色
.border({                     // 圆角边框
    radius: {
        topLeft: $r('app.string.ohos_id_corner_radius_default_l'),
        topRight: $r('app.string.ohos_id_corner_radius_default_l')
    }
})
.padding({                    // 内边距
    left: $r('app.string.ohos_id_card_padding_start'),
    right: $r('app.string.ohos_id_card_padding_start')
})
.width('100%')               // 宽度
.height($r('app.integer.list_exchange_title_height'))  // 高度

@Builder
deductionView(listItemInfo: ListInfo) {
    Row() {
        // 左侧图标
        Image(listItemInfo.icon)
            .width($r('app.integer.list_exchange_icon_size'))
            .height($r('app.integer.list_exchange_icon_size'))
            .draggable(false)
        
        // 中间文本
        Text(listItemInfo.name)
            .margin({ left: $r('app.string.ohos_id_elements_margin_vertical_l') })
        
        // 弹性空间
        Blank()
        
        // 右侧图标
        Image($r("app.media.list_exchange_ic_public_drawer"))
            .width($r('app.integer.list_exchange_icon_size'))
            .height($r('app.integer.list_exchange_icon_size'))
            .objectFit(ImageFit.Cover)
            .draggable(false)
    }
}

Row() {
    // 内容...
}
.width('100%')           // 宽度
.height(ITEM_HEIGHT)     // 高度
.backgroundColor(Color.White)  // 背景色
.padding({               // 内边距
    left: $r('app.string.ohos_id_card_padding_start'),
    right: $r('app.string.ohos_id_card_padding_start')
})

// 颜色资源
.backgroundColor($r('app.color.list_exchange_background_color'))

// 尺寸资源
.height($r('app.integer.list_exchange_title_height'))

// 间距资源
.margin({ left: $r('app.string.ohos_id_elements_margin_vertical_l') })

// 圆角资源
.border({
    radius: $r('app.string.ohos_id_corner_radius_default_l')
})

// 列表项高度常量
const ITEM_HEIGHT: number = 50;

// 其他样式常量
const STYLE_CONSTANTS = {
    ICON_SIZE: 24,
    PADDING: 16,
    MARGIN: 8
}

// 使用Flex布局
Row() {
    // 左侧内容
    Text()
    // 中间弹性空间
    Blank()
    // 右侧内容
    Text()
}
.justifyContent(FlexAlign.SpaceBetween)  // 两端对齐

// 百分比布局
.width('100%')
.height('100%')

// 固定尺寸
.width($r('app.integer.list_exchange_icon_size'))
.height($r('app.integer.list_exchange_icon_size'))

// 使用Builder缓存构建的视图
@Builder
deductionView(listItemInfo: ListInfo) {
    // 视图构建逻辑
}

// 避免不必要的嵌套
Row() {
    // 直接使用子组件，避免多层嵌套
}

// 使用条件渲染
if (condition) {
    // 渲染内容
}

// 使用懒加载
LazyForEach(dataSource, (item) => {
    // 渲染列表项
})