2️⃣通过编写计算器学习ArkUI组件原创精华

Tuer白晓明

发布于 2022-3-10 21:19

7414浏览

4收藏

加载失败

3.3 `Column`容器组件

通过3.2小节了解了Flex容器组件及简单的使用方法，本小节将介绍Column组件，并重构标准计算器布局，实现和Flex组件相同的布局效果。

3.3.1 `Column`容器组件

Column容器组件称为沿垂直方向布局的容器（也可以称为线性布局），简而言之就是在垂直方向所有子组件依次排列。

3.3.2 标准计算器`Column`布局实现

通过Column容器布局构建页面，子组件以三个Column容器组件为主，高度占比分别为14%、28%、58%（取与Flex近似值），并使用不同的背景色做简单的区域划分，代码如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 顶部功能按钮
      Column() {

      }
      .width('100%')
      .height('14%')
      .backgroundColor('#F2F2F2')

      // 回显及结果显示区
      Column() {

      }
      .width('100%')
      .height('28%')
      .backgroundColor('#FFFFFF')

      // 功能按钮、符号按钮、数字按钮
      Column() {

      }
      .width('100%')
      .height('58%')
      .backgroundColor('#F2F2F2')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

2️⃣通过编写计算器学习ArkUI组件-鸿蒙开发者社区

$\color{FF0000}{说明：本次计算器以Flex布局为主。}$

3.4 标题栏区域

回顾第2小节的设计图，标题栏区域显示两个组件，左侧组件以下拉为主，用于选择计算器类型；右侧以历史记录为主，用于呈现历史信息。两者都以Button组件为主，左侧Button使用通用属性中的Menu控制实现下拉选择。左侧以图标+文字的形式设计，还需要了解Image和Text组件。
2️⃣通过编写计算器学习ArkUI组件-鸿蒙开发者社区

3.4.1 `Button`组件介绍

″按钮″用于与用户交互最常见的组件，很多时候和客户聊天时，都会听到″我们需要傻瓜式操作，点点按钮就能完成任务″。
2️⃣通过编写计算器学习ArkUI组件-鸿蒙开发者社区
当然这是不可能的，以用户为中心，客户至上😂😂😂

扯远了，继续看看Button组件，它称为按钮组件，支持包含子组件，所以可以通过自定义编写各种按钮，如多色文字按钮，带图标和文字的按钮，图标按钮等。Button组件默认提供了三种样式：圆角默认为高度一半的胶囊型按钮（ButtonType.Capsule）、圆形按钮（ButtonType.Circle）、默认不带圆角的普通按钮（ButtonType.Normal）。若设置按钮圆角需要通过borderRadius设置。

@Entry
@Component
struct btn {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('文字按钮').fontSize(20).fontColor('#CCCCCC').width('90%')
      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap}) {
        Button('普通', {type: ButtonType.Normal}).width(100).backgroundColor('#409EFF')
        Button('圆', {type: ButtonType.Circle}).width(55).height(55).backgroundColor('#409EFF')
        Button('胶囊', {type: ButtonType.Capsule}).width(100).backgroundColor('#409EFF')
        Button('圆角', {type: ButtonType.Normal}).width(100).borderRadius(8).backgroundColor('#409EFF')
      }
      .width('100%')
      .height(120)
      .padding(10)

      Text('图标+文字按钮').fontSize(20).fontColor('#CCCCCC').width('90%')
      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap}) {
        Button({type: ButtonType.Normal}){
          Row() {
            Image($r("app.media.icon")).width(20).height(20).margin({left: 12})
            Text('Logo').fontSize(12).fontColor('#FFFFFF').margin({left: 5, right: 12})
          }
        }.width(100).backgroundColor('#409EFF')
        Button({type: ButtonType.Circle}){
          Row() {
            Image($r("app.media.icon")).width(20).height(20).margin({left: 12})
            Text('Logo').fontSize(12).fontColor('#FFFFFF').margin({left: 5, right: 12})
          }
        }.width(80).height(80).backgroundColor('#409EFF')
        Button({type: ButtonType.Capsule}){
          Row() {
            Image($r("app.media.icon")).width(20).height(20).margin({left: 12})
            Text('Logo').fontSize(12).fontColor('#FFFFFF').margin({left: 5, right: 12})
          }
        }.width(100).backgroundColor('#409EFF')
        Button({type: ButtonType.Normal}){
          Row() {
            Image($r("app.media.icon")).width(20).height(20).margin({left: 12})
            Text('Logo').fontSize(12).fontColor('#FFFFFF').margin({left: 5, right: 12})
          }
        }.width(100).borderRadius(8).backgroundColor('#409EFF')
      }
      .width('100%')
      .height(160)
      .padding(10)

      Text('图标按钮').fontSize(20).fontColor('#CCCCCC').width('90%')
      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap}) {
        Button({type: ButtonType.Normal}){
          Image($r("app.media.icon")).width(20).height(20)
        }.width(55).height(55).backgroundColor('#409EFF')
        Button({type: ButtonType.Circle}){
          Image($r("app.media.icon")).width(20).height(20)
        }.width(55).height(55).backgroundColor('#409EFF')
        Button({type: ButtonType.Capsule}){
          Image($r("app.media.icon")).width(20).height(20)
        }.width(100).height(55).backgroundColor('#409EFF')
        Button({type: ButtonType.Normal}){
          Image($r("app.media.icon")).width(20).height(20)
        }.width(55).height(55).borderRadius(8).backgroundColor('#409EFF')
      }
      .width('100%')
      .height(120)
      .padding(10)
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.

