当前仓库属于关闭状态,部分功能使用受限,详情请查阅 仓库状态说明
1.4K Star 7.4K Fork 8.2K

OpenHarmony/docs
关闭

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
docker
en
zh-cn
application-dev
IDL
account
ads-service/oaid
ai
application-models
application-test
arkts-utils
communication
connectivity
database
device-usage-statistics
device
dfx
faqs
file-management
internationalization
key-features/multi-device-app-dev
kit-readme
media
napi
notification
performance
public_sys-resources
quick-start
reference
apis
arkui-js-lite
arkui-js
arkui-ts
figures
public_sys-resources
Readme-CN.md
ohos-arkui-advanced-counter.md
ohos-arkui-advanced-popup.md
ohos-arkui-advanced-segmentbutton.md
ohos-multimedia-avcastpicker.md
ts-animatorproperty.md
ts-appendix-enums.md
ts-basic-components-blank.md
ts-basic-components-button.md
ts-basic-components-calendarpicker.md
ts-basic-components-checkbox.md
ts-basic-components-checkboxgroup.md
ts-basic-components-component3d.md
ts-basic-components-datapanel.md
ts-basic-components-datepicker.md
ts-basic-components-divider.md
ts-basic-components-formcomponent.md
ts-basic-components-gauge.md
ts-basic-components-image.md
ts-basic-components-imageanimator.md
ts-basic-components-imagespan.md
ts-basic-components-loadingprogress.md
ts-basic-components-marquee.md
ts-basic-components-menu.md
ts-basic-components-menuitem.md
ts-basic-components-menuitemgroup.md
ts-basic-components-navdestination.md
ts-basic-components-navigation.md
ts-basic-components-navrouter.md
ts-basic-components-patternlock.md
ts-basic-components-plugincomponent.md
ts-basic-components-progress.md
ts-basic-components-qrcode.md
ts-basic-components-radio.md
ts-basic-components-rating.md
ts-basic-components-remotewindow.md
ts-basic-components-richeditor.md
ts-basic-components-richtext.md
ts-basic-components-scrollbar.md
ts-basic-components-search.md
ts-basic-components-select.md
ts-basic-components-slider.md
ts-basic-components-span.md
ts-basic-components-stepper.md
ts-basic-components-stepperitem.md
ts-basic-components-text.md
ts-basic-components-textarea.md
ts-basic-components-textclock.md
ts-basic-components-textinput.md
ts-basic-components-textpicker.md
ts-basic-components-texttimer.md
ts-basic-components-timepicker.md
ts-basic-components-toggle.md
ts-basic-components-web.md
ts-basic-components-xcomponent.md
ts-basic-gestures-longpressgesture.md
ts-basic-gestures-pangesture.md
ts-basic-gestures-pinchgesture.md
ts-basic-gestures-rotationgesture.md
ts-basic-gestures-swipegesture.md
ts-basic-gestures-tapgesture.md
ts-canvasrenderingcontext2d.md
ts-combined-gestures.md
ts-components-canvas-canvas.md
ts-components-canvas-canvasgradient.md
ts-components-canvas-canvaspattern.md
ts-components-canvas-imagebitmap.md
ts-components-canvas-imagedata.md
ts-components-canvas-matrix2d.md
ts-components-canvas-path2d.md
ts-components-offscreencanvas.md
ts-components-summary.md
ts-composite-components-chip.md
ts-composite-components-composelistitem.md
ts-composite-components-composetitlebar.md
ts-composite-components-dialog.md
ts-composite-components-editabletitlebar.md
ts-composite-components-filter.md
ts-composite-components-progressbutton.md
ts-composite-components-selectionmenu.md
ts-composite-components-selecttitlebar.md
ts-composite-components-splitlayout.md
ts-composite-components-subheader.md
ts-composite-components-swiperefresher.md
ts-composite-components-tabtitlebar.md
ts-composite-components-toolbar.md
ts-composite-components-treeview.md
ts-container-ability-component.md
ts-container-alphabet-indexer.md
ts-container-badge.md
ts-container-column.md
ts-container-columnsplit.md
ts-container-counter.md
ts-container-effectcomponent.md
ts-container-flex.md
ts-container-flowitem.md
ts-container-folderstack.md
ts-container-formlink.md
ts-container-grid.md
ts-container-gridcol.md
ts-container-gridcontainer.md
ts-container-griditem.md
ts-container-gridrow.md
ts-container-hyperlink.md
ts-container-list.md
ts-container-listitem.md
ts-container-listitemgroup.md
ts-container-navigator.md
ts-container-panel.md
ts-container-refresh.md
ts-container-relativecontainer.md
ts-container-row.md
ts-container-rowsplit.md
ts-container-scroll.md
ts-container-sidebarcontainer.md
ts-container-stack.md
ts-container-swiper.md
ts-container-tabcontent.md
ts-container-tabs.md
ts-container-ui-extension-component.md
ts-container-waterflow.md
ts-custom-component-api.md
ts-custom-component-lifecycle.md
ts-drawing-components-circle.md
ts-drawing-components-ellipse.md
ts-drawing-components-line.md
ts-drawing-components-path.md
ts-drawing-components-polygon.md
ts-drawing-components-polyline.md
ts-drawing-components-rect.md
ts-drawing-components-shape.md
ts-explicit-animatetoimmediately.md
ts-explicit-animation.md
ts-gesture-customize-judge.md
ts-gesture-settings.md
ts-keyframeAnimateTo.md
ts-media-components-video.md
ts-methods-action-sheet.md
ts-methods-alert-dialog-box.md
ts-methods-calendarpicker-dialog.md
ts-methods-custom-dialog-box.md
ts-methods-datepicker-dialog.md
ts-methods-menu.md
ts-methods-textpicker-dialog.md
ts-methods-timepicker-dialog.md
ts-motion-path-animation.md
ts-offscreencanvasrenderingcontext2d.md
ts-page-transition-animation.md
ts-particle-animation.md
ts-pixel-units.md
ts-security-components-locationbutton.md
ts-security-components-pastebutton.md
ts-security-components-savebutton.md
ts-securitycomponent-attributes.md
ts-state-management.md
ts-transition-animation-component.md
ts-transition-animation-geometrytransition.md
ts-transition-animation-shared-elements.md
ts-types.md
ts-universal-attributes-accessibility.md
ts-universal-attributes-attribute-modifier.md
ts-universal-attributes-background.md
ts-universal-attributes-border-image.md
ts-universal-attributes-border.md
ts-universal-attributes-click-effect.md
ts-universal-attributes-click.md
ts-universal-attributes-component-id.md
ts-universal-attributes-cursor.md
ts-universal-attributes-drag-drop.md
ts-universal-attributes-enable.md
ts-universal-attributes-expand-safe-area.md
ts-universal-attributes-flex-layout.md
ts-universal-attributes-focus.md
ts-universal-attributes-foreground-blur-style.md
ts-universal-attributes-foreground-color.md
ts-universal-attributes-gradient-color.md
ts-universal-attributes-grid.md
ts-universal-attributes-hit-test-behavior.md
ts-universal-attributes-hover-effect.md
ts-universal-attributes-image-effect.md
ts-universal-attributes-layout-constraints.md
ts-universal-attributes-location.md
ts-universal-attributes-menu.md
ts-universal-attributes-modal-transition.md
ts-universal-attributes-monopolize-events.md
ts-universal-attributes-obscured.md
ts-universal-attributes-on-child-touch-test.md
ts-universal-attributes-opacity.md
ts-universal-attributes-outline.md
ts-universal-attributes-overlay.md
ts-universal-attributes-polymorphic-style.md
ts-universal-attributes-popup.md
ts-universal-attributes-renderfit.md
ts-universal-attributes-restoreId.md
ts-universal-attributes-sharp-clipping.md
ts-universal-attributes-sheet-transition.md
ts-universal-attributes-size.md
ts-universal-attributes-text-style.md
ts-universal-attributes-touch-target.md
ts-universal-attributes-transformation.md
ts-universal-attributes-use-effect.md
ts-universal-attributes-visibility.md
ts-universal-attributes-z-order.md
ts-universal-component-area-change-event.md
ts-universal-component-visible-area-change-event.md
ts-universal-events-click.md
ts-universal-events-drag-drop.md
ts-universal-events-key.md
ts-universal-events-keyboardshortcut.md
ts-universal-events-show-hide.md
ts-universal-events-touch.md
ts-universal-focus-event.md
ts-universal-mouse-key.md
errorcodes
figures
js-service-widget-ui
native-apis
native-lib
Readme-CN.md
native-api-intro.md
syscap-list.md
syscap.md
security
task-management
telephony
tools
ui
web
webgl
windowmanager
Readme-CN.md
Samples.md
application-dev-guide-for-gitee.md
application-dev-guide.md
website.md
contribute
design
device-dev
figures
readme
release-notes
third-party-cases
third-party-components
Legal-Notices.md
OpenHarmony-Overview_zh.md
glossary.md
readme.md
website.md
.gitattributes
.gitignore
CODEOWNERS
DCO.txt
LICENSE
OAT.xml
README.md
README_zh.md
image.png
克隆/下载
ts-universal-attributes-polymorphic-style.md 6.15 KB
一键复制 编辑 原始数据 按行查看 历史

