2️⃣通过编写计算器学习ArkUI组件

注：转自Tuer白晓明，原文地址：https://ost.51cto.com/posts/10653

本系列文章共有五篇，细致描述了如何学习ArkUI组件实现计算器的功能，以下为正文

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')
  }
}

 

 

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

3.4 标题栏区域

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

3.4.1 Button组件介绍

″按钮″用于与用户交互最常见的组件，很多时候和客户聊天时，都会听到″我们需要傻瓜式操作，点点按钮就能完成任务″。

当然这是不可能的，以用户为中心，客户至上😂😂😂

扯远了，继续看看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%')
  }
}

 

 

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.

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

复制

点击【标准】按钮，没有下拉效果，在这里目前仅仅是一个按钮，需要为这个按钮添加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%')
  }
}

 

 

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

        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')

 

 

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