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

Tuer白晓明
发布于 2022-3-10 21:19
浏览
4收藏

【本文正在参与优质创作者激励】

$\color{FF0000}{有兴趣的可以通过社区群加我一起探索ArkUI应用开发😁😁😁}$


接上篇1️⃣通过编写计算器学习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')
  }
}

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

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

3.4 标题栏区域

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

3.4.1 Button组件介绍

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

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

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

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

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-3-10 21:19:39修改
7
收藏 4
回复
举报
3条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

赞,持续追更白老师文章

回复
2022-3-11 10:29:15
51CTO_XUBC
51CTO_XUBC

支持支持

回复
2022-3-21 15:29:48
wx6245597465b5f
wx6245597465b5f

系列内容太赞了

回复
2022-5-27 11:44:51
回复
    相关推荐