Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Switch ​

Switch 是对 antd-mobile Switch 的 Formily 适配，字段值为布尔值。

基础使用 ​

字段初始值和提交值均使用布尔值。接口采用 0 / 1 时，请在数据加载和提交阶段自行转换。

tsx
import { FormButtonGroup, FormItem, Submit, Switch } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    enabled: true,
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function SwitchBasic() {
  return (
    <FormProvider form={form}>
      <Field
        name="enabled"
        title="是否启用"
        decorator={[FormItem]}
        component={[Switch]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

状态与文案 ​

支持字段禁用状态、loading 状态，以及 checkedText / uncheckedText 开关文案。

tsx
import { FormItem, Switch } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    disabled: true,
    loading: false,
    withText: true,
  },
})

export default function SwitchStatus() {
  return (
    <FormProvider form={form}>
      <Field
        name="disabled"
        title="禁用状态"
        decorator={[FormItem]}
        component={[Switch, { disabled: true }]}
      />
      <Field
        name="loading"
        title="加载状态"
        decorator={[FormItem]}
        component={[Switch, { loading: true }]}
      />
      <Field
        name="withText"
        title="开关文案"
        decorator={[FormItem]}
        component={[Switch, { checkedText: '开', uncheckedText: '关' }]}
      />
    </FormProvider>
  )
}

异步切换 ​

设置 beforeChange(checked)，在点击时返回新的 Promise：resolve 后更新开关和表单值，返回 false 或 reject 时保持原值。等待期间自动显示加载状态并阻止重复点击。拒绝的 Promise 会被组件捕获，如需提示失败原因，可在回调内处理。

示例模拟 1.5 秒请求，分别展示成功与失败两种结果。点击“查看结果”可检查实际表单值。

tsx
import { FormButtonGroup, FormItem, Submit, Switch } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { Toast } from 'antd-mobile'
import { useState } from 'react'

// 模拟接口请求：resolve 表示成功，reject 表示失败。
async function requestSwitch(succeed: boolean) {
  await new Promise(resolve => setTimeout(resolve, 1500))
  if (!succeed) {
    Toast.show({ icon: 'fail', content: '切换失败，保持原状态' })
    throw new Error('切换失败')
  }
  Toast.show({ icon: 'success', content: '切换成功' })
}

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function SwitchAsync() {
  const [form] = useState(() => createForm({
    initialValues: {
      success: false,
      failure: true,
    },
  }))

  return (
    <FormProvider form={form}>
      <Field
        name="success"
        title="请求成功"
        decorator={[FormItem]}
        component={[Switch, { beforeChange: () => requestSwitch(true) }]}
      />
      <Field
        name="failure"
        title="请求失败"
        decorator={[FormItem]}
        component={[Switch, { beforeChange: () => requestSwitch(false) }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

搭配列表使用 ​

将开关放入 List 场景，形成贴近系统设置页的布局。

tsx
import { FormItem, Switch } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { List } from 'antd-mobile'

const form = createForm({
  initialValues: {
    notification: true,
    wifi: false,
  },
})

export default function SwitchList() {
  return (
    <FormProvider form={form}>
      <List>
        <Field
          name="notification"
          title="推送通知"
          decorator={[FormItem]}
          component={[Switch]}
        />
        <Field
          name="wifi"
          title="Wi-Fi"
          decorator={[FormItem]}
          component={[Switch]}
        />
      </List>
    </FormProvider>
  )
}

Formily 字段设置 readOnly 时保留开关状态，并禁用交互。

API ​

属性 ​

属性名类型描述默认值
beforeChangeFunction切换前的异步任务；resolve 允许切换，false 或 reject 阻止切换-

其余配置参考 Switch 官方文档。