网站蓝色导航栏代码,动态图表制作软件,群晖wordpress固定链接404,胶州网站建设电话写在前面 组件的结构 rkTS通过装饰器 Component 和 Entry 装饰 struct 关键字声明的数据结构#xff0c;构成一个自定义组件。 自定义组件中提供了一个 build 函数#xff0c;开发者需在该函数内以链式调用的方式进行基本的 UI 描述 今天我们要学习的就是写在build 函数里的系…写在前面 组件的结构 rkTS通过装饰器 Component 和 Entry 装饰 struct 关键字声明的数据结构构成一个自定义组件。 自定义组件中提供了一个 build 函数开发者需在该函数内以链式调用的方式进行基本的 UI 描述 今天我们要学习的就是写在build 函数里的系统组件。
常用的系统组件 布局容器组件——Column列组件
Column组件用于垂直排列子组件它常用属性有 alignItems定义子组件在交叉轴即Column的垂直方向上的对齐方式。可选值有 stretch默认值拉伸子组件以填充交叉轴。start子组件在交叉轴的起始位置对齐。center子组件在交叉轴上居中对齐。end子组件在交叉轴的结束位置对齐。 justifyContent定义子组件在主轴即Column的水平方向上的对齐方式。可选值有 start子组件在主轴的起始位置对齐。center子组件在主轴上居中对齐。end子组件在主轴的结束位置对齐。space-between子组件在主轴上均匀分布第一个子组件在起始位置最后一个子组件在结束位置。space-around子组件在主轴上均匀分布每个子组件周围分配相同的空间。space-evenly子组件在主轴上均匀分布包括起始和结束位置。 spacing设置子组件之间的间隔。 wrap定义子组件是否可以在必要时换行。默认值为nowrap即不换行。如果设置为wrap则子组件可以在必要时换行。 height设置Column组件的高度。 width设置Column组件的宽度。 margin设置Column组件的外边距。 padding设置Column组件的内边距。 backgroundImage设置Column组件的背景图片。 backgroundColor设置Column组件的背景颜色。 borderRadius设置Column组件的边框圆角。 borderWidth设置Column组件的边框宽度。 borderColor设置Column组件的边框颜色。
使用示例
build() {Column({ // 创建Column组件实例并设置属性space: 20 // 设置子组件之间的间隔}) {// 可以添加更多的子组件}.width(100%).height(500).justifyContent(FlexAlign.SpaceBetween)
}
布局容器组件——Row行组件
Row组件是一个用于水平排列子组件的布局容器。Row组件的属性和Column组件的属性几乎相同只是列子组件的方向不同使用示例
build() {Row({ // 创建Row组件实例并设置属性space: 10, // 设置子组件之间的间隔alignItems: Alignment.Center, // 设置子组件在交叉轴上居中对齐justifyContent: FlexAlign.SpaceBetween // 设置子组件在主轴上均匀分布}) {Text(左边的子组件).fontSize(16).width(50%).textAlign(TextAlign.Start);Text(右边的子组件).fontSize(16).width(50%).textAlign(TextAlign.End);}
}
