HarmonyOS鸿蒙Next中使用@State + if/else + visibility实现多状态页面（加载中/成功/空数据/错误）的统一管理

使用场景

在很多业务场景下，我们都需要可能碰到比如商品页无商品、消息页无消息、文章加载失败等各种空或者异常的业务情况 ，但有时候我们开发会将状态各自设定，导致比较分散混乱。

实现思路

采用状态机的模式，我们用一个枚举 + 单一状态变量统一管理所有页面状态。

enum PageStatus {
  Loading,
  Success,
  Empty,
  Error
}

然后在页面中使用时，只依赖于单一的状态源。以此进行解耦

完整代码

enum PageStatus {
  Loading,
  Success,
  Empty,
  Error
}

@Entry
@Component
struct OrderListPage {
  @State status: PageStatus = PageStatus.Loading;
  @State orders: string[] = [];
  @State errorMessage: string = '';

  // 模拟加载订单数据
  aboutToAppear() {
    this.loadData();
  }

  private async loadData() {
    this.status = PageStatus.Loading;

    try {
      // 模拟网络延迟
      // await new Promise(resolve => setTimeout(resolve, 1500));

      // 模拟不同结果（可注释某行测试不同状态）
      // const mockData = ['订单 #20251201', '订单 #20251202']; // 正常数据
      // const mockData: string[] = []; // 取消注释此行可测试“空数据”
      throw new Error('服务器繁忙'); // 取消注释此行可测试“错误”

      // if (mockData.length === 0) {
      //   this.status = PageStatus.Empty;
      // } else {
      //   this.orders = mockData;
      //   this.status = PageStatus.Success;
      // }
    } catch (e) {
      this.errorMessage = e.message || '加载失败，请重试';
      this.status = PageStatus.Error;
    }
  }

  build() {
    Column({ space: 20 }) {
      Text('我的订单')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)

      // 统一状态渲染
      if (this.status === PageStatus.Loading) {
        Column() {
          Text('加载中...')
            .fontColor('#999')
            .fontSize(14)
        }
        .margin({ top: 100 })
      } else if (this.status === PageStatus.Success) {
        List({ space: 10 }) {
          ForEach(
            this.orders,
            (order: string) => {
              ListItem() {
                Text(order)
                  .padding(15)
                  .width('100%')
                  .borderRadius(8)
                  .backgroundColor('#F8F9FA')
              }
            }
          )
        }
        .width('100%')
        .height('60%')
      } else if (this.status === PageStatus.Empty) {
        Column() {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .margin({ bottom: 15 })
            .visibility(Visibility.Visible) // 图标占位（可选）
          Text('暂无订单')
            .fontColor('#999')
            .fontSize(16)
          Button('去逛逛')
            .width(120)
            .height(40)
            .margin({ top: 15 })
            .backgroundColor('#007DFF')
            .onClick(() => {
              // 跳转首页等

            })
        }
        .margin({ top: 100 })
      } else if (this.status === PageStatus.Error) {
        Column() {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .margin({ bottom: 15 })
          Text(this.errorMessage)
            .fontColor(Color.Red)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .width('80%')
          Button('重试')
            .width(120)
            .height(40)
            .margin({ top: 20 })
            .backgroundColor('#007DFF')
            .onClick(() => {
              this.loadData(); // 重新加载
            })
        }
        .margin({ top: 100 })
      }
    }
    .padding(25)
    .width('100%')
    .height('100%')
  }
}

function ProgressIndicator() {
  throw new Error('Function not implemented.');
}

实现效果

通过统一的状态机来显示不 同状态下的场景。