HarmonyOS Next星河版笔记--界面开发（4）

🕗 发布于 2024-11-15 23:34 笔记鸿蒙

布局

1.1.线性布局

线性布局通过线性容器column和row创建

column容器：子元素垂直方向排列
row容器：子元素水平方向排列

1.1.1.排布主方向上的对齐方式（主轴）

属性：.justifyContent（枚举FlexAlign）（Row组件的justifyContent属性效果相似）

居顶

.justifyContent(FlexAlign.Start)

居中

.justifyContent(FlexAlign.Center)

居底

.justifyContent(FlexAlign.End)

其他

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column() {
      Text()
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
        .border({width : 2})
    Text()
      .width(200)
      .height(100)
      .backgroundColor(Color.Pink)
      .border({width : 2})
      .margin(20)
      Text()
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
        .border({width : 2})
    }
    .width('100%')
    .height('100%')

    //设置排布主方向的对齐方式（主轴）
    //justifyContent(枚举FlexAlign)   ctrl+p   cmd+p
    //1、Start      （排布主方向） 主轴起始位置对齐
    //2、Center      主轴居中对齐
    //3、End         主轴结束位置对齐
    //4、SpaceBetween   贴边显示，中间的元素均匀分布间隙
    //5、SpaceAround    间隙环绕   0.5 1  1  1  0.5的间隙分布，靠边只有一半的间隙
    //6、SpaceEvenly    间隙均匀环绕，靠边也是完整的一份间隙

    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

1.1.2.交叉轴对齐方式

属性：alignItems()

参数：枚举类型

交叉轴在水平方向：HorizontalAlign
交叉轴在垂直方向：VerticalAlign

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {

    //Column  交叉轴的对齐方式（水平往右）
    //alignItems(HorizontalAlign.Start)     Center   End
     //.alignItems(VerticalAlign.Top)    Center        Bottom
    //Column() {
    Row(){
    Text()
        .width(50)
        .height(100)
        .backgroundColor(Color.Pink)
        .border({width : 2})
      Text()
        .width(50)
        .height(100)
        .backgroundColor(Color.Pink)
        .border({width : 2})
        .margin({
          // top:20,
          // bottom:20
          left:20,
          right:20
        })
      Text()
        .width(50)
        .height(100)
        .backgroundColor(Color.Pink)
        .border({width : 2})
    }
    .width('100%')
    .height('100%')
.alignItems(VerticalAlign.Bottom)
  }
}

1.2.弹性布局

弹性容器组件：Flex()

基本使用

Flex(参数对象){
            子组件1
            子组件2
            子组件3
            子组件N

}

wrap属性：Flex是单行布局还是多行布局

1、FlexWrap.NoWrap（单行布局）

2、FlexWrap.Wrap（多行布局）

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    //flex默认主轴水平往右，交叉轴垂直往下 → row/column
    //2、主轴对齐方式
    //3、交叉轴对齐方式
    //单行或单列的情况，优先还是使用线性布局
    //Flex布局：伸缩布局。当子盒子的总和溢出父盒子，默认进行压缩显示。
    //4、换行 wrap
    
    Flex({
      // direction:FlexDirection.Row,
      // justifyContent:FlexAlign.SpaceAround,
      // alignItems:ItemAlign.Center
wrap:FlexWrap.Wrap
    }){
        Text()
          .width(80)
          .height(80)
          .backgroundColor(Color.Pink)
          .border({width:1,color:Color.Green})
      Text()
        .width(80)
        .height(80)
        .backgroundColor(Color.Pink)
        .border({width:1,color:Color.Green})
      Text()
        .width(80)
        .height(80)
        .backgroundColor(Color.Pink)
        .border({width:1,color:Color.Green})
      Text()
        .width(80)
        .height(80)
        .backgroundColor(Color.Pink)
        .border({width:1,color:Color.Green})
    }
    .width(300)
    .height(600)
    .backgroundColor(Color.Blue)
    }
}

案例

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
Column(){
  Text('阶段选择')
    .fontSize(36)
    .fontWeight(700)
    .width('100%')
    .padding(15)
  Flex({wrap:FlexWrap.Wrap}){
      Text('ArkUI').padding(15)
    Text('ArkTS').padding(15)
    Text('界面开发').padding(15)
    Text('系统能力').padding(15)
    Text('权限控制').padding(15)
    Text('元服务').padding(15)
  }
}
  }

    }

运行效果

1.3.综合案例（列表项）

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column()
    {
      Row({space:8}){
        Column(){
          Text("玩一玩")
            .fontSize(FontWeight.Bolder)
          Text('签到有礼|超多tomato 超好吃')
            .fontColor(Color.Gray)
        }
        .alignItems(HorizontalAlign.Start)

        Column(){
          Image($r('app.media.tomato'))
            .width(40)
            .backgroundColor('#efefef')
            .borderRadius(5)
        }
        .alignItems(HorizontalAlign.Center)

      }
      .width('90%')
      .height(80)
      .backgroundColor('#fff')
      .borderRadius(10)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({
        left:15,right:15
      })
      .margin({
        top:20
      })
    }
    .width("100%")
    .height("100%")
    .backgroundColor(Color.Yellow)

  }

}

