标题栏三等分,如何实现标题栏文字居中,图标居左。

标题栏三等分,如何实现标题栏文字居中,图标居左。

HarmonyOS
2024-05-26 11:38:45
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
truemichael

本文主要介绍关于标题栏的三等分布局,其中包括实现标题栏文字居中,图标居左。标题栏会应用在几乎所有页面,但根据页面需求会有不同的呈现方式。例如,标题栏是一个基础且标准的样式,标题居中,功能按钮居右。

使用的核心API

核心代码解释

1、 使用Row,column,Flexs,tack容器组件,设置子元素在主轴和交叉轴上的方向。

2、 设置子元素的宽度,当父容器大于/小于子组件宽度总和时,子组件按比例拉伸/收缩,分配父容器多余/不足空间。

3、 或通过position定位,设置目标元素左上角相对于父元素左上角位置。

@Extend(Column) 
function layout(align?: HorizontalAlign) { 
  .layoutWeight(1) 
  // 设置子组件在垂直方向上的对齐格式。默认值:FlexAlign.Start 
  .justifyContent(FlexAlign.Center) 
  // 设置子组件在水平方向上的对齐格式。 默认值:HorizontalAlign.Center 
  .alignItems(align || HorizontalAlign.Center) 
} 
 
@Entry 
@Component 
struct Page123 { 
  @State message: string = 'Hello World' 
  @State containerWidth: number = 402 
 
  // @Styles用于快速定义并复用自定义样式。 
  @Styles 
  pressedStyles() { 
    .backgroundColor("#ED6F21") 
  } 
 
  @Styles 
  normalStyles() { 
    .backgroundColor("#0A59F7") 
  } 
 
  @Styles 
  flex(){ 
    // 仅当父容器宽度大于所有子组件宽度的总和时,该属性生效。配置了此属性的子组件,按照比例拉伸,分配父容器的多余空间。默认值为0 
    .flexGrow(1) 
    // 仅当父容器宽度小于所有子组件宽度的总和时,该属性生效。配置了此属性的子组件,按照比例收缩,分配父容器的不足空间。 
    .flexShrink(1) 
    // flexBasis:设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值,则子项占用的空间为设置的值;如果没设置该属性,那子项的空间为width/height的值。 
    // flexBasis属性不是必须的,通过width或height也可以达到同样的效果。当flexBasis属性与width或height发生冲突时,以flexBasis属性为准。 
    .flexBasis(1) 
  } 
 
  build() { 
    Column() { 
      Text(this.message) 
        .fontSize(20) 
        .stateStyles({ 
          normal: this.normalStyles, 
          pressed: this.pressedStyles, 
        }) 
 
 
      // Flex三等分 
      // 通过justifyContent参数设置在主轴方向的对齐方式,FlexAlign.Center子组件在主轴方向居中对齐 
      // 通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式,ItemAlign.Center交叉轴方向居中对齐 
      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 
        Column() 
          .flex() 
        Text(this.message).textAlign(TextAlign.Center).fontSize(14).flex() 
        Row() { 
          Image($r('app.media.app_icon')) 
            .width(20) 
            .height(20) 
            .margin({ right: 20 }) 
        }.justifyContent(FlexAlign.End) 
        .flex() 
      }.width('100%') 
      .height(40) 
 
      // position定位 
      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 
        Text(this.message).fontSize(14) 
        Image($r('app.media.app_icon')) 
          .width(20) 
          .height(20)// 目标元素左上角相对于父元素左上角位置 
          .position({ x: '100%', y: '50%' })//设置元素在位置定位时的锚点,以元素左上角作为基准点进行偏移 
          .markAnchor({ x: 40, y: '50%' }) 
      }.width('100%') 
      .height(40) 
      .backgroundColor(Color.Pink) 
 
      // 三等分实现 
      Row() { 
        Column() { 
          Image($r('app.media.app_icon')) 
            .width(20) 
            .height(20) 
            .margin({ left: 20 }) 
        }.layout(HorizontalAlign.Start) 
 
        Column() { 
          Text(this.message).fontSize(14) 
            .backgroundColor(Color.Pink) 
        }.layout(HorizontalAlign.Center) 
 
        Column() { 
          Image($r('app.media.app_icon')) 
            .width(20) 
            .height(20) 
            .margin({ right: 20 }) 
          //   设置布局在交叉轴的方向,交叉轴为水平方向时,取值为HorizontalAlign类型, 
        }.layout(HorizontalAlign.End) 
      } 
      // 设置布局在交叉轴的方向,交叉轴为垂直方向时,取值为VerticalAlign类型, 
      .alignItems(VerticalAlign.Center) 
      .height(46) 
      .width('100%') 
 
      // Stack方式 
      Stack() { 
        Row() { 
          Text(this.message).fontSize(14) 
        } 
        .width('100%') 
        // FlexAlign.Center:子组件在主轴方向中间对齐, 
        .justifyContent(FlexAlign.Center) 
 
        Row() { 
          Image($r('app.media.app_icon')) 
            .width(20) 
            .height(20) 
            .margin({ left: 20 }) 
        } 
        .width('100%') 
        .justifyContent(FlexAlign.Start) 
 
        Row() { 
          Image($r('app.media.app_icon')) 
            .width(20) 
            .height(20) 
            .margin({ right: 20 }) 
        } 
        .width('100%') 
        .justifyContent(FlexAlign.End) 
      }.width('100%') 
      .height(40) 
    } 
    .height('100%') 
    .width('100%') 
  } 
}

实现效果

适配版本信息

IDE:DevEco    Studio 4.0.1.501

SDK:HarmoneyOS    4.0.0.8

分享
微博
QQ
微信
回复
2024-05-27 11:53:21
相关问题
Atomic Service工程的标题栏是否能去除
742浏览 • 1回复 待解决
求问,原子化服务标题栏如何设置?
2180浏览 • 1回复 待解决
元服务工程的标题栏是否能去除
655浏览 • 1回复 待解决
元服务顶部状态怎么设置标题
701浏览 • 3回复 待解决
有那种公共的标题返回的标题控件吗
597浏览 • 1回复 待解决
Tabs如何才能显示呢
407浏览 • 1回复 待解决
求获取状态高度方法
6826浏览 • 1回复 待解决
如何实现沉浸式状态
42浏览 • 1回复 待解决
鸿蒙如何获取导航和状态高度
9948浏览 • 1回复 待解决
如何实现搜索历史记录
392浏览 • 1回复 待解决
如何获取状态和导航高度
1438浏览 • 1回复 待解决
Navigation如何隐藏导航
879浏览 • 1回复 待解决