前言

分布式流转能力本身很强，但入口文案如果只写“流转”，用户很难判断会发生什么。UI 需要说清楚目标设备、当前可用性和发起后的反馈。

这篇单独聊 跨设备 这个场景。重点不是堆 API，而是让分布式入口清楚说明目标设备、当前可用性和发起后的 UI 反馈。

为什么这个问题经常被写乱

分布式流转入口的 UI 提示 这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。

所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。

分布式入口要先解释当前状态

跨设备流转不是所有用户都熟。入口如果只写“流转”，很多人不知道点了会发生什么。我更倾向于把设备可用性、当前设备、目标动作一起展示清楚。

实操步骤

1. 用 deviceReady 表示是否发现可流转设备。
2. 入口文案区分“可流转”和“未发现设备”。
3. 点击前展示目标设备名称，降低用户不确定感。
4. 发起流转后用状态文案反馈，不让按钮看起来没反应。

分布式能力很强，但入口要讲人话：去哪台设备、现在能不能去、点了以后发生什么。

@Entry
@Component
struct ContinuationHintPage {
  @State deviceReady: boolean = true
  @State transferring: boolean = false
  @State targetDevice: string = 'MatePad Pro'
  @State hint: string = '附近发现可接续设备'

  private startTransfer() {
    if (!this.deviceReady || this.transferring) {
      return
    }
    this.transferring = true
    this.hint = `正在连接 ${this.targetDevice}`
    this.hint = `已向 ${this.targetDevice} 发起流转请求`
    this.transferring = false
  }

  build() {
    Column({ space: 16 }) {
      Text('跨设备继续浏览').fontSize(22).fontWeight(FontWeight.Bold)
      Column({ space: 8 }) {
        Text(this.deviceReady ? `可流转到 ${this.targetDevice}` : '暂未发现附近设备')
          .fontSize(17)
          .fontWeight(FontWeight.Medium)
        Text(this.deviceReady ? '当前页面、阅读位置和筛选条件会一起带过去。' : '请确认两台设备登录同一账号并开启相关能力。')
          .fontSize(13)
          .fontColor('#666666')
        Text(this.hint).fontSize(12).fontColor(this.deviceReady ? '#0A7F3F' : '#D92D20')
      }.alignItems(HorizontalAlign.Start).padding(14).backgroundColor('#FFFFFF').borderRadius(8)

      Row({ space: 10 }) {
        Button(this.transferring ? '流转中' : '发起流转')
          .layoutWeight(1)
          .enabled(this.deviceReady && !this.transferring)
          .onClick(() => this.startTransfer())
        Button(this.deviceReady ? '模拟离线' : '模拟在线')
          .layoutWeight(1)
          .onClick(() => {
            this.deviceReady = !this.deviceReady
            this.hint = this.deviceReady ? '附近发现可接续设备' : '当前没有可用设备'
          })
      }.width('100%')
    }.padding(16).height('100%').backgroundColor('#F5F7FA')
  }
}

把关键代码一段段拆开

• deviceReady 决定按钮启用和说明文案，入口不会在不可用时误导用户。
• targetDevice 明确告诉用户流转目标，减少“点了去哪”的困惑。
• transferring 防止重复发起，也给 UI 一个即时反馈。
• 示例按钮用于模拟在线离线，真实项目里由设备发现结果驱动。

分布式入口要降低不确定感

跨设备流转对用户来说不是普通按钮。点下去会去哪台设备、会带过去哪些内容、当前为什么不可用，都应该在入口附近说清楚。只写一个“流转”，用户很难判断这个动作是否安全。

示例用 deviceReady 控制入口可用性，用 targetDevice 展示目标设备，用 transferring 给发起后的即时反馈。这样按钮不会在没有设备时误导用户，点击后也不会像没有反应一样停住。

写在最后

真实项目里，设备发现、账号一致性、网络状态和权限状态都可能影响入口可用性。UI 不需要暴露所有技术细节，但要把用户能理解的原因讲明白，例如“暂未发现附近设备”或“请确认两台设备登录同一账号”。