鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Button） ...

按钮组件，可快速创建不同样式的按钮。
   分析：
  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标志该内容的起始版本。
  子组件

可以包罗单个子组件。
接口

Button

Button(options: ButtonOptions)
创建可以包罗单个子组件的按钮。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析optionsButtonOptions是设置按钮的表现样式。 Button

Button(label: ResourceStr, options?: ButtonOptions)
使用文本内容创建相应的按钮组件，此时Button无法包罗子组件。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析labelResourceStr是按钮文本内容。optionsButtonOptions否设置按钮的表现样式。 ButtonOptions对象分析

名称类型必填描述typeButtonType否描述按钮表现样式。
默认值：ButtonType.CapsulestateEffectboolean否按钮按下时是否开启按压态表现效果，当设置为false时，按压效果关闭。
默认值：true
分析：
当开启按压态表现效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。buttonStyle11+ButtonStyleMode否描述按钮的样式和紧张水平。
默认值：ButtonStyleMode.EMPHASIZED
分析：
按钮紧张水平：强调按钮>普通按钮>文字按钮。controlSize11+ControlSize否描述按钮的尺寸。
默认值：ControlSize.NORMAL 属性

除支持通用属性外，还支持以部属性：
名称参数类型描述typeButtonType设置Button样式。
默认值：ButtonType.Capsule
从API version 9开始，该接口支持在ArkTS卡片中使用。fontSizeLength设置文本表现字号。
默认值：'16fp'fontColorResourceColor设置文本表现颜色。
默认值：'#ffffff'fontWeightFontWeight | number | string设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，取值越大，字体越粗。
默认值：400 | FontWeight.NormalfontStyleFontStyle设置文本的字体样式。
默认值：FontStyle.Normal。stateEffectboolean按钮按下时是否开启按压态表现效果，当设置为false时，按压效果关闭。
默认值：true
从API version 9开始，该接口支持在ArkTS卡片中使用。labelStyle10+LabelStyle设置Button组件label文本和字体的样式。buttonStyle11+ButtonStyleMode设置Button组件的样式和紧张水平。
默认值:ButtonStyleMode.EMPHASIZED。controlSize11+ControlSize设置Button组件的尺寸。
默认值:ControlSize.NORMAL。 ButtonType枚举分析

从API version 9开始，该接口支持在ArkTS卡片中使用。
名称描述Capsule胶囊型按钮（圆角默以为高度的一半）。Circle圆形按钮。Normal普通按钮（默认不带圆角）。   分析：
  

• 按钮圆角通过通用属性borderRadius设置（不支持通过border接口设置圆角），且只支持设置参数为Length的圆角。
  
• 当按钮类型为Capsule时，borderRadius设置不见效，按钮圆角始终为宽、高中较小值的一半。
  
• 当按钮类型为Circle时，若同时设置了宽和高，则borderRadius不见效，且按钮半径为宽高中较小值的一半；若只设置宽、高中的一个，则borderRadius不见效，且按钮半径为所设宽或所设高值的一半；若不设置宽高，则borderRadius为按钮半径；若borderRadius的值为负，则borderRadius的值按照0处置惩罚。
  
• 按钮文本通过通用文本样式进行设置。
  
• 设置颜色渐变需先设置backgroundColor为透明色。
  

  LabelStyle10+对象分析

名称参数类型必填描述overflowTextOverflow否设置Label文本超长时的表现方式。文本截断是按字截断。例如，英文以单词为最小单元进行截断，若需要以字母为单元进行截断，可在字母间添加零宽空格。
默认值：TextOverflow.EllipsismaxLinesnumber否设置Label文本的最大行数。默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会凌驾指定的行。如果有多余的文本，可以通过overflow来指定截断方式。
默认值：1minFontSizenumber | ResourceStr否设置Label文本最小表现字号。需共同maxFontSize以及maxLines或布局大小限定使用。maxFontSizenumber | ResourceStr否设置Label文本最大表现字号。需共同minFontSize以及maxLines或布局大小限定使用。heightAdaptivePolicyTextHeightAdaptivePolicy否设置Label文本自顺应高度的方式。fontFont否设置Label文本字体样式。
默认值：默认值参考Font。 ButtonStyleMode11+枚举分析

从API version 11开始，该接口支持在ArkTS卡片中使用。
名称描述EMPHASIZED强调按钮（用于强调当前操纵）。NORMAL普通按钮（一般界面操纵）。TEXTUAL文本按钮（纯文本，无背景颜色）。 ControlSize11+枚举分析

从API version 11开始，该接口支持在ArkTS卡片中使用。
名称描述SMALL小尺寸按钮。NORMAL正常尺寸按钮。 事件

支持通用事件。
示例

示例1

1. // xxx.ets
2. @Entry
3. @Component
4. struct ButtonExample {
5.   build() {
6.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
7.       Text('Normal button').fontSize(9).fontColor(0xCCCCCC)
8.       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
9.         Button('OK', { type: ButtonType.Normal, stateEffect: true })
10.           .borderRadius(8)
11.           .backgroundColor(0x317aff)
12.           .width(90)
13.           .onClick(() => {
14.             console.log('ButtonType.Normal')
15.           })
16.         Button({ type: ButtonType.Normal, stateEffect: true }) {
17.           Row() {
18.             LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
19.             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
20.           }.alignItems(VerticalAlign.Center)
21.         }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
23.         Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4)
24.           .borderRadius(8).backgroundColor(0x317aff).width(90)
25.       }
27.       Text('Capsule button').fontSize(9).fontColor(0xCCCCCC)
28.       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
29.         Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)
30.         Button({ type: ButtonType.Capsule, stateEffect: true }) {
31.           Row() {
32.             LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
33.             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
34.           }.alignItems(VerticalAlign.Center).width(90).height(40)
35.         }.backgroundColor(0x317aff)
37.         Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4)
38.           .backgroundColor(0x317aff).width(90)
39.       }
41.       Text('Circle button').fontSize(9).fontColor(0xCCCCCC)
42.       Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
43.         Button({ type: ButtonType.Circle, stateEffect: true }) {
44.           LoadingProgress().width(20).height(20).color(0xFFFFFF)
45.         }.width(55).height(55).backgroundColor(0x317aff)
47.         Button({ type: ButtonType.Circle, stateEffect: true }) {
48.           LoadingProgress().width(20).height(20).color(0xFFFFFF)
49.         }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
50.       }
51.     }.height(400).padding({ left: 35, right: 35, top: 35 })
52.   }
53. }

复制代码

示例2

1. // xxx.ets
2. @Entry
3. @Component
4. struct SwipeGestureExample {
5.   @State count: number = 0
7.   build() {
8.     Column() {
9.       Text(`${this.count}`)
10.         .fontSize(30)
11.         .onClick(() => {
12.           this.count++
13.         })
14.       if (this.count <= 0) {
15.         Button('count is negative').fontSize(30).height(50)
16.       } else if (this.count % 2 === 0) {
17.         Button('count is even').fontSize(30).height(50)
18.       } else {
19.         Button('count is odd').fontSize(30).height(50)
20.       }
21.     }.height('100%').width('100%').justifyContent(FlexAlign.Center)
22.   }
23. }

复制代码

示例3

1. // xxx.ets
2. @Entry
3. @Component
4. struct buttonTestDemo {
5.   @State txt: string = 'overflowTextOverlengthTextOverflow.Clip';
6.   @State widthShortSize: number = 200;
8.   build() {
9.     Row() {
10.       Column() {
11.         Button(this.txt)
12.           .width(this.widthShortSize)
13.           .height(100)
14.           .labelStyle({ overflow: TextOverflow.Clip,
15.             maxLines: 1,
16.             minFontSize: 20,
17.             maxFontSize: 20,
18.             font: {
19.               size: 20,
20.               weight: FontWeight.Bolder,
21.               family: 'cursive',
22.               style: FontStyle.Italic
23.             }
24.           })
25.           .fontSize(40)
26.       }
27.       .width('100%')
28.     }
29.     .height('100%')
30.   }
31. }

复制代码

示例4

1. // xxx.ets
2. @Entry
3. @Component
4. struct ButtonExample {
5.   build() {
6.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
7.       Text('Normal size button').fontSize(9).fontColor(0xCCCCCC)
8.       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
9.         Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED });
10.         Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL });
11.         Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL });
12.       }
14.       Text('Small size button').fontSize(9).fontColor(0xCCCCCC)
15.       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
16.         Button('Emphasized', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.EMPHASIZED });
17.         Button('Normal', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.NORMAL });
18.         Button('Textual', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.TEXTUAL });
19.       }
21.       Text('Small size button').fontSize(9).fontColor(0xCCCCCC)
22.       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
23.         Button('Emphasized').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.EMPHASIZED);
24.         Button('Normal').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.NORMAL);
25.         Button('Textual').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.TEXTUAL);
26.       }
28.     }.height(400).padding({ left: 35, right: 35, top: 35 })
29.   }
30. }

复制代码

末了，有很多小伙伴不知道学习哪些鸿蒙开发技能？不知道需要重点把握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 
这份鸿蒙（Harmony NEXT）资料包罗了鸿蒙开发必把握的核心知识要点，内容包罗了（ArkTS、ArkUI开发组件、Stage模子、多端摆设、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技能知识点。
希望这一份鸿蒙学习资料能够给大家带来资助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（Harmony NEXT）最新学习路线

•  HarmonOS基础技能
  

• HarmonOS就业必备技能 
  
  
  
•  HarmonOS多媒体技能
  

• 鸿蒙NaPi组件进阶
  

• HarmonOS高级技能
  

• 初识HarmonOS内核 
  
  
  
• 实战就业级装备开发
  

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布条记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包罗：ArkTS、ArkUI、Web开发、应用模子、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发情况搭建

 《鸿蒙开发基础》

• ArkTS语言
  
• 安装DevEco Studio
  
• 运用你的第一个ArkTS应用
  
• ArkUI声明式UI开发
  
• .……
  

 《鸿蒙开发进阶》

• Stage模子入门
  
• 网络管理
  
• 数据管理
  
• 电话服务
  
• 分布式应用开发
  
• 通知与窗口管理
  
• 多媒体技能
  
• 安全技能
  
• 任务管理
  
• WebGL
  
• 国际化开发
  
• 应用测试
  
• DFX面向未来操持
  
• 鸿蒙系统移植和裁剪定制
  
• ……
  

《鸿蒙进阶实战》

• ArkTS实践
  
• UIAbility应用
  
• 网络案例
  
• ……
  

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结

总的来说，华为鸿蒙不再兼容安卓，对中年步伐员来说是一个挑战，也是一个机会。只有积极应对变化，不停学习和提拔自己，他们才能在这个变革的时代中立于不败之地。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。