一、项目概述

1.1 应用背景

分布式设备协同是鸿蒙操作系统的核心差异化特性，它打破了传统设备间的壁垒，实现了多设备间的无缝协作。在鸿蒙生态中，用户可以在手机、平板、电脑、智慧屏、手表、耳机等设备间自由流转任务，实现真正的全场景体验。

本文以「鸿蒙特性展示台」应用为例，详细讲解如何使用 Flutter 实现分布式设备协同的 UI 界面和状态管理，包括设备列表展示、连接状态管理、跨设备操作面板以及多屏协同演示等功能。

1.2 技术栈

技术点	说明
StatefulWidget	有状态组件，用于管理设备连接状态和选中状态
setState	状态更新方法，触发组件重新渲染
Switch	开关组件，用于控制分布式连接的开启和关闭
GestureDetector	手势检测组件，用于设备卡片的点击交互
Wrap	流式布局组件，用于设备列表的自适应排列
Container	基础容器组件，用于构建卡片布局
BoxDecoration	装饰器，用于设置背景、圆角、阴影等
DeviceInfo	自定义数据类，用于存储设备信息

1.3 界面效果

应用的分布式协同页面展示了以下核心功能区域：

┌─────────────────────────────────────────────────────────────────┐
│                      分布式连接状态                              │
│  ┌──────┐  │ 分布式连接已建立                                   │
│  │ 🔗   │  │ 已连接 5 台设备，可进行跨设备协同操作             │
│  └──────┘  │                      ────────────┐               │
│            │                                 ●               │
├─────────────────────────────────────────────────────────────────┤
│                      设备列表                                   │
│  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐           │
│  │    📱       │ │    📱        │ │    💻        │           │
│  │    手机      │ │    平板      │ │    电脑      │           │
│  │  Mate 60 Pro │ │  MatePad Pro │ │  MateBook X │           │
│  │     在线     │ │     在线     │ │     在线     │           │
│  └──────────────┘ └──────────────┘ └──────────────┘           │
│  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐           │
│  │    📺       │ │    ⌚        │ │    🎧        │           │
│  │   智慧屏     │ │    手表      │ │    耳机      │           │
│  │    Vision    │ │   Watch 4   │ │ FreeBuds Pro│           │
│  │     离线     │ │     在线     │ │     在线     │           │
│  └──────────────┘ └──────────────┘ └──────────────┘           │
├─────────────────────────────────────────────────────────────────┤
│                      跨设备协同操作                              │
│  ┌────────────────────┐ ┌────────────────────┐                 │
│  │   📋 跨设备粘贴    │ │   📺 投屏          │                 │
│  │   将手机复制的内容 │ │   将手机屏幕投射    │                 │
│  │   粘贴到其他设备   │ │   到智慧屏         │                 │
│  └────────────────────┘ └────────────────────┘                 │
│  ┌────────────────────┐ ┌────────────────────┐                 │
│  │   📁 文件共享      │ │   📞 通话流转       │                 │
│  │   在设备间快速     │ │   在设备间切换      │                 │
│  │   传输文件         │ │   通话             │                 │
│  └────────────────────┘ └────────────────────┘                 │
├─────────────────────────────────────────────────────────────────┤
│                      多屏协同演示                                │
│  ┌──────────┐ ──── ┌──────────────┐                            │
│  │   手机   │      │    平板      │                            │
│  └──────────┘      └──────────────┘                            │
│        │                                                       │
│        └───── ┌──────────────────────┐                         │
│               │        电脑          │                         │
│               └──────────────────────┘                         │
│  ✓ 所有设备已同步，可进行跨设备操作                              │
└─────────────────────────────────────────────────────────────────┘

---

二、核心代码解析

2.1 DistributedDevicePage 主组件

这是分布式协同页面的核心组件，采用 StatefulWidget 来管理连接状态和设备选中状态：

class DistributedDevicePage extends StatefulWidget {
  const DistributedDevicePage({super.key});

