ArkTS 实现手风琴

ArkTS（ArkUI TypeScript）是基于HarmonyOS的轻量级声明式UI框架，用于开发HarmonyOS应用。在ArkTS中实现手风琴（accordion）效果，可以通过组件的组合与状态管理来完成。手风琴通常包含多个可以展开和收起的面板，每个面板对应一个标题和内容区域，点击标题可以切换内容区域的显示状态。

以下是ArkTS实现手风琴的一个基本示例：

import { Text, Row, Column, Switch } from '@ohos.arkui.arkui';

export default {
    template: `
        <Column>
            <Row>
                <!-- 手风琴标题 -->
                <Column>
                    <Text>标题1</Text>
                    <Text>标题2</Text>
                    <Text>标题3</Text>
                </Column>
                <!-- 手风琴内容区域 -->
                <Column>
                    <Switch value="{{ expanded === 0 ? true : false }}">
                        <Text>内容1</Text>
                    </Switch>
                    <Switch value="{{ expanded === 1 ? true : false }}">
                        <Text>内容2</Text>
                    </Switch>
                    <Switch value="{{ expanded === 2 ? true : false }}">
                        <Text>内容3</Text>
                    </Switch>
                </Column>
            </Row>
        </Column>
    `,
    data: {
        expanded: -1 // 默认没有面板展开
    },
    onTitleClicked(index: number) {
        // 点击标题时，切换对应面板的展开状态
        if (this.expanded === index) {
            this.expanded = -1; // 如果已经展开，则关闭所有面板
        } else {
            this.expanded = index; // 否则展开当前面板
        }
    }
}

在上述示例中，我们使用了两列布局，左边是标题列，右边是内容列。每个标题对应一个内容区域。通过`Switch`组件包裹`Text`组件来表示内容区域，可以通过设置`Switch`的`value`属性来控制内容区域的显示和隐藏。点击标题时，会触发`onTitleClicked`方法，根据当前点击的标题索引切换`expanded`数据，从而控制对应内容区域的显示状态。