1.4.自适应伸缩

设置layoutWeight属性的子元素与兄弟元素，会按照权重进行分配主轴的空间

语法：.layoutWeight（数字）

作用：左边自适应；右边固定

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column()
    {
      Row() {
        Text('左边')
          .layoutWeight(1)
          .height(50)
          .backgroundColor(Color.Pink)
        Text('右边')
          .width(70)
          .height(50)
          .backgroundColor(Color.Orange)
      }
    }
    .width("100%")
    .height("100%")
    .backgroundColor(Color.Yellow)

  }

}

效果

1.5.综合案例（卡片）

案例

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
    Column(){
Image($r('app.media.xinlan'))
  .width('100%')
  .borderRadius({
    topRight:10,
    topLeft:10
  })
      Text('今晚必看 | 每日艺术分享NO.1')
        .fontSize(15)
        .fontWeight(30)
        .padding({
          left:5,
          right:5
        })
        .lineHeight(22)
        .height(60)


      //底部
      Row(){
        //头像、昵称
  Row({space:5}){
    Image($r('app.media.potato'))
      .width(25)
      .borderRadius(100)
    Text('7373')
      .fontSize(10)
      .fontColor('#999')
  }
  .layoutWeight(1)
  //点赞图标点赞数
        Row({space:5}){
    Image($r('app.media.thumbgood'))
      .width(13)
      .fillColor('#999')
      Text('2.3W')
        .fontSize(13)
        .fontColor('#666')
        }

      }
      .padding({
        left:15,
        right:15
      })


    }
    .width(200)
      //.height(400)//先定死一个高，后续内容撑开
    .padding({bottom:15})
      .backgroundColor(Color.White)
      .borderRadius({
        topLeft:10,
        topRight:10
      })
    }
    .padding(10)
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')

    }
}

1.6.阶段性综合案例

京东页面登录案例

分析：

布局容器 + 顶部 +logo
1. 布局背景：backgroundImage
2. 布局容器：整体从上往下 —— Column
3. 顶部：左右布局——Row、SpaceBetween
4. logo：Image图片
输入框和登录区域
1. 国家地址：点按区域（Row→Text、Text、Image）
2. 手机号：输入框TextInput
3. 同意许可：复选框checkbox，文本Text→Span
4. 登录按钮、用户注册
底部模块区域
1. 整体Column列
2. 标题Text
3. 三方登录图标：Row、Image、spacearound
4. 底部居底：Blank()填充组件

1.7.绝对定位和层级zIndex

1.7.1.绝对定位

作用：控制组件位置，可实现层叠效果

特点：

参照父组件左上角进行偏移
绝对定位后的组件不占用自身原有位置

语法：.position（位置对象）

参数：{ x : 水平偏移位置 , y : 垂直偏移位置 }

Text('文字内容')
.position({
        x : 50 ,
        y : 50 

})

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    //position绝对定位：可以控制组件位置，可以实现层叠效果
    //语法：
    // .position({
    //   x:150,
    //   y:50
    // })
    //特点：
    //1、相对应父组件左顶点进行偏移（调整位置）
    //2、原本的位置不占了，且可以任意调整位置，不影响其他元素


    //后面的组件明显层级更高，会盖住前面的组件
    //需求：不动结构的情况下，调整组件的层级   .zIndex（数字）
    Column(){
      Text('大儿子')
        .width(80)
        .height(80)
        .backgroundColor(Color.Gray)
      Text('二儿子定位')
        .width(80)
        .height(80)
        .backgroundColor(Color.Yellow)
        .position({
          x:150,
          y:50
        })
        .zIndex(1)
      Text('三儿子')
        .width(80)
        .height(80)
        .backgroundColor(Color.Green)
        .zIndex(2)
    }
    .width(300)
    .height(300)
    .backgroundColor(Color.Pink)
  }

1.8.层叠布局

层叠布局具有较强的组件层叠能力。场景：卡片层叠效果等

特点层叠操作更简洁，代码效率更高（绝对定位的优势是灵活）

Stack 容器内的子元素的顺序为Item1 -> Item2 -> Item3

Stack(){
    Item1()
    Item2()
    Item3()
}

语法

  Stack({

     alignContent:Alignment.Top
   }){
    Item1()
    Item2()
    Item3()
}

案例

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
//层叠布局
   Stack({

     alignContent:Alignment.TopStart
   }){
     Text('大儿子')
       .width(250)
       .height(250)
       .backgroundColor(Color.Green)
       
     Text('二儿子')
       .width(150)
       .height(150)
       .backgroundColor(Color.Orange)
     Text('三儿子')
       .width(50)
       .height(50)
       .backgroundColor(Color.Yellow)
   }
    .width(300)
    .height(600)
    .backgroundColor(Color.Pink)
  }

}