多态样式

设置组件不同状态下的样式。

说明:

从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

从API Version 11开始支持另一种写法attributeModifier,可根据开发者需要动态设置属性。

stateStyles

stateStyles(value: StateStyles)

设置组件不同状态的样式。

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
value StateStyles 设置组件不同状态的样式。

StateStyles接口说明

从API version 9开始,该接口支持在ArkTS卡片中使用。只支持通用属性

状态名称 类型 必填 描述
normal ()=>void 组件无状态时的样式。
pressed ()=>void 组件按下状态的样式。
disabled ()=>void 组件禁用状态的样式。
focused ()=>void 组件获焦状态的样式。
clicked ()=>void 组件点击状态的样式。
selected10+ ()=>void 组件选中状态的样式。

selected选中状态说明

  • 当前多态样式的选中状态样式依赖组件选中属性值,可以使用onClick修改属性值,或使用属性自带$$双向绑定功能。

  • 当前支持selected的组件及其参数/属性值:

    组件 支持的参数/属性 起始API版本
    Checkbox select 10
    CheckboxGroup selectAll 10
    Radio checked 10
    Toggle isOn 10
    ListItem selected 10
    GridItem selected 10
    MenuItem selected 10

示例

示例1

// xxx.ets
@Entry
@Component
struct StyleExample {
  @State isEnable: boolean = true

  @Styles pressedStyles():void {
    .backgroundColor("#ED6F21")
    .borderRadius(10)
    .borderStyle(BorderStyle.Dashed)
    .borderWidth(2)
    .borderColor("#33000000")
    .width(120)
    .height(30)
    .opacity(1)
  }

  @Styles disabledStyles():void {
    .backgroundColor("#E5E5E5")
    .borderRadius(10)
    .borderStyle(BorderStyle.Solid)
    .borderWidth(2)
    .borderColor("#2a4c1919")
    .width(90)
    .height(25)
    .opacity(1)
  }

  @Styles normalStyles():void {
    .backgroundColor("#0A59F7")
    .borderRadius(10)
    .borderStyle(BorderStyle.Solid)
    .borderWidth(2)
    .borderColor("#33000000")
    .width(100)
    .height(25)
    .opacity(1)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Text("normal")
        .fontSize(14)
        .fontColor(Color.White)
        .opacity(0.5)
        .stateStyles({
          normal: this.normalStyles,
        })
        .margin({ bottom: 20 })
        .textAlign(TextAlign.Center)
      Text("pressed")
        .backgroundColor("#0A59F7")
        .borderRadius(20)
        .borderStyle(BorderStyle.Dotted)
        .borderWidth(2)
        .borderColor(Color.Red)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)
        .fontColor(Color.White)
        .stateStyles({
          pressed: this.pressedStyles,
        })
        .margin({ bottom: 20 })
        .textAlign(TextAlign.Center)
      Text(this.isEnable == true ? "effective" : "disabled")
        .backgroundColor("#0A59F7")
        .borderRadius(20)
        .borderStyle(BorderStyle.Solid)
        .borderWidth(2)
        .borderColor(Color.Gray)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)
        .fontColor(Color.White)
        .enabled(this.isEnable)
        .stateStyles({
          disabled: this.disabledStyles,
        })
        .textAlign(TextAlign.Center)
      Text("control disabled")
        .onClick(() => {
          this.isEnable = !this.isEnable
          console.log(`${this.isEnable}`)
        })
    }
    .width(350).height(300)
  }
}

zh-cn_image_0000001188742468

示例2

// xxx.ets
@Entry
@Component
struct Index {
  @State value: boolean = false
  @State value2: boolean = false

  @Styles
  normalStyles(): void{
    .backgroundColor("#E5E5E1")
  }

  @Styles
  selectStyles(): void{
    .backgroundColor("#ED6F21")
    .borderWidth(2)
  }

  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Column() {
        Text('Radio1')
          .fontSize(25)
        Radio({ value: 'Radio1', group: 'radioGroup1' })
          .checked(this.value)
          .height(50)
          .width(50)
          .borderWidth(0)
          .borderRadius(30)
          .onClick(() => {
            this.value = !this.value
          })
          .stateStyles({
            normal: this.normalStyles,
            selected: this.selectStyles,
          })
      }
      .margin(30)

      Column() {
        Text('Radio2')
          .fontSize(25)
        Radio({ value: 'Radio2', group: 'radioGroup2' })
          .checked($$this.value2)
          .height(50)
          .width(50)
          .borderWidth(0)
          .borderRadius(30)
          .stateStyles({
            normal: this.normalStyles,
            selected: this.selectStyles,
          })
      }
      .margin(30)
    }.padding({ top: 30 })
  }
}

selected

Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
其他
1
https://gitee.com/openharmony/docs.git
git@gitee.com:openharmony/docs.git
openharmony
docs
docs
OpenHarmony-4.1-Beta1

搜索帮助