ToggleButton

用于显示原生 Material3 切换按钮的 Jetpack Compose ToggleButton 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

Expo UI 提供四个切换按钮组件，与官方 Jetpack Compose 切换按钮 API 保持一致：ToggleButton、IconToggleButton、FilledIconToggleButton 和 OutlinedIconToggleButton。

安装

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

基本切换按钮

一个带有文本和图标内容的切换按钮。

BasicToggleButtonExample.tsx

import { useState } from 'react';
import { Host, ToggleButton, Text } from '@expo/ui/jetpack-compose';

export default function BasicToggleButtonExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <ToggleButton checked={checked} onCheckedChange={setChecked}>
        <Text>收藏</Text>
      </ToggleButton>
    </Host>
  );
}

图标切换按钮变体

使用不同的图标切换按钮组件来传达不同层级的强调。

IconToggleButtonVariantsExample.tsx

import { useState } from 'react';
import {
  Host,
  IconToggleButton,
  FilledIconToggleButton,
  OutlinedIconToggleButton,
  Icon,
  Row,
} from '@expo/ui/jetpack-compose';

const starIcon = require('./assets/star.png');

export default function IconToggleButtonVariantsExample() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(true);
  const [checked3, setChecked3] = useState(false);

  return (
    <Host matchContents>
      <Row horizontalArrangement={{ spacedBy: 8 }}>
        <IconToggleButton checked={checked1} onCheckedChange={setChecked1}>
          <Icon source={starIcon} size={24} />
        </IconToggleButton>
        <FilledIconToggleButton checked={checked2} onCheckedChange={setChecked2}>
          <Icon source={starIcon} size={24} />
        </FilledIconToggleButton>
        <OutlinedIconToggleButton checked={checked3} onCheckedChange={setChecked3}>
          <Icon source={starIcon} size={24} />
        </OutlinedIconToggleButton>
      </Row>
    </Host>
  );
}

自定义颜色

使用 colors 属性覆盖选中和未选中状态的颜色。

CustomColorsToggleButtonExample.tsx

import { useState } from 'react';
import { Host, ToggleButton, Text } from '@expo/ui/jetpack-compose';

export default function CustomColorsToggleButtonExample() {
  const [checked, setChecked] = useState(true);

  return (
    <Host matchContents>
      <ToggleButton
        checked={checked}
        onCheckedChange={setChecked}
        colors={{
          checkedContainerColor: '#4CAF50',
          checkedContentColor: '#FFFFFF',
          containerColor: '#E0E0E0',
          contentColor: '#333333',
        }}>
        <Text>{checked ? 'ON' : 'OFF'}</Text>
      </ToggleButton>
    </Host>
  );
}

禁用的切换按钮

DisabledToggleButtonExample.tsx

import { Host, ToggleButton, Text } from '@expo/ui/jetpack-compose';

export default function DisabledToggleButtonExample() {
  return (
    <Host matchContents>
      <ToggleButton checked={false} enabled={false}>
        <Text>禁用</Text>
      </ToggleButton>
    </Host>
  );
}

API

import {
  ToggleButton,
  IconToggleButton,
  FilledIconToggleButton,
  OutlinedIconToggleButton,
} from '@expo/ui/jetpack-compose';

Components

`FilledIconToggleButton`

Type: React.Element<ToggleButtonProps>

A filled icon toggle button with a solid background.

`IconToggleButton`

Type: React.Element<ToggleButtonProps>

An icon toggle button with no background.

`OutlinedIconToggleButton`

Type: React.Element<ToggleButtonProps>

An outlined icon toggle button with a border and no fill.

`ToggleButton`

Type: React.Element<ToggleButtonProps>

A toggle button component that can be toggled on and off.

ToggleButtonProps

`checked`

Type: boolean

Whether the toggle button is checked.

`children`

Type: ReactNode

Content to display inside the toggle button.

`colors`

Optional • Type: ToggleButtonColors

Colors for toggle button elements.

`enabled`

Optional • Type: boolean • Default: true

Whether the button is enabled for user interaction.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onCheckedChange`

Optional • Type: (checked: boolean) => void

Callback that is called when the checked state changes.

`ToggleButton.DefaultIconSize`

Type: React.Element<number>

Types

`ToggleButtonColors`

Colors for toggle button elements.

Property	Type	Description
checkedContainerColor(optional)	`ColorValue`	-
checkedContentColor(optional)	`ColorValue`	-
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-
disabledContainerColor(optional)	`ColorValue`	-
disabledContentColor(optional)	`ColorValue`	-