鸿蒙 容器组件

Column 和 Row

Column 垂直布局 Row水平,主轴默认是Start,交叉轴默认是Center

ts 复制代码
Column({ space: 10 }) {
  Column() {
    Text('文本1').bordStyle()
    Text('文本2').bordStyle()
    Text('文本3').bordStyle()
    Text('文本3').bordStyle()
  }
  .bordStyle()
  .width(200)
  .height(200)
  // 主轴方向 默认是Start
  // FlexAlign.Center 中间,
  // FlexAlign.Start 开始的位置,
  // FlexAlign.End 结束的位置,
  // FlexAlign.SpaceBetween 上下贴边,其他平分
  // FlexAlign.SpaceAround 上下剩余,是其他剩余的一半
  // FlexAlign.SpaceEvenly 全部平分
  .justifyContent(FlexAlign.SpaceEvenly)
  // 交叉轴方向 默认是Center,End,Center
  .alignItems(HorizontalAlign.End)

Stack

堆叠容器,类似于FramLayout,默认是Center

scss 复制代码
// 参数 alignContent默认是Center,其他是8个方向加一个Center
Stack({ alignContent: Alignment.TopStart }) {
  Text('文本').margin({left:100,top:100})
  // 也可以用通用属性zIndex ,来控制再Z轴的方向
  Button('点我').zIndex(1)
}.bordStyle().width(200).height(200)

Flex

以弹性方式布局子组件的容器组件。Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用 必须设置成 Wrap,否则跟row ,colom 没啥区别

less 复制代码
Flex({
  // 主轴
  direction: FlexDirection.Row,
  // 是否换行,必须换呀,否则用这个就没啥意义了
  wrap: FlexWrap.Wrap,
  // 主轴方向
  justifyContent: FlexAlign.Start,
  // 所有子组件在Flex容器交叉轴上的对齐格式。
  alignItems: ItemAlign.End,
  // 交叉轴中有额外的空间时,多行内容的对齐方式
  alignContent: FlexAlign.Start
})

RelativeContainer

相对布局,android中的RelativeLayout anchor锚点,如果是父亲__container__,每个View都有id top: {anchor: "container", align: VerticalAlign.Top},

less 复制代码
RelativeContainer() {
  Row().width(100).height(100)
    .backgroundColor("#ffec0a0a")
    .alignRules({
      top: {anchor: "__container__", align: VerticalAlign.Top},
      left: {anchor: "__container__", align: HorizontalAlign.Start}
    })
    .id("row1")
    }

WaterFlow

瀑布流容器,由"行"和"列"分割的单元格所组成,通过容器自身的排列规则,将不同大小的"项目"自上而下,如瀑布般紧密布局。

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴5 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript