07.精通HarmonyOS NEXT Flex对齐：从基础到高级布局技巧

// 导航栏：左侧品牌，右侧操作按钮
Row() {
    Text("品牌名称").fontSize(18).fontWeight(700)
    Blank() // 弹性空间
    Button("操作").fontSize(14)
}.width('100%').height(56).padding({ left: 16, right: 16 })
// 等效于使用 justifyContent: FlexAlign.SpaceBetween

// 内容居中显示
Row() {
    Text("居中内容").fontSize(16)
}.width('100%').height(100).justifyContent(FlexAlign.Center)

// 底部工具栏：均匀分布的图标
Row() {
    ForEach(["首页", "搜索", "消息", "我的"], (item) => {
        Column() {
            Image(`/assets/${item}.png`).width(24).height(24)
            Text(item).fontSize(12).margin({ top: 4 })
        }
    })
}.width('100%').height(60).justifyContent(FlexAlign.SpaceEvenly)

 Row() {
                Text("普通文本").fontSize(16)
                Text("重要文本")
                    .fontSize(20)
                    .fontWeight(700)
                    .alignSelf(ItemAlign.Start) // 覆盖容器的alignItems设置
                Text("次要文本").fontSize(14).opacity(0.6)
            }.width('100%').height(100).backgroundColor('#F5F5F5')
            .alignItems(VerticalAlign.Center)

import { LengthMetrics } from "@kit.ArkUI"

type SkillTag = string;
@Component
export struct BasicCase2 {
    private tags:SkillTag[] = ['HarmonyOS', 'Flex布局', '响应式设计', '应用开发', 'UI组件', '跨设备适配']

    build() {
        Column({ space: 20 }) {
            Text("响应式换行布局（wrap 与 alignContent） ").fontSize(20).fontWeight(600).foregroundColor('#262626').width('90%')
            Flex({
                direction: FlexDirection.Row, // 水平主轴
                wrap: FlexWrap.Wrap, // 子项自动换行
                justifyContent: FlexAlign.Start, // 主轴左对齐
                alignContent: FlexAlign.SpaceBetween, // 多行间距均匀分布
                space:{main:LengthMetrics.px(8)}  // 子组件间距
            }){

                ForEach(this.tags, (tag:SkillTag) => {
                    Text(tag)
                        .padding({ left: 12, right: 12, top: 4, bottom: 4 })
                        .backgroundColor(0xE0F5FF)
                        .fontSize(12)
                }, (tag:string) => tag)
            }
            .width('100%')
            .padding(16)
        }
    }
}

 @Component
export struct ProductCard {
    build() {
        Column() {
            // 图片区域
            Image($r('app.media.phone'))
                .width('100%')
                .height(200)
                .objectFit(ImageFit.Cover)

            // 内容区域
            Column({ space: 8 }) {
                // 标题和价格行
                Row() {
                    Text("产品名称").fontSize(16).fontWeight(500)
                    Text("¥99.00").fontSize(16).fontColor(Color.Red)
                }.width('100%').justifyContent(FlexAlign.SpaceBetween)

                // 描述
                Text("产品描述文本...").fontSize(14).opacity(0.6)

                // 标签行
                Flex({ wrap: FlexWrap.Wrap }) {
                    ForEach(['标签1', '标签2', '标签3'], (tag:string) => {
                        Text(tag)
                            .fontSize(12)
                            .backgroundColor('#F0F0F0')
                            .padding({ left: 8, right: 8, top: 2, bottom: 2 })
                            .margin(4)
                            .borderRadius(4)
                    })
                }.width('100%')

                // 底部按钮
                Row() {
                    Button("加入购物车").width('48%')
                    Button("立即购买").width('48%')
                }.width('100%').justifyContent(FlexAlign.SpaceBetween).margin({ top: 8 })
            }.padding(16)
        }
        .width('100%')
        .backgroundColor(Color.White)
        .borderRadius(8)
        .shadow({ radius: 4, color: 'rgba(0,0,0,0.1)', offsetX: 0, offsetY: 2 })
    }
}

 @Component
export struct LoginForm {
    @State username: string = ''
    @State password: string = ''

    build() {
        Column({ space: 20 }) {
            // 标题
            Text("账号登录").fontSize(24).fontWeight(700).margin({ bottom: 20 })

            // 表单项
            Column({ space: 8 }) {
                Text("用户名").fontSize(14)
                TextInput({ placeholder: '请输入用户名', text: this.username })
                    .onChange((value) => this.username = value)
                    .width('100%')
            }.alignItems(HorizontalAlign.Start).width('100%')

            Column({ space: 8 }) {
                Text("密码").fontSize(14)
                TextInput({ placeholder: '请输入密码', text: this.password })
                    .type(InputType.Password)
                    .onChange((value) => this.password = value)
                    .width('100%')
            }.alignItems(HorizontalAlign.Start).width('100%')

            // 记住密码选项
            Row() {
                Checkbox().onChange((value) => console.info(value+''))
                Text("记住密码").fontSize(14).margin({ left: 8 })
                Blank()
                Text("忘记密码?").fontSize(14).fontColor(Color.Blue)
            }.width('100%').margin({ top: 8 })

            // 登录按钮
            Button("登录")
                .width('100%')
                .height(50)
                .margin({ top: 20 })

            // 其他登录方式
            Column({ space: 16 }) {
                Text("其他登录方式").fontSize(14).opacity(0.6)
                Row({ space: 24 }) {
                    ForEach(['微信', '支付宝', '手机号'], (item:string,index:number) => {
                        Column() {
                            Image($r(`app.media.0${index+1}`)).width(40).height(40)
                            Text(item).fontSize(12).margin({ top: 4 })
                        }
                    })
                }.justifyContent(FlexAlign.Center)
            }.margin({ top: 40 })
        }
        .width('90%')
        .padding(20)
    }
}

// 方式1：justifyContent
Row().justifyContent(FlexAlign.Center)

// 方式2：margin
Text().margin({ left: 'auto', right: 'auto' })

// 方式1：alignItems
Row().alignItems(ItemAlign.Center)

// 方式2：改变主轴
Column().justifyContent(FlexAlign.Center)

// 方式1：组合使用
Row().justifyContent(FlexAlign.Center).alignItems(ItemAlign.Center)

// 方式2：Center组件
Center() {
    Text("居中内容")
}

// 基本间距
Row({ space: 10 }) // 子元素间距为10

// 主轴间距
Flex({ space: { main: 10 } })

// 交叉轴间距
Flex({ space: { cross:  LengthMetrics.px(10) } })

// 同时设置
Flex({ space: { main: LengthMetrics.px(10), cross:  LengthMetrics.px(20) } })

// 间距与对齐配合
Row({ space: 10, justifyContent: FlexAlign.SpaceBetween })