  @override
  State<DistributedDevicePage> createState() => _DistributedDevicePageState();
}

class _DistributedDevicePageState extends State<DistributedDevicePage> {
  String _selectedDevice = '手机';
  bool _isConnected = false;

  final List<DeviceInfo> _devices = [
    DeviceInfo('手机', 'Huawei Mate 60 Pro', '在线', Icons.smartphone, const Color(0xFF0A59F7)),
    DeviceInfo('平板', 'Huawei MatePad Pro', '在线', Icons.tablet, const Color(0xFF00B42A)),
    DeviceInfo('电脑', 'Huawei MateBook X', '在线', Icons.laptop, const Color(0xFF722ED1)),
    DeviceInfo('智慧屏', 'Huawei Vision', '离线', Icons.tv, const Color(0xFF999999)),
    DeviceInfo('手表', 'Huawei Watch 4', '在线', Icons.watch, const Color(0xFFFA8C16)),
    DeviceInfo('耳机', 'Huawei FreeBuds Pro', '在线', Icons.headphones, const Color(0xFF13C2C2)),
  ];

  void _toggleConnection(bool value) {
    setState(() {
      _isConnected = value;
    });
  }

  void _selectDevice(String deviceName) {
    setState(() {
      _selectedDevice = deviceName;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildConnectionStatus(),
          const SizedBox(height: 20),
          _buildDeviceList(),
          const SizedBox(height: 20),
          _buildDistributedPanel(),
          const SizedBox(height: 20),
          _buildMultiScreenDemo(),
        ],
      ),
    );
  }
}

代码解析：

1. 状态定义：

   • _selectedDevice：记录当前选中的设备名称
   • _isConnected：记录分布式连接的状态（已连接/未连接）

2. 设备数据：

   • 使用 List<DeviceInfo> 存储所有设备的信息，包括名称、型号、状态、图标和颜色
   • 设备列表包含手机、平板、电脑、智慧屏、手表和耳机六种鸿蒙生态设备

3. 状态更新方法：

   • _toggleConnection：切换分布式连接状态
   • _selectDevice：选择设备时更新选中状态

4. 页面布局：

   • 使用 SingleChildScrollView 包裹整个页面，支持滚动
   • 使用 Column 垂直排列四个主要功能区域：连接状态、设备列表、协同操作面板和多屏演示

2.2 DeviceInfo 数据类

这是一个简单的数据类，用于封装设备信息：

class DeviceInfo {
  final String name;
  final String model;
  final String status;
  final IconData icon;
  final Color color;

  DeviceInfo(this.name, this.model, this.status, this.icon, this.color);
}

代码解析：

• name：设备名称（如手机、平板）
• model：设备型号（如 Huawei Mate 60 Pro）
• status：设备状态（在线/离线）
• icon：设备图标
• color：设备主题颜色

这种数据类的设计使得设备信息的管理更加清晰，便于后续扩展和维护。

2.3 连接状态组件

连接状态组件展示分布式连接的当前状态，并提供开关按钮控制连接：

Widget _buildConnectionStatus() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: _isConnected ? const Color(0xFFE8F5E9) : const Color(0xFFFFEBEE),
      borderRadius: BorderRadius.circular(16),
      border: Border.all(
        color: _isConnected ? const Color(0xFF00B42A) : const Color(0xFFFA5151),
        width: 1,
      ),
    ),
    child: Row(
      children: [
        Container(
          width: 48,
          height: 48,
          decoration: BoxDecoration(
            color: _isConnected ? const Color(0xFF00B42A) : const Color(0xFFFA5151),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Icon(
            _isConnected ? Icons.link : Icons.link_off,
            color: Colors.white,
            size: 24,
          ),
        ),
        const SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                _isConnected ? '分布式连接已建立' : '分布式连接未建立',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w600,
                  color: _isConnected ? const Color(0xFF00B42A) : const Color(0xFFFA5151),
                ),
              ),
              const SizedBox(height: 4),
              Text(
                _isConnected
                    ? '已连接 5 台设备，可进行跨设备协同操作'
                    : '点击开关建立分布式连接，体验多设备协同',
                style: const TextStyle(
                  fontSize: 14,
                  color: Color(0xFF666666),
                ),
              ),
            ],
          ),
        ),
        Switch(
          value: _isConnected,
          onChanged: _toggleConnection,
          activeThumbColor: const Color(0xFF00B42A),
          activeTrackColor: const Color(0xFFA5D6A7),
          inactiveThumbColor: const Color(0xFFFA5151),
          inactiveTrackColor: const Color(0xFFFFCDD2),
        ),
      ],
    ),
  );
}