2️⃣通过编写计算器学习ArkUI组件-鸿蒙开发者社区

3.4.2 标题栏左侧下拉菜单实现

      // 顶部功能按钮
      Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween}) {
        Button({type: ButtonType.Normal, stateEffect: false}) {
          Row() {
            Image($r("app.media.more")).width(32).height(32).margin({left: 12})
            Text('标准').fontSize(24).margin({left: 5, right: 12})
          }
        }
        .height(64)
        .backgroundColor('#F5F5F5')
        Button({type: ButtonType.Normal, stateEffect: false}) {
          Image($r("app.media.history")).width(32).height(32).margin({right: 12})
        }
        .height(64)
        .backgroundColor('#F5F5F5')
      }
      .flexGrow(1)
      .width('100%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

2️⃣通过编写计算器学习ArkUI组件-鸿蒙开发者社区
点击【标准】按钮，没有下拉效果，在这里目前仅仅是一个按钮，需要为这个按钮添加Menu控制，接下来聊聊Menu控制是做什么的。

Menu控制是一个通用属性，可以通过bindMenu给组件绑定菜单，点击后弹出菜单。

@Entry
@Component
struct MenuBtn {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Flex({alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
        Text('Click Me')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .bindMenu([
        {
          value: 'MenuButton01',
          action: () => {
            AlertDialog.show({title: "提示", message: '点击了MenuButton01'})
          }
        }, {
          value: 'MenuButton02',
          action: () => {
            AlertDialog.show({title: "提示", message: '点击了MenuButton02'})
          }
        }
      ])
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

2️⃣通过编写计算器学习ArkUI组件-鸿蒙开发者社区

给【标准】按钮绑定菜单：

        Button({type: ButtonType.Normal, stateEffect: false}) {
          Row() {
            Image($r("app.media.more")).width(32).height(32).margin({left: 12})
              .bindMenu([
                {
                  value: "科学",
                  action: () => {}
                },
                {
                  value: "房贷",
                  action: () => {}
                },
                {
                  value: "程序员",
                  action: () => {}
                }
              ])
            Text('标准').fontSize(24).margin({left: 5, right: 12})
          }
        }
        .height(54)
        .backgroundColor('#F5F5F5')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

2️⃣通过编写计算器学习ArkUI组件-鸿蒙开发者社区

3.4.3 标题栏右侧历史记录按钮实现

右侧的历史记录按钮和左侧按钮的实现方法一样，只不过没有文字说明，代码如下：

        Button({type: ButtonType.Normal, stateEffect: false}) {
          Image($r("app.media.history")).width(32).height(32).margin({right: 12})
        }
        .height(54)
        .backgroundColor('#F5F5F5')
1.
2.
3.
4.
5.

总结

本小结即1️⃣通过编写计算器学习ArkUI组件继续完善标准计算器的代码编写，并对Column容器组件，使用Button组件自定义不同的按钮，以及Menu控制做了简单介绍。最终完成了标准计算器顶部功能区的代码实现，在编写过程中，用到了Row容器组件，下节将会讲解它的用法。
$\color{FF0000}{路漫漫其修远兮，吾将上下而求索。}$