HarmonyOS鸿蒙Next中Text组件如何居于页面底部显示

HarmonyOS鸿蒙Next中Text组件如何居于页面底部显示

我想实现的效果如下,就是将最下方“三方登陆”的这一行居底显示。

请问怎么实现?

cke_304.png

代码如下:

import { AlertDialogV2 } from '@kit.ArkUI';

@Component
struct Index {
  // 判断用户是否勾选隐私协议
  @State isChecked: boolean = false;

  build() {
    Column() {
      // 头像部分
      Image($r('app.media.my_unselected'))
        .width(100)
        .margin({ top: 100 })

      // 手机号部分
      Text('189****1234')
        .fontSize(32)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 10 })

      Text('华为账号绑定号码')
        .fontSize(16)
        .fontColor('#A7A7A7')

      // 同意隐私政策
      // 空白区域填充
      Row() {
        Checkbox()
          .onChange(() => {
            // 更新选中状态为相反状态,即:原先是未选中,则更改为选中;原先为选中,则更改为未选中
            this.isChecked = !this.isChecked
          })
        Text() {
          Span('我已阅读并同意')
          Span('服务条款')
          Span('、')
          Span('隐私政策')
          Span('、')
          Span('华为账号用户认证协议')
        }
        .fontColor('#A7A7A7')
      }
      .width(250)
      .margin({ top: 20, bottom: 20 })

      // 针对用户是否已勾选统一选项,进行条件渲染
      if (this.isChecked === true) {
        Button('华为账号一键登录')
          .type(ButtonType.Capsule)
          .width('300vp')
          .onClick(() => {
            if (!this.isChecked) {
              // 如果用户未勾选
              console.log('pass');
            }
          })
      } else {
        Button('华为账号一键登录')
          .type(ButtonType.Capsule)
          .width('300vp')
          .backgroundColor('#fafafa')
          .fontColor('#a3a3a3')
          .onClick(() => {
            if (!this.isChecked) {
              // 如果用户未勾选
              console.log('请同意隐私政策!!');
            }
          })

      }

      // 跳转三方登陆
      Text() {
        Span('我有其它账号?')
          .fontSize(16)
          .fontColor('#A7A7A7')
        Span('登陆')
          .fontSize(16)
          .fontColor('#0A59F7')
          .onClick(() => {
            console.log('跳啊跳');
          })
      }
      .fontSize(16)
      .fontColor('#A7A7A7')
    }
    .width(360)
    .height('100%')

    // .backgroundColor('#ffececec')
  }
}

更多关于HarmonyOS鸿蒙Next中Text组件如何居于页面底部显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

示例代码

import { AlertDialogV2 } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  // 判断用户是否勾选隐私协议
  @State isChecked: boolean = false;

  build() {
    Column() {
      // 头像部分
      Image($r('app.media.person'))
        .width(100)
        .margin({ top: 100 })

      // 手机号部分
      Text('189****1234')
        .fontSize(32)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 10 })

      Text('华为账号绑定号码')
        .fontSize(16)
        .fontColor('#A7A7A7')


      // 同意隐私政策
      // 空白区域填充
      Row() {
        Checkbox()
          .onChange(() => {
            // 更新选中状态为相反状态,即:原先是未选中,则更改为选中;原先为选中,则更改为未选中
            this.isChecked = !this.isChecked
          })
        Text() {
          Span('我已阅读并同意')
          Span('服务条款')
          Span('、')
          Span('隐私政策')
          Span('、')
          Span('华为账号用户认证协议')
        }
        .fontColor('#A7A7A7')
      }
      .width(250)
      .margin({ top: 20, bottom: 20 })

      // 针对用户是否已勾选统一选项,进行条件渲染
      if (this.isChecked === true) {
        Button('华为账号一键登录')
          .type(ButtonType.Capsule)
          .width('300vp')
          .onClick(() => {
            if (!this.isChecked) {
              // 如果用户未勾选
              console.log('pass');
            }
          })
      } else {
        Button('华为账号一键登录')
          .type(ButtonType.Capsule)
          .width('300vp')
          .backgroundColor('#fafafa')
          .fontColor('#a3a3a3')
          .onClick(() => {
            if (!this.isChecked) {
              // 如果用户未勾选
              console.log('请同意隐私政策!!');
            }
          })

      }

      Blank();

      // 跳转三方登陆
      Text() {
        Span('我有其它账号?')
          .fontSize(16)
          .fontColor('#A7A7A7')
        Span('登陆')
          .fontSize(16)
          .fontColor('#0A59F7')
          .onClick(() => {
            console.log('跳啊跳');
          })
      }
      .fontSize(16)
      .fontColor('#A7A7A7')
    }
    .width(360)
    .height('100%')

    // .backgroundColor('#ffececec')
  }
}

更多关于HarmonyOS鸿蒙Next中Text组件如何居于页面底部显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Blank-空白与分隔-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者

空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。

在HarmonyOS Next中,要使Text组件居于页面底部,可以使用Column容器配合justifyContent属性。示例代码如下:

Column() {
  // 其他组件
  Text('底部文本')
    .fontSize(20)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.End)

关键点:

  1. 使用Column作为容器
  2. 设置justifyContent为FlexAlign.End
  3. 容器必须设置明确的width和height,

在HarmonyOS Next中实现Text组件居底显示,可以通过以下两种方式修改代码:

  1. 使用Flex布局的justifyContent属性:
Column() {
  // 其他组件...
  
  // 空白区域填充
  Blank()
    .height('1vp')
    .layoutWeight(1)  // 关键点:使用权重填充剩余空间

  // 跳转三方登陆
  Text() {
    Span('我有其它账号?')
      .fontSize(16)
      .fontColor('#A7A7A7')
    Span('登陆')
      .fontSize(16)
      .fontColor('#0A59F7')
      .onClick(() => {
        console.log('跳啊跳');
      })
  }
  .margin({ bottom: 20 })  // 添加底部间距
}
.width(360)
.height('100%')
.justifyContent(FlexAlign.SpaceBetween)  // 关键点:使用SpaceBetween布局
  1. 使用Blank组件作为占位:
Column() {
  // 其他组件...
  
  // 空白区域填充
  Blank()
    .height('1vp')
    .layoutWeight(1)  // 关键点:使用权重填充剩余空间

  // 跳转三方登陆
  Text() {
    Span('我有其它账号?')
      .fontSize(16)
      .fontColor('#A7A7A7')
    Span('登陆')
      .fontSize(16)
      .fontColor('#0A59F7')
      .onClick(() => {
        console.log('跳啊跳');
      })
  }
  .margin({ bottom: 20 })  // 添加底部间距
}
.width(360)
.height('100%')

两种方式都能实现文本居底效果,第一种更简洁,第二种更灵活。根据实际需求选择即可。

回到顶部