代码解析：

1. 动态样式：

   • 根据 _isConnected 状态动态切换背景颜色（绿色表示已连接，红色表示未连接）
   • 边框颜色也随状态变化，增强视觉反馈

2. 图标展示：

   • 使用圆形容器包裹图标，连接状态使用 Icons.link，断开状态使用 Icons.link_off
   • 图标颜色为白色，背景色与状态保持一致

3. 文本内容：

   • 标题文本根据状态显示不同内容
   • 描述文本提供更详细的连接信息

4. Switch 组件：

   • 自定义开关的激活和未激活状态颜色
   • onChanged 回调触发 _toggleConnection 方法更新状态

2.4 设备列表组件

设备列表组件展示所有可用设备，并支持点击选中：

Widget _buildDeviceList() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withValues(alpha: 0.06),
          blurRadius: 12,
          offset: const Offset(0, 4),
        ),
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '设备列表',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w600,
            color: Color(0xFF1A1A1A),
          ),
        ),
        const SizedBox(height: 16),
        Wrap(
          spacing: 12,
          runSpacing: 12,
          children: _devices.map((device) {
            return _buildDeviceCard(device);
          }).toList(),
        ),
      ],
    ),
  );
}

代码解析：

1. 容器样式：

   • 使用白色背景和圆角设计
   • 添加阴影效果增强立体感

2. 标题：

   • 显示"设备列表"标题，使用大号字体和加粗样式

3. Wrap 布局：

   • 使用 Wrap 组件实现设备卡片的自适应排列
   • spacing 和 runSpacing 分别控制水平和垂直间距
   • 通过 map 方法遍历设备列表，生成设备卡片

2.5 设备卡片组件

设备卡片组件展示单个设备的详细信息，并支持点击交互：

