线性布局,该demo主要用于展示线性布局在不同容器以及不同属性下的布局效果

该demo主要用于展示线性布局在不同容器以及不同属性下的布局效果。


HarmonyOS
2024-05-26 12:44:58
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
anlan001

使用的核心API

核心API可以参考文档:线性布局

  •  router.pushUrl():该方法可以跳转到指定的页面。
  •  alignItems:该属性设置子元素在交叉轴(排列方向的垂直方向)上的对齐方式。
  •  HorizontalAlign:该属性设置水平方向的对齐方式,分别为水平方向左对齐(Start)、水平方向居中对齐(Center)、水平方向右对齐(End)。
  •  justifyContent:该属性设置子元素在主轴方向上的排列,分别为justifyContent(FlexAlign.Start):元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。
  •  justifyContent(FlexAlign.Center):元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。
  •  justifyContent(FlexAlign.End):元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。
  •  justifyContent(FlexAlign.Spacebetween):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。
  •  justifyContent(FlexAlign.SpaceAround):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
  •  justifyContent(FlexAlign.SpaceEvenly):主轴方向均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
  •  VerticalAlign:该属性设置子元素在垂直方向上的排列,分别为VerticalAlign.Top:子元素在垂直方向顶部对齐。VerticalAlign.Center:子元素在垂直方向居中对齐。VerticalAlign.Bottom:子元素在垂直方向底部对齐。

核心代码解释

import router from '@ohos.router'; 
import {BusinessError} from '@ohos.base' 
  
@Entry 
@Component 
struct Index { 
  @State message: string = '线性布局'; 
  
  build() { 
      Column({space: 40}) { 
        Text(this.message) 
          .fontSize(48) 
          .fontWeight(FontWeight.Bold) 
        Button('Column容器内子元素的布局效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Column容器内子元素的布局页面') 
            router.pushUrl({url: 'pages/Column'}).then(() =>{ 
              console.info('成功进入Column容器内子元素的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Column容器内子元素的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Column容器内子元素在水平方向上的排列效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Column容器内子元素在水平方向上的布局页面') 
            router.pushUrl({url: 'pages/ColumnHorizontalAlignTest'}).then(() =>{ 
              console.info('成功进入Column容器内子元素在水平方向上的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Column容器内子元素在水平方向上的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Column容器内子元素在主轴方向上的排列效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Column容器内子元素在主轴方向上的布局页面') 
            router.pushUrl({url: 'pages/ColumnJustifyContentTest'}).then(() =>{ 
              console.info('成功进入Column容器内子元素在主轴方向上的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Column容器内子元素在主轴方向上的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Row容器内子元素的布局效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Row容器内子元素的布局页面') 
            router.pushUrl({url: 'pages/Row'}).then(() =>{ 
              console.info('成功进入Row容器内子元素的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Row容器内子元素的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Row容器内子元素在主轴方向上的排列效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Row容器内子元素的布局页面') 
            router.pushUrl({url: 'pages/RowJustifyContentTest'}).then(() =>{ 
              console.info('成功进入Row容器内子元素的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Row容器内子元素的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Row容器内子元素在垂直方向上的排列效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Row容器内子元素的布局页面') 
            router.pushUrl({url: 'pages/RowVerticalAlignTest'}).then(() =>{ 
              console.info('成功进入Row容器内子元素的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Row容器内子元素的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
      } 
      .width('100%') 
  
    } 
}
分享
微博
QQ
微信
回复
2024-05-27 16:25:16
相关问题
动态布局加载loading效果实现
288浏览 • 1回复 待解决
音乐播放悬浮按钮如何布局
383浏览 • 1回复 待解决
ArkTS布局组件实现瀑布流式布局
380浏览 • 1回复 待解决
Android下述图片布局怎么解决?
4136浏览 • 2回复 待解决
类似边框颜色线性渐变
278浏览 • 1回复 待解决
相对布局(RelativeContainer)
419浏览 • 1回复 待解决
应用获取不同权限demo
474浏览 • 1回复 待解决
原子布局能力对应api
8173浏览 • 1回复 待解决
基于tabs实现页面布局
217浏览 • 1回复 待解决
ets中设置布局高度和宽度
1792浏览 • 1回复 待解决