Text
Text(this.title)
.height(19)
.width('100%')
.fontSize(14)
.textAlign(TextAlign.Start)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.fontWeight(400)
.fontFamily('HarmonyHeiTi-Bold')
.lineHeight(33)
.padding({ left: 12, right: 12 })
.margin({ top: 8 })
.opacity
textOverFlow属性设置文本超长时的显示方式，在这里我们设置它的值为Ellipsis，表示超长时使用省略号替代。
maxLines属性设置文本的最大行数，我们设置title最多显示一行，brief最多显示两行。
fontSize 字体大小
fontWeight字体粗细
设置fontFamily字体属性为'HarmonyHeiTi-Bold'，
设置lineHeight行高属性为33。
.opacity 模糊
.decoration 装饰
.width('100%')Text组件宽度设置为占满屏幕（100%）
.textAlign(TextAlign.Start)文本在Text组件内会向左对齐。
Image
Image($r('app.media.enablement_pic1'))
.width('100%')
.height(96)
.objectFit(ImageFit.Cover)
.borderRadius({
topLeft: 16,
topRight: 16
})
使用objectFit属性设置填充效果为cover模式，即保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。会有一部分图片未显示出来。
Image($r('app.media.banner_pic1'))
.objectFit(ImageFit.Contain)设置图片的填充效果为Contain模式，即保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
ImageFit.Fill 自由拉伸（不保持宽高比），填充整个显示页面。
Column
.width(160)
.height(169)
.borderRadius(16)
.backgroundColor(Color.White)
.layoutWeight(1)
设置layoutWeight属性，取值为1，表示它们在任意尺寸的设备下自适应占满剩余空间。
Swiper
.autoPlay(true)
.loop(true)
.indicator(
new DotIndicator()
.color('#1a000000')
.selectedColor('#0A59F7'))
autoPlay控制是否自动轮播子组件，
loop属性控制是否循环播放，
indicator属性自定义导航点的位置和样式。
Grid
Scroll
滚动显示
采用Scroll作为外层容器，是由于其内部内容很有可能会超过屏幕高度，为保证内容显示，可以采用Scroll组件来进行滚动显示。scrollBar设置为BarState.Off，表示关闭滚动时的滚动条显示。
ForEach
ForEach(
arr: Array,
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)
- ForEach循环渲染的第一个参数是一个任意类型的数组arr，很容易理解，我们要创建多个结构类似，部分参数不一致的固定结构，类似于刚刚我们创建的多个样式相同但是图片资源不一致的Image，数组正是非常适合的存储方式。
- ForEach循环渲染的第二个参数itemGenerator，听起来很难理解其意思，这一部分本质上其实就是一个函数，该函数会按序取到数组中的每一个项，生成函数体中的组件。例如像刚刚我们需要有多个Image，在之后的内容有具体的代码，相信大家看到代码就能更加理解了。
- ForEach的第三个参数是keyGenerator，这个部分本质上也是一个函数，这个函数关键的作用就在于通过标识每一个实际的组件，当数组元素变化触发页面更新时，能通过对比标识来判断组件是否存在，是否需要创建新的对应的组件，达成增量渲染，而非全量的重新渲染，以提高渲染效率，所以建议在使用ForEach循环渲染传入该参数，这也解释了为什么在进行Banner位数据结构设计时有一个id属性。