Widget _buildDeviceCard(DeviceInfo device) {
  final isOnline = device.status == '在线';
  final isSelected = _selectedDevice == device.name;

  return GestureDetector(
    onTap: () {
      if (isOnline) {
        _selectDevice(device.name);
      }
    },
    child: Container(
      width: 140,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: isSelected ? const Color(0xFF0A59F7).withValues(alpha: 0.06) : Colors.white,
        borderRadius: BorderRadius.circular(14),
        border: Border.all(
          color: isSelected ? const Color(0xFF0A59F7) : const Color(0xFFF0F0F0),
          width: 1,
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.04),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          Container(
            width: 44,
            height: 44,
            decoration: BoxDecoration(
              color: isOnline ? device.color.withValues(alpha: 0.15) : const Color(0xFFF0F0F0),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Icon(
              device.icon,
              color: isOnline ? device.color : const Color(0xFFCCCCCC),
              size: 22,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            device.name,
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w600,
              color: isOnline ? const Color(0xFF1A1A1A) : const Color(0xFFCCCCCC),
            ),
          ),
          const SizedBox(height: 4),
          Text(
            device.model,
            style: TextStyle(
              fontSize: 11,
              color: isOnline ? const Color(0xFF999999) : const Color(0xFFE0E0E0),
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(height: 8),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
            decoration: BoxDecoration(
              color: isOnline ? const Color(0xFFE8F5E9) : const Color(0xFFF5F5F5),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Text(
              device.status,
              style: TextStyle(
                fontSize: 10,
                fontWeight: FontWeight.w500,
                color: isOnline ? const Color(0xFF00B42A) : const Color(0xFF999999),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

代码解析：

1. 状态判断：

   • isOnline：根据设备状态判断是否在线
   • isSelected：判断当前设备是否被选中

2. 手势检测：

   • 使用 GestureDetector 包裹卡片，实现点击交互
   • 只有在线设备才能被选中，离线设备点击无效

3. 卡片样式：

   • 选中状态使用蓝色边框和浅蓝色背景
   • 未选中状态使用灰色边框和白色背景
   • 卡片宽度固定为 140px，保持统一的视觉效果

4. 图标区域：

   • 使用圆形容器包裹设备图标
   • 在线设备使用设备主题颜色，离线设备使用灰色

5. 文本信息：

   • 设备名称使用较大字体和加粗样式
   • 设备型号使用小号字体，支持省略号处理
   • 状态标签使用胶囊形状，在线显示绿色，离线显示灰色

2.6 跨设备协同操作面板

协同操作面板展示可用的跨设备操作功能：

Widget _buildDistributedPanel() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withValues(alpha: 0.06),
          blurRadius: 12,
          offset: const Offset(0, 4),
        ),
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '跨设备协同操作',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w600,
            color: Color(0xFF1A1A1A),
          ),
        ),
        const SizedBox(height: 16),
        Row(
          children: [
            Expanded(
              child: _buildActionPanel(
                icon: Icons.content_copy,
                title: '跨设备粘贴',
                description: '将手机复制的内容粘贴到其他设备',
                color: const Color(0xFF0A59F7),
                enabled: _isConnected,
              ),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: _buildActionPanel(
                icon: Icons.cast,
                title: '投屏',
                description: '将手机屏幕投射到智慧屏',
                color: const Color(0xFF00B42A),
                enabled: _isConnected,
              ),
            ),
          ],
        ),
        const SizedBox(height: 12),
        Row(
          children: [
            Expanded(
              child: _buildActionPanel(
                icon: Icons.file_copy,
                title: '文件共享',
                description: '在设备间快速传输文件',
                color: const Color(0xFF722ED1),
                enabled: _isConnected,
              ),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: _buildActionPanel(
                icon: Icons.phone,
                title: '通话流转',
                description: '在设备间切换通话',
                color: const Color(0xFFFA8C16),
                enabled: _isConnected,
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

代码解析：

1. 面板标题：

   • 显示"跨设备协同操作"标题

2. 操作面板布局：

   • 使用两行两列的布局展示四个协同操作
   • 每个操作面板使用 Expanded 实现等宽分布

3. 操作状态控制：

   • 通过 enabled 参数控制操作是否可用
   • 只有建立分布式连接后，操作才可用

2.7 操作面板组件

操作面板组件展示单个协同操作功能：

Widget _buildActionPanel({
  required IconData icon,
  required String title,
  required String description,
  required Color color,
  required bool enabled,
}) {
  return Container(
    padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: enabled ? color.withValues(alpha: 0.06) : const Color(0xFFF5F5F5),
      borderRadius: BorderRadius.circular(14),
      border: Border.all(
        color: enabled ? color.withValues(alpha: 0.3) : const Color(0xFFE8E8E8),
        width: 1,
      ),
    ),
    child: Column(
      children: [
        Icon(
          icon,
          color: enabled ? color : const Color(0xFFCCCCCC),
          size: 28,
        ),
        const SizedBox(height: 10),
        Text(
          title,
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w600,
            color: enabled ? const Color(0xFF1A1A1A) : const Color(0xFF999999),
          ),
        ),
        const SizedBox(height: 4),
        Text(
          description,
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 12,
            color: enabled ? const Color(0xFF999999) : const Color(0xFFCCCCCC),
          ),
        ),
      ],
    ),
  );
}

代码解析：

1. 参数设计：

   • icon：操作图标
   • title：操作名称
   • description：操作描述
   • color：操作主题颜色
   • enabled：操作是否可用

2. 动态样式：

   • 可用状态使用主题颜色的浅色背景和边框
   • 不可用状态使用灰色背景和边框

3. 图标和文本：

   • 图标大小为 28px，颜色随状态变化
   • 标题使用加粗样式，描述使用小号字体

2.8 多屏协同演示组件

多屏协同演示组件展示设备间的协同关系：

Widget _buildMultiScreenDemo() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withValues(alpha: 0.06),
          blurRadius: 12,
          offset: const Offset(0, 4),
        ),
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '多屏协同演示',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w600,
            color: Color(0xFF1A1A1A),
          ),
        ),
        const SizedBox(height: 16),
        _buildMultiScreenLayout(),
      ],
    ),
  );
}

