前言

空状态是应用中数据为空时的展示界面，良好的空状态设计能够引导用户进行下一步操作，提升用户体验。一个优秀的空状态组件需要支持自定义图标、文案以及操作按钮。本文将详细讲解如何在Flutter和OpenHarmony平台上构建专业级的空状态组件。

Flutter空状态实现

首先实现通用的空状态组件。

class EmptyState extends StatelessWidget {
  final String? image;
  final IconData? icon;
  final String title;
  final String? description;
  final String? actionText;
  final VoidCallback? onAction;
  
  const EmptyState({
    Key? key,
    this.image,
    this.icon,
    required this.title,
    this.description,
    this.actionText,
    this.onAction,
  }) : super(key: key);

EmptyState支持图片或图标两种展示方式，title是必填的主标题，description是可选的描述文字，actionText和onAction定义操作按钮。

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.all(32),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (image != null)
              Image.asset(
                image!,
                width: 120,
                height: 120,
              )
            else if (icon != null)
              Icon(
                icon,
                size: 80,
                color: Colors.grey[400],
              ),
            SizedBox(height: 24),
            Text(
              title,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w600,
                color: Colors.grey[800],
              ),
              textAlign: TextAlign.center,
            ),

Center和Column实现垂直居中布局。优先显示图片，其次显示图标。标题使用较大字号和加粗字重。

            if (description != null) ...[
              SizedBox(height: 8),
              Text(
                description!,
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[600],
                ),
                textAlign: TextAlign.center,
              ),
            ],
            if (actionText != null && onAction != null) ...[
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: onAction,
                child: Text(actionText!),
              ),
            ],
          ],
        ),
      ),
    );
  }
}

描述文字使用较小字号和灰色。操作按钮引导用户进行下一步操作。展开运算符…将条件渲染的多个Widget添加到列表。

预定义空状态

在Flutter中定义常用的空状态：

class EmptyStates {
  static Widget noData({VoidCallback? onRefresh}) {
    return EmptyState(
      icon: Icons.inbox_outlined,
      title: '暂无数据',
      description: '这里空空如也',
      actionText: onRefresh != null ? '刷新' : null,
      onAction: onRefresh,
    );
  }
  
  static Widget noNetwork({required VoidCallback onRetry}) {
    return EmptyState(
      icon: Icons.wifi_off,
      title: '网络连接失败',
      description: '请检查网络设置后重试',
      actionText: '重试',
      onAction: onRetry,
    );
  }
  
  static Widget noSearch(String keyword) {
    return EmptyState(
      icon: Icons.search_off,
      title: '未找到相关结果',
      description: '换个关键词试试吧',
    );
  }
  
  static Widget noFriends({required VoidCallback onAdd}) {
    return EmptyState(
      icon: Icons.people_outline,
      title: '还没有好友',
      description: '快去添加好友吧',
      actionText: '添加好友',
      onAction: onAdd,
    );
  }
}

EmptyStates类预定义常用的空状态场景，包括无数据、网络错误、搜索无结果和无好友等。这种设计让空状态的使用更加便捷统一。

OpenHarmony ArkTS实现

鸿蒙系统上的空状态实现。

@Component
struct EmptyState {
  @Prop icon: Resource
  @Prop title: string = ''
  @Prop description: string = ''
  @Prop actionText: string = ''
  onAction: () => void = () => {}
  
  build() {
    Column() {
      Image(this.icon)
        .width(80)
        .height(80)
        .fillColor('#C7C7CC')
      
      Text(this.title)
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .fontColor('#3C3C43')
        .margin({ top: 24 })
        .textAlign(TextAlign.Center)

Column垂直排列图标、标题、描述和按钮。Image组件显示图标，fillColor设置灰色。

      if (this.description.length > 0) {
        Text(this.description)
          .fontSize(14)
          .fontColor('#8E8E93')
          .margin({ top: 8 })
          .textAlign(TextAlign.Center)
      }
      
      if (this.actionText.length > 0) {
        Button(this.actionText)
          .margin({ top: 24 })
          .onClick(() => this.onAction())
      }
    }
    .width('100%')
    .padding(32)
    .justifyContent(FlexAlign.Center)
  }
}

条件渲染描述文字和操作按钮。justifyContent设置垂直居中。

使用示例

在Flutter中使用空状态：

class FriendListPage extends StatelessWidget {
  final List<Friend> friends;
  final bool isLoading;
  
  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return Center(child: CircularProgressIndicator());
    }
    
    if (friends.isEmpty) {
      return EmptyStates.noFriends(
        onAdd: () => Navigator.pushNamed(context, '/add-friend'),
      );
    }
    
    return ListView.builder(
      itemCount: friends.length,
      itemBuilder: (context, index) => FriendListItem(friend: friends[index]),
    );
  }
}

根据加载状态和数据情况显示不同内容：加载中显示指示器，数据为空显示空状态，有数据显示列表。这种设计覆盖了所有可能的状态。

总结

本文详细介绍了空状态组件在Flutter和OpenHarmony两个平台上的实现。空状态是数据为空时的展示界面，需要提供清晰的提示和操作引导。两个平台的实现都采用了居中布局和条件渲染。在实际项目中，需要为不同场景设计对应的空状态内容。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net