HarmonyOS鸿蒙Next中Text组件如何居于页面底部显示
HarmonyOS鸿蒙Next中Text组件如何居于页面底部显示
我想实现的效果如下,就是将最下方“三方登陆”的这一行居底显示。
请问怎么实现?
代码如下:
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)
关键点:
- 使用Column作为容器
- 设置justifyContent为FlexAlign.End
- 容器必须设置明确的width和height,
在HarmonyOS Next中实现Text组件居底显示,可以通过以下两种方式修改代码:
- 使用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布局
- 使用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%')
两种方式都能实现文本居底效果,第一种更简洁,第二种更灵活。根据实际需求选择即可。