代码解析：

• 使用容器包裹多屏布局，添加阴影和圆角效果
• 标题显示"多屏协同演示"

2.9 多屏布局组件

多屏布局组件展示设备间的连接关系图：

Widget _buildMultiScreenLayout() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: const Color(0xFFF5F7FA),
      borderRadius: BorderRadius.circular(14),
    ),
    child: Column(
      children: [
        Row(
          children: [
            Expanded(
              flex: 2,
              child: _buildScreenDevice('手机', Icons.smartphone, const Color(0xFF0A59F7)),
            ),
            Container(
              width: 2,
              height: 80,
              color: const Color(0xFFDDDDDD),
              margin: const EdgeInsets.symmetric(horizontal: 16),
            ),
            Expanded(
              flex: 3,
              child: _buildScreenDevice('平板', Icons.tablet, const Color(0xFF00B42A)),
            ),
          ],
        ),
        const SizedBox(height: 16),
        Row(
          children: [
            Container(
              width: 2,
              height: 60,
              color: const Color(0xFFDDDDDD),
              margin: const EdgeInsets.symmetric(horizontal: 16),
            ),
            Expanded(
              flex: 5,
              child: _buildScreenDevice('电脑', Icons.laptop, const Color(0xFF722ED1)),
            ),
          ],
        ),
        const SizedBox(height: 16),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          decoration: BoxDecoration(
            color: const Color(0xFFE8F5E9),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Row(
            children: [
              const Icon(
                Icons.check_circle,
                color: Color(0xFF00B42A),
                size: 20,
              ),
              const SizedBox(width: 8),
              Text(
                _isConnected
                    ? '所有设备已同步，可进行跨设备操作'
                    : '请开启分布式连接以体验多屏协同',
                style: TextStyle(
                  fontSize: 14,
                  color: _isConnected ? const Color(0xFF00B42A) : const Color(0xFF999999),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

代码解析：

1. 布局结构：

   • 第一行：手机和平板，使用垂直线条连接
   • 第二行：从手机下方连接到电脑
   • 底部：状态提示信息

2. Flex 布局：

   • 使用 flex 参数控制设备卡片的宽度比例
   • 手机 flex 为 2，平板 flex 为 3，电脑 flex 为 5

3. 连接线：

   • 使用 Container 实现垂直线条
   • 线条颜色为灰色，宽度为 2px

4. 状态提示：

   • 根据连接状态显示不同的提示信息
   • 已连接显示绿色对勾和成功提示
   • 未连接显示灰色提示

2.10 屏幕设备组件

屏幕设备组件展示单个设备的简化信息：

Widget _buildScreenDevice(String name, IconData icon, Color color) {
  return Container(
    padding: const EdgeInsets.all(14),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12),
      border: Border.all(
        color: color.withValues(alpha: 0.3),
        width: 2,
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withValues(alpha: 0.04),
          blurRadius: 6,
          offset: const Offset(0, 2),
        ),
      ],
    ),
    child: Row(
      children: [
        Container(
          width: 36,
          height: 36,
          decoration: BoxDecoration(
            color: color.withValues(alpha: 0.15),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Icon(
            icon,
            color: color,
            size: 20,
          ),
        ),
        const SizedBox(width: 12),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              name,
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: Color(0xFF1A1A1A),
              ),
            ),
            Text(
              '已连接',
              style: TextStyle(
                fontSize: 12,
                color: color,
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

代码解析：

• 使用浅色边框和阴影效果
• 图标使用设备主题颜色
• 显示设备名称和连接状态

---

三、状态管理设计模式

3.1 简单状态管理模式

本项目使用 Flutter 内置的 StatefulWidget 和 setState 进行状态管理，这是最简单也是最常用的状态管理模式。

适用场景：

• 状态只在单个组件内部使用
• 状态变更逻辑简单
• 不需要跨组件共享状态

核心原理：

┌──────────────────────────────────────────────────────────────┐
│                    StatefulWidget                            │
│  ┌──────────────────┐    setState()     ┌──────────────────┐ │
│  │   State 类       │ ────────────────→ │   build() 方法   │ │
│  │  (保存状态数据)   │                    │  (重建UI)        │ │
│  └──────────────────┘                    └──────────────────┘ │
└──────────────────────────────────────────────────────────────┘

当调用 setState 时，Flutter 会标记该组件为"脏"状态，然后在下一帧调用 build 方法重新渲染组件。

3.2 状态管理最佳实践

1. 状态最小化：

   • 只保存必要的状态数据
   • 避免保存可以通过计算得到的数据

2. 状态分离：

   • 将状态和 UI 逻辑分离
   • 使用私有方法处理状态更新

3. 不可变性：

   • 对于复杂数据结构，使用不可变对象
   • 避免直接修改状态数据

4. 性能优化：

   • 使用 const 构造函数减少不必要的重建
   • 对于复杂列表，使用 ListView.builder 延迟构建

3.3 状态管理扩展方案

当应用规模扩大时，可以考虑使用以下状态管理方案：

方案	适用场景	优点	缺点
Provider	中等规模应用	简单易用，与 Flutter 深度集成	状态追踪不够直观
Riverpod	中大型应用	类型安全，依赖注入	学习曲线较陡
Bloc	大型应用	逻辑清晰，易于测试	代码量较大
GetX	快速开发	功能丰富，开箱即用	过于"魔法"

---

四、分布式协同设计要点

4.1 设备状态管理

在分布式协同场景中，设备状态的管理至关重要：

1. 在线状态：

   • 实时更新设备的在线状态
   • 使用不同颜色区分在线和离线设备

2. 选中状态：

   • 支持单选设备
   • 选中状态要有明显的视觉反馈

3. 连接状态：

   • 全局连接状态的管理
   • 连接状态影响所有协同操作的可用性

4.2 跨设备操作设计

跨设备操作需要考虑以下设计要点：

1. 操作可用性：

   • 只有建立连接后才能使用跨设备操作
   • 未连接时操作面板应显示为禁用状态

2. 操作反馈：

   • 操作执行后应显示反馈信息
   • 支持加载状态的显示

3. 错误处理：

   • 处理设备断开连接的情况
   • 提供友好的错误提示

4.3 多屏协同可视化

多屏协同的可视化设计需要：

1. 设备关系展示：

   • 清晰展示设备间的连接关系
   • 使用线条表示设备间的数据流

2. 设备状态同步：

   • 实时更新设备的连接状态
   • 显示设备间的同步状态

3. 交互体验：

   • 支持点击设备查看详情
   • 提供设备切换的动画效果

---

五、鸿蒙分布式特性对比

5.1 鸿蒙分布式 vs 传统多设备协同

特性	鸿蒙分布式	传统多设备协同
设备发现	自动发现同一网络下的设备	需要手动搜索和配对
连接方式	分布式软总线，低延迟	蓝牙/WiFi直连，延迟较高
数据共享	分布式数据管理，实时同步	文件传输，需要手动操作
任务流转	无缝流转，状态保持	手动切换，状态丢失
协同能力	多设备同时协作	一对一协作

5.2 鸿蒙分布式核心技术

1. 分布式软总线：

   • 统一的设备连接协议
   • 支持多种传输方式（WiFi、蓝牙、NFC）
   • 自动选择最优路径

2. 分布式数据管理：

   • 数据在设备间实时同步
   • 支持跨设备事务处理
   • 保证数据一致性

3. 分布式任务调度：

   • 任务可以在设备间自由流转
   • 保持任务状态的连续性
   • 支持多设备协同完成任务

---

六、扩展知识

6.1 Flutter 状态管理深入

StatefulWidget 生命周期：

createState() → initState() → didChangeDependencies() → build()
                ↓
           setState() → build()
                ↓
         didUpdateWidget() → build()
                ↓
         deactivate() → dispose()

生命周期方法说明：

• createState()：创建状态对象
• initState()：初始化状态，只调用一次
• didChangeDependencies()：依赖变化时调用
• build()：构建 UI，每次状态变化都会调用
• setState()：标记状态变更，触发 rebuild
• didUpdateWidget()：组件更新时调用
• deactivate()：组件从树中移除时调用
• dispose()：释放资源，只调用一次

6.2 自定义数据类设计

在 Flutter 中，自定义数据类通常使用以下模式：

class DeviceInfo {
  final String name;
  final String model;
  final String status;
  final IconData icon;
  final Color color;

  const DeviceInfo(
    this.name,
    this.model,
    this.status,
    this.icon,
    this.color,
  );

  DeviceInfo copyWith({
    String? name,
    String? model,
    String? status,
    IconData? icon,
    Color? color,
  }) {
    return DeviceInfo(
      name ?? this.name,
      model ?? this.model,
      status ?? this.status,
      icon ?? this.icon,
      color ?? this.color,
    );
  }
}

copyWith 方法的作用：

• 方便创建对象的副本
• 只修改需要变更的属性
• 保持其他属性不变

6.3 响应式布局技巧

在分布式设备协同页面中，使用了多种响应式布局技巧：

1. Wrap 布局：

   • 自动换行，适应不同屏幕宽度
   • 适合展示数量不确定的卡片

2. Expanded 布局：

   • 均分剩余空间
   • 适合固定数量的等宽布局

3. Flex 布局：

   • 通过 flex 参数控制宽度比例
   • 适合需要按比例分配空间的场景

6.4 颜色系统设计

本项目使用了鸿蒙设计语言的颜色系统：

颜色类型	用途	示例
主色调	品牌色、主要操作	#0A59F7
成功色	成功状态、在线状态	#00B42A
错误色	错误状态、离线状态	#FA5151
警告色	警告提示	#FA8C16
中性色	文本、背景	#1A1A1A, #999999

颜色透明度的使用：

• withValues(alpha: 0.06)：极浅背景色
• withValues(alpha: 0.1)：浅背景色
• withValues(alpha: 0.15)：图标背景色
• withValues(alpha: 0.3)：边框颜色

---

七、总结

本文详细讲解了「鸿蒙特性展示台」应用中分布式设备协同页面的实现，包括：

1. 状态管理：使用 StatefulWidget 和 setState 管理连接状态和设备选中状态
2. 设备列表：使用 Wrap 布局实现设备卡片的自适应排列
3. 连接控制：使用 Switch 组件控制分布式连接的开启和关闭
4. 协同操作：根据连接状态动态启用/禁用跨设备操作
5. 多屏演示：可视化展示设备间的协同关系

分布式设备协同是鸿蒙操作系统的核心特性，通过本文的学习，您可以掌握如何使用 Flutter 实现分布式协同的 UI 界面和状态管理。在实际应用中，还需要结合鸿蒙的分布式 API 实现真正的跨设备通信和数据共享功能。

---