基础视图搭建

以"个人页"为例，我们先单个构建页面中所有元素，首先是图片视图，如下代码所示：

scss 复制代码

Column() {
  // 头像
  this.headShot()
}
.width('100%')
.height('100%')

// 头像
@Builder
headShot(){
  Image($r('app.media.img_headShot'))
    .objectFit(ImageFit.Cover)
    .width(100)
    .border({ width: 1,color:'#EAEAEA'})
    .borderRadius(90)
}

上述代码中，我们单独构建了"头像视图"headShot，并且使用修饰符设置了头像视图的尺寸、边框、圆角等样式参数。

在主视图中，我们使用Column容器来包裹headShot头像视图，如此在预览窗口中我们就可以看到一个圆形的头像样式的内容。

往下是个人信息部份，我们也可以单独构建代码块来实现它，如下代码所示：

scss 复制代码

// 个人信息
@Builder
personalInformation(){
  Column({space:10}) {
    Text('Ricardo LI')
      .fontSize(23)
      .fontColor('#333333')
      .fontWeight(600)
    Text('Senior Product Manager & HarmonyOS Developer')
      .fontSize(14)
      .fontColor('#999999')
    Text('20.4k followers')
      .fontSize(14)
      .fontColor('#999999')
  }
  .width('100%')
  .justifyContent(FlexAlign.Center)
}

上述代码中，我们单独构建了"个人信息视图"personalInformation，在其闭包中我们使用Column容器排列了3个Text文本视图，并使用修饰器为这些文本视图赋予不同的样式。

下一步，我们构建"按钮视图"，如下代码所示：

scss 复制代码

// 按钮
this.followBtn()

// 按钮
@Builder
followBtn(){
  Text('Follow')
    .fontSize(14)
    .fontColor('#FFFFFF')
    .fontWeight(600)
    .padding({left:32,right:32,bottom:15,top:15})
    .backgroundColor('#5ACCEE')
    .borderRadius(30)
}

上述代码中，我们单独构建了按钮视图followBtn，并设置了Text的字号、字体颜色、字重，并通过padding留出四周的区域，通过为留出区域填充颜色并设置圆角来实现一个按钮的样式。

接下来我们来构建课程介绍部份，我们也单独构建这块的内容，如下代码所示：

scss 复制代码

// 课程介绍
this.classInformation()

// 课程介绍
@Builder
classInformation(){
  Text('Hi, l'm Ricardo, a Harmony OS Developer. As you get started, I will be your guide over the next four weeks, helping you learn to how to be a Harmony OS Developer by this class.')
    .fontSize(17)
    .fontColor('#333333')
    .textAlign(TextAlign.JUSTIFY)
    .margin(10)
}

上述代码中，我们单独创建了classInformation课程介绍视图，除了基本的Text文本视图和常规修饰符外，我们使用了textAlign文字对齐方式修饰符，设置文字未自动对齐，并使用margin边距修饰符，留出屏幕两边的边距。

下一个我们来构建课程目录，由于一条条目录结构类似，我们可以创建一个可复用的代码块来实现，如下代码所示：

scss 复制代码

// 课程目录
@Builder
function classItemView(image:string,text: string) {
  Row({space:10}) {
    Image($r(image))
      .objectFit(ImageFit.Cover)
      .width(40)
      .height(40)
    Text(text)
      .fontSize(14)
      .fontColor('#999999')
  }
  .width('100%')
}

上述代码中，我们单独构建了一个全局视图classItemView，使用Row横向布局容器排布了一个Image图片视图和Text文本视图，并将两个视图核心参数进行抽离，使其能能够传入不同的值来显示不同的内容。

完成后，我们构建样式部份，如下代码所示：

scss 复制代码

// 课程目录
Column({space:15}) {
  classItemView('app.media.img_harmonyOS', 'ArkUI极简教程01:Text视图的使用')
  classItemView('app.media.img_harmonyOS', 'ArkUI极简教程02:Image视图的使用')
  classItemView('app.media.img_harmonyOS', 'ArkUI极简教程03:容器视图的使用（上）')
  classItemView('app.media.img_harmonyOS', 'ArkUI极简教程04:容器视图的使用（下）')
  classItemView('app.media.img_harmonyOS', 'ArkUI极简教程05:代码块构建')
  classItemView('app.media.img_harmonyOS', 'ArkUI极简教程06:代码块复用')
  classItemView('app.media.img_harmonyOS', 'ArkUI极简教程07:Scroll视图的使用')
}
.padding(20)
.backgroundColor('#F5F5F5')
.borderRadius(16)
.margin(10)

上述代码中，我们使用Column垂直布局容器排布多个classItemView课程目录项目视图，并传入不同的Text文本的内容。我们通过设置修饰符，让其看起来更加精致一些，比如设置背景颜色，设置视图边距等等。

Scroll视图应用

很好，完成基础视图后，我们发现如果只使用最外层的Column垂直布局容器时，内容不能被很好的显示。这时候，我们就可以使用Scroll滚动视图来代替，以便实现页面的滚动查看效果，如下代码所示：

scss 复制代码

// 使用滚动视图
Scroll(new Scroller()) {
  // 主要视图内容
}
.scrollable(ScrollDirection.Vertical)	// 滚动方向

上述代码中，我们使用Scroll视图作为最外层的布局容器，设置滚动视图的scroller对象参数为new Scroller-控制器，实现将滚动视图组件绑定到容器组件上，以此来控制容器组件的滚动。除此之外，还需要设置scrollable修饰符，告知容器的滚动方向，我们这里设置为Vertical垂直滚动。

代码完成后，就可以在预览窗口中拖动页面来查看完整的视图信息。

最后我们还可以设置下内部Column垂直布局容器上下边距，让视图看起来更和谐一些，如下图所示：

本章小结

本章案例中，我们基本将前面章节中提及到的内容做了下整合，通过本章的学习，是不是对ArkUI的了解更多了些呢？

学习是一个过程，坚持就好了，没事的，一切都来得及。

ArkUI极简教程07：Scroll视图的使用

基础视图搭建

Scroll视图应用

本章小结