前言

三国杀的精髓在于身份游戏。每个玩家都有不同的身份和目标，这种设计创造了丰富的心理博弈空间。理解各个身份的玩法策略是成为高手的关键。本文将实现一个完整的身份攻略系统，帮助玩家掌握主公、忠臣、反贼、内奸的不同玩法技巧。

身份系统核心设计

三国杀身份局包含四种身份：主公、忠臣、反贼、内奸。每种身份都有独特的胜利条件和游戏策略。

// lib/models/identity_model.dart
class IdentityModel {
  final String id;
  final String name;
  final String description;
  final String winCondition;
  final Color themeColor;
  final IconData icon;
  final List<String> keyTactics;
  final List<String> commonMistakes;
  final List<String> recommendedHeroes;
  final Map<String, String> phaseStrategies;

  const IdentityModel({
    required this.id,
    required this.name,
    required this.description,
    required this.winCondition,
    required this.themeColor,
    required this.icon,
    required this.keyTactics,
    required this.commonMistakes,
    required this.recommendedHeroes,
    required this.phaseStrategies,
  });
}

这个模型包含了身份的所有基本信息。themeColor 用于视觉区分，icon 提供了快速识别，phaseStrategies 按游戏阶段提供策略指导。这种结构化的设计让攻略内容更加系统化。

身份数据管理

class IdentityStrategyData {
  static final List<IdentityModel> identities = [
    IdentityModel(
      id: 'lord',
      name: '主公',
      description: '身份公开的领导者，需要识别忠臣并消灭敌人',
      winCondition: '消灭所有反贼和内奸',
      themeColor: Colors.yellow,
      icon: Icons.crown,
      keyTactics: [
        '选择防御性武将增强生存能力',
        '通过观察行为识别忠臣身份',
        '合理使用主公技能获得优势',
        '警惕内奸的伪装和背叛',
      ],
      commonMistakes: [
        '过于信任表现积极的玩家',
        '忽视装备的重要性',
        '过早使用关键技能',
      ],
      recommendedHeroes: ['刘备', '孙权', '曹操', '袁绍'],
      phaseStrategies: {
        '开局': '选择合适武将，观察其他玩家',
        '前期': '装备防具，识别忠臣',
        '中期': '配合忠臣清理反贼',
        '后期': '警惕内奸，确保胜利',
      },
    ),
    IdentityModel(
      id: 'loyalist',
      name: '忠臣',
      description: '保护主公，协助主公击杀反贼和内奸',
      winCondition: '主公存活到游戏结束',
      themeColor: Colors.blue,
      icon: Icons.shield,
      keyTactics: [
        '适时暴露身份获得主公信任',
        '优先攻击明确的反贼',
        '为主公承担伤害和负面效果',
        '协助主公识别内奸',
      ],
      commonMistakes: [
        '过早暴露身份被集火',
        '盲目攻击未确认身份的玩家',
        '忽视对内奸的防范',
      ],
      recommendedHeroes: ['关羽', '张飞', '赵云', '马超'],
      phaseStrategies: {
        '开局': '低调行动，观察局势',
        '前期': '适度帮助主公，建立信任',
        '中期': '暴露身份，全力支持主公',
        '后期': '集中火力消灭反贼',
      },
    ),
  ];
}

数据集中管理让维护和更新变得容易。每个身份都有完整的策略信息，包括推荐武将和阶段策略。这样可以轻松扩展新的身份或修改现有策略。

身份卡片组件

// lib/widgets/identity_card.dart
class IdentityCard extends StatefulWidget {
  final IdentityModel identity;
  final VoidCallback onTap;

  const IdentityCard({
    Key? key,
    required this.identity,
    required this.onTap,
  }) : super(key: key);

  @override
  State<IdentityCard> createState() => _IdentityCardState();
}

class _IdentityCardState extends State<IdentityCard> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() => _isExpanded = !_isExpanded);
        widget.onTap();
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        margin: EdgeInsets.only(bottom: 16.h),
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12.r),
          border: Border.all(color: widget.identity.themeColor, width: 2),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 8,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildCardHeader(),
            if (_isExpanded) ...[
              SizedBox(height: 12.h),
              _buildCardContent(),
            ],
          ],
        ),
      ),
    );
  }

使用 AnimatedContainer 实现平滑的展开动画。当用户点击卡片时，_isExpanded 状态改变，容器会平滑地改变高度。这种交互设计让用户可以根据需要查看详细信息。

卡片头部设计

  Widget _buildCardHeader() {
    return Row(
      children: [
        Container(
          padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
          decoration: BoxDecoration(
            color: widget.identity.themeColor,
            borderRadius: BorderRadius.circular(20.r),
          ),
          child: Row(
            children: [
              Icon(widget.identity.icon, color: Colors.white, size: 16.sp),
              SizedBox(width: 6.w),
              Text(
                widget.identity.name,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 14.sp,
                ),
              ),
            ],
          ),
        ),
        Spacer(),
        Icon(
          _isExpanded ? Icons.expand_less : Icons.expand_more,
          color: widget.identity.themeColor,
        ),
      ],
    );
  }

卡片头部使用胶囊形状的标签设计。borderRadius: BorderRadius.circular(20.r) 创造了完全圆角的效果。身份图标和名称组合在一起，让用户能够快速识别。右侧的展开/收起图标提示用户可以交互。

卡片内容展示

  Widget _buildCardContent() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildSection('胜利条件', widget.identity.winCondition),
        SizedBox(height: 12.h),
        _buildTacticsList('关键战术', widget.identity.keyTactics),
        SizedBox(height: 12.h),
        _buildTacticsList('常见错误', widget.identity.commonMistakes),
        SizedBox(height: 12.h),
        _buildHeroesSection(),
      ],
    );
  }

  Widget _buildSection(String title, String content) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 13.sp,
            fontWeight: FontWeight.bold,
            color: Colors.grey.shade700,
          ),
        ),
        SizedBox(height: 4.h),
        Text(
          content,
          style: TextStyle(fontSize: 13.sp, height: 1.5),
        ),
      ],
    );
  }

  Widget _buildTacticsList(String title, List<String> tactics) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 13.sp,
            fontWeight: FontWeight.bold,
            color: Colors.grey.shade700,
          ),
        ),
        SizedBox(height: 4.h),
        ...tactics.map((tactic) => Padding(
          padding: EdgeInsets.only(bottom: 4.h),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('• ', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.bold)),
              Expanded(
                child: Text(
                  tactic,
                  style: TextStyle(fontSize: 12.sp),
                ),
              ),
            ],
          ),
        )),
      ],
    );
  }

  Widget _buildHeroesSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '推荐武将',
          style: TextStyle(
            fontSize: 13.sp,
            fontWeight: FontWeight.bold,
            color: Colors.grey.shade700,
          ),
        ),
        SizedBox(height: 4.h),
        Wrap(
          spacing: 8.w,
          runSpacing: 4.h,
          children: widget.identity.recommendedHeroes.map((hero) => Container(
            padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
            decoration: BoxDecoration(
              color: widget.identity.themeColor.withOpacity(0.1),
              borderRadius: BorderRadius.circular(4.r),
              border: Border.all(
                color: widget.identity.themeColor.withOpacity(0.3),
              ),
            ),
            child: Text(
              hero,
              style: TextStyle(
                fontSize: 12.sp,
                color: widget.identity.themeColor,
              ),
            ),
          )).toList(),
        ),
      ],
    );
  }
}

卡片内容分为多个部分，每个部分都有清晰的标题和内容。战术列表使用项目符号，让内容更加易读。推荐武将使用 Wrap 布局，可以自动换行，适应不同屏幕宽度。

主屏幕实现

// lib/screens/identity_strategy_screen.dart
class IdentityStrategyScreen extends StatelessWidget {
  const IdentityStrategyScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('身份攻略'),
        backgroundColor: Colors.red[700],
        foregroundColor: Colors.white,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildHeader(),
            _buildIdentitiesList(),
            _buildPhaseGuide(),
            _buildTipsSection(),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      padding: EdgeInsets.all(16.w),
      color: Colors.red[700],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '身份游戏攻略',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 4.h),
          Text(
            '掌握四种身份的策略，成为游戏高手',
            style: TextStyle(
              color: Colors.white70,
              fontSize: 13.sp,
            ),
          ),
        ],
      ),
    );
  }

主屏幕使用 SingleChildScrollView 包装整个内容，确保内容过多时可以滚动。红色的头部与应用主题保持一致，提供了清晰的视觉层次。

身份列表展示

  Widget _buildIdentitiesList() {
    return Padding(
      padding: EdgeInsets.all(16.w),
      child: Column(
        children: IdentityStrategyData.identities.map((identity) {
          return IdentityCard(
            identity: identity,
            onTap: () {
              _recordIdentityView(identity.id);
            },
          );
        }).toList(),
      ),
    );
  }

  void _recordIdentityView(String identityId) {
    // 记录用户查看的身份，用于个性化推荐
  }

列表通过 map 函数动态生成卡片。每个卡片都是独立的组件，可以独立展开和收起。这种设计让代码更加模块化和易于维护。

阶段策略指南

  Widget _buildPhaseGuide() {
    return Container(
      margin: EdgeInsets.all(16.w),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.blue.withOpacity(0.05),
        borderRadius: BorderRadius.circular(12.r),
        border: Border.all(color: Colors.blue.withOpacity(0.2)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(Icons.timeline, color: Colors.blue, size: 20.sp),
              SizedBox(width: 8.w),
              Text(
                '游戏阶段策略',
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          SizedBox(height: 12.h),
          _buildPhaseItem('开局阶段', '选择合适的武将，观察其他玩家的行为，初步判断身份'),
          _buildPhaseItem('前期阶段', '根据身份采取相应策略，建立信任关系或隐蔽行动'),
          _buildPhaseItem('中期阶段', '局势逐渐明朗，开始暴露身份或继续隐蔽'),
          _buildPhaseItem('后期阶段', '关键时刻，需要做出正确的决策来确保胜利'),
        ],
      ),
    );
  }

  Widget _buildPhaseItem(String phase, String description) {
    return Padding(
      padding: EdgeInsets.only(bottom: 8.h),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 4.w,
            height: 16.h,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(2.r),
            ),
          ),
          SizedBox(width: 8.w),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  phase,
                  style: TextStyle(
                    fontSize: 13.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  description,
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.grey.shade600,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

阶段策略指南使用了时间线式的设计。蓝色的竖条表示时间流向，让用户能够直观地理解游戏的进程。每个阶段都有清晰的描述，帮助玩家了解在不同阶段应该做什么。

实用技巧区域

  Widget _buildTipsSection() {
    return Container(
      margin: EdgeInsets.all(16.w),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.amber.withOpacity(0.05),
        borderRadius: BorderRadius.circular(12.r),
        border: Border.all(color: Colors.amber.withOpacity(0.2)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(Icons.lightbulb, color: Colors.amber, size: 20.sp),
              SizedBox(width: 8.w),
              Text(
                '实用技巧',
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          SizedBox(height: 12.h),
          _buildTip('观察出牌习惯', '不同身份的玩家出牌习惯不同，通过观察可以推断身份'),
          _buildTip('心理博弈', '三国杀是心理游戏，有时候虚张声势比真实行动更有效'),
          _buildTip('时机把握', '在正确的时间做正确的事，往往能扭转局势'),
          _buildTip('信息管理', '控制信息流，让对手无法准确判断你的身份和意图'),
        ],
      ),
    );
  }

  Widget _buildTip(String title, String description) {
    return Padding(
      padding: EdgeInsets.only(bottom: 8.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(
              fontSize: 13.sp,
              fontWeight: FontWeight.bold,
              color: Colors.amber[700],
            ),
          ),
          SizedBox(height: 2.h),
          Text(
            description,
            style: TextStyle(
              fontSize: 12.sp,
              color: Colors.grey.shade600,
            ),
          ),
        ],
      ),
    );
  }
}

实用技巧区域提供了高级的游戏建议。这些技巧不仅适用于特定身份，而是通用的策略原则。琥珀色的设计让这个区域与其他内容区分开来。

学习进度跟踪

// lib/services/learning_service.dart
class LearningService {
  static const String _progressKey = 'identity_learning_progress';
  
  static Future<void> recordIdentityView(String identityId) async {
    final prefs = await SharedPreferences.getInstance();
    final views = prefs.getStringList(_progressKey) ?? [];
    views.add('$identityId:${DateTime.now().toIso8601String()}');
    await prefs.setStringList(_progressKey, views);
  }
  
  static Future<Map<String, int>> getViewStats() async {
    final prefs = await SharedPreferences.getInstance();
    final views = prefs.getStringList(_progressKey) ?? [];
    final stats = <String, int>{};
    
    for (final view in views) {
      final identityId = view.split(':')[0];
      stats[identityId] = (stats[identityId] ?? 0) + 1;
    }
    
    return stats;
  }
}

学习进度跟踪使用 SharedPreferences 进行本地存储。记录用户查看每个身份的次数，可以用于个性化推荐。这种数据收集帮助系统了解用户的学习偏好。

总结

本文实现了一个完整的身份攻略系统。从数据模型到UI界面，从交互设计到学习跟踪，每个部分都经过精心设计。

核心功能特点：

• 四种身份的完整攻略体系
• 可展开的身份卡片设计
• 详细的战术分析和推荐
• 游戏阶段的策略指导
• 实用的高级技巧
• 学习进度跟踪

这个身份攻略功能为玩家提供了系统性的策略学习工具，帮助他们深入理解三国杀的身份游戏机制。无论是新手还是高手，都能从中获得有价值的策略建议。

---

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