网站导航
> 文档中心 > 梅科尔工作室-牛炳森-鸿蒙笔记2

梅科尔工作室-牛炳森-鸿蒙笔记2

网友: 文档中心 2023-02-06 11:42:25

DevEvo studio中的组件及其作用

    • 布局容器的概念

线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。（主轴，交叉轴）

  • Column表示沿垂直方向布局的容器。

  • Row表示沿水平方向布局的容器。

2.Column和Row容器的两个属性

梅科尔工作室-牛炳森-鸿蒙笔记2

    • 对齐的方式

i.主轴方向的对齐（justifyContent）

子组件在主轴方向上的对齐使用justifyContent属性来设置，其参数类型是FlexAlign。FlexAlign定义了以下几种类型：

  • End：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

  • Start：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

  • Center：元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。

  • SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。

  • SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半

  • SpaceEvenly：元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

ii.交叉轴方向的对齐（alignItems）

Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐），HorizontalAlign定义了以下几种类型：

  • Start：设置子组件在水平方向上按照起始端对齐

  • Center（默认值）：设置子组件在水平方向上居中对齐。

  • End：设置子组件在水平方向上按照末端对齐。

iii.Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐），VerticalAlign定义了以下几种类型

  • Top：设置子组件在垂直方向上居顶部对齐。

  • Center（默认值）：设置子组件在竖直方向上居中对齐。

  • Bottom：设置子组件在竖直方向上居底部对齐。

    • 组件

  • Text 文本组件

  • Text、Span、Button、TextInput等可使用

  • fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式，分别设置文本的颜色、大小、样式、粗细以及字体，文本样式的属性

Text('HarmonyOS')  .width(200)  .textAlign(TextAlign.Start)  .backgroundColor(0xE6F2FD)例如下：

textAlign参数类型为TextAlign，定义了以下几种类型：start， cente，r end

  • Image 图像组件

  • 图像可以用来渲染页面，是页面更加丰富多彩，如

Image($r("app.media.icon"))  .width(100)  .height(100)

  • 设置缩放类型

  • 将图片加载到Image组件，设置宽高各100，设置objectFit为Cover（默认值），设置图片背景色为灰色0xCCCCCC。示例代码如下：

Image($r("app.media.image2"))  .objectFit(ImageFit.Cover)  .backgroundColor(0xCCCCCC)  .width(100)  .height(100)

  • ImageFit包含以下几种类型：

  • Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

  • Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

  • Auto：自适应显示。

  • Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。

  • ScaleDown：保持宽高比显示，图片缩小或者保持不变。

  • None：保持原有尺寸显示。

  • TextInput 输入组件

  • TextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如应用登录账号密码、发送消息等。和Text组件一样，TextInput组件也支持文本样式设置。例如

TextInput()  .fontColor(Color.Blue)  .fontSize(20)  .fontStyle(FontStyle.Italic)  .fontWeight(FontWeight.Bold)  .fontFamily('Arial')

  • type的参数类型为InputType，包含以下几种输入类型：

  • Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。

  • Password：密码输入模式

  • Email：e-mail地址输入模式

  • Number：纯数字输入模式

  • Button 按钮组件

  • Button组件主要用来响应点击操作，可以包含子组件，如；

Button({type:ButtonType.Circle,stateEffect: true}){     Image($r('app.media.weibo')).width(40).height(40)   }
    • 可以设置按钮样式

  • Capsule：胶囊型按钮

  • Circle：圆形按钮。

  • Normal：普通按钮（默认不带圆角）。

  • 设置按钮点击事件

网络标签：

相关问题