HarmonyOS 鸿蒙Next支持清空选中的内容吗

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next支持清空选中的内容吗

Select支持清空选中的内容吗

3 回复

参考以下代码：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct MainAbility {
  [@State](/user/State) selectedValue: string = '';

build() {
Column() {
// Select 组件
Select({
value: this.selectedValue,
options: [
{ label: ‘Option 1’, value: ‘1’ },
{ label: ‘Option 2’, value: ‘2’ },
{ label: ‘Option 3’, value: ‘3’ }
]
})
.onChange((value) => {
this.selectedValue = value;
})
.width(‘80%’)
.margin({ top: 20 });


  <span class="hljs-comment"><span class="hljs-comment">// 清空按钮</span></span>
  Button(<span class="hljs-string"><span class="hljs-string">'清空选中内容'</span></span>)
    .onClick(() =&gt; {
      <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectedValue = <span class="hljs-string"><span class="hljs-string">''</span></span>;
    })
    .width(<span class="hljs-string"><span class="hljs-string">'80%'</span></span>)
    .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)
    .margin({ top: <span class="hljs-number"><span class="hljs-number">20</span></span> })
    .backgroundColor(Color.Blue)
    .fontSize(<span class="hljs-number"><span class="hljs-number">20</span></span>)
    .fontColor(Color.White);
}
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.justifyContent(FlexAlign.Center)
.alignItems(ItemAlign.Center);

}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page48 {
  [@State](/user/State) text: string = "TTTTT"
  [@State](/user/State) index: number = -1
  [@State](/user/State) space: number = 8
  [@State](/user/State) arrowPosition: ArrowPosition = ArrowPosition.END
  [@State](/user/State) arr: ESObject[] = [{ value: 'aaa', icon: $r("app.media.app_icon") },
    { value: 'bbb', icon: $r("app.media.app_icon") },
    { value: 'ccc', icon: $r("app.media.app_icon") },
    { value: 'ddd', icon: $r("app.media.app_icon") }]

build() {
Column() {
Button(‘清空选中的内容’).onClick(() => {
if (this.arr[this.index]) {
this.arr.splice(this.index, 1)
this.text = “”
}
})
Button(‘清空全部内容’).onClick(() => {
this.arr.length = 0
this.text = “”
})
Button(‘添加内容’).onClick(() => {
this.arr.push({ value: ‘ddd’, icon: $r(“app.media.app_icon”) })
})
Select(this.arr)
.selected(this.index)
.value(this.text)
.font({ size: 16, weight: 500 })
.fontColor(’#182431’)
.selectedOptionFont({ size: 16, weight: 400 })
.optionFont({ size: 16, weight: 400 })
.space(this.space)
.arrowPosition(this.arrowPosition)
.menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
.optionWidth(200)
.optionHeight(300)
.onSelect((index: number, text?: string | undefined) => {
console.info(‘Select:’ + index)
this.index = index;
if (text) {
this.text = text;
}
})
}.width(‘100%’)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

HarmonyOS 鸿蒙Next支持清空选中的内容。你可以通过修改绑定到Select组件的State变量的值来实现这一点。将State变量的值设置为初始值或空值，即可清空Select组件中选中的内容。同时，确保在UI中正确地绑定了这个State变量。如果问题依旧没法解决请加我微信，我的微信是itying888。

回到顶部