doubleyong
管理员
管理员
  • 最后登录2025-02-06
  • 发帖数1196
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:466回复:0

HarmonyOS TabContent内组件默认垂直居中,如何从顶部显示

楼主#
更多 发布于:2024-11-13 14:51
问题:
使用Tabs时,子组件TabContent内组件只能垂直居中,期望能垂直置顶。


import { router } from '@kit.ArkUI';
import { Product } from './Product';
@Entry
@Component
export default struct Product {
  @State message: string = 'Hello World';
  build() {
    Column() {
       Tabs(){
           TabContent(){
             Product()
           }.tabBar('产品')
       }
    }
    .height('100%')
    .width('100%')
  }
}


解决方案:
TabContent组件里先写一个Column组件,设置它的宽高都为100%,再设置主轴对齐方式为start即可,代码如下:
import { router } from '@kit.ArkUI';
import { Product } from './Product';
@Entry
@Component
export default struct Product {
  @State message: string = 'Hello World';
  build() {
    Column() {
       Tabs(){
           TabContent(){
              Column(){  //此列的作用是,让组件内容从顶部开始显示
                  Product()
              }
              .height('100%')
               .width('100%')
              .justifyContent(FlexAlign.Start) //设置列的主轴对象方式为Start
           }.tabBar('产品')
       }
    }
    .height('100%')
    .width('100%')
  }
}
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号