1. 项目概述与核心价值最近在整理过往的项目资料翻到了几年前带团队做的一个《坦克大战3D》复刻项目。这个项目虽然体量不大但麻雀虽小五脏俱全从UI搭建、核心玩法、到数据持久化完整走了一遍中小型Unity项目的开发流程。我发现很多刚入行的朋友或者想从2D转向3D的开发者在拿到一个看似简单的需求时往往不知道如何下手或者做出来的东西结构混乱难以维护和扩展。所以我决定把这个项目拆解出来做成一个超详细的实战案例分享。这个“上篇”我们将聚焦在项目最基础也最容易被忽视的两个环节UI搭建与数据持久化。很多人觉得UI就是摆摆按钮数据存储就是存个分数但实际项目中一个健壮、可扩展的UI框架和一套清晰、安全的数据管理方案是项目后期能否顺利迭代的基石。我会带你从零开始搭建一个基于UGUI的、模块化的UI系统并实现一套兼顾灵活性与安全性的数据持久化方案。所有用到的资源和最终的工程源代码都会在文末提供你可以直接导入Unity Hub对照着文章一步步操作或者直接研究源码结构。2. 项目整体架构设计思路在动手写任何代码之前我们先来聊聊设计思路。一个3D版的坦克大战核心无非是玩家控制、敌人AI、战斗逻辑、UI交互和数据管理。为了避免后期代码像一团乱麻我们采用一种松耦合的模块化设计思想。简单说就是让各个功能模块尽可能独立通过明确的接口或消息进行通信而不是直接互相引用。2.1 为什么选择模块化与事件驱动直接引用如FindObjectOfTypeGameManager().score在小型原型中很快捷但随着功能增加修改一个模块可能引发一连串的报错这就是所谓的“耦合度过高”。我们的设计目标是UI模块只负责显示不处理游戏逻辑。它监听游戏状态如分数变化、生命值变化并更新界面。数据模块负责管理游戏运行时数据当前分数、生命和持久化数据最高分、设置。其他模块通过它来读写数据而不是各自为政。游戏逻辑模块下篇重点处理坦克移动、射击、碰撞等。它产生数据变化如击毁敌人加分并通知其他模块。它们之间如何通信我们将大量使用C#的事件event或Unity的委托Delegate以及更高级的脚本化对象ScriptableObject作为数据通道。例如当玩家得分时游戏逻辑模块触发一个OnScoreChanged事件UI模块和数据模块订阅了这个事件就会自动执行更新界面和保存数据的操作。这样做增加新功能比如添加一个音效模块在得分时播放声音只需要订阅事件即可无需修改现有逻辑。2.2 技术栈选型与资源准备Unity版本本项目使用Unity 2022.3 LTS。LTS长期支持版本稳定性高适合项目开发。文末资源包已锁定该版本。UI系统使用经典的UGUI (Unity UI)。虽然Unity推出了新的UI Toolkit但UGUI在3D游戏项目、成熟度、社区资源和性能调优方面目前仍是主流选择学习资料也最丰富。数据持久化采用JSON序列化结合二进制加密的方案。JSON人类可读便于调试二进制加密则能防止玩家轻易篡改存档文件。我们将使用Newtonsoft.Json即Json.NET库它比Unity自带的JsonUtility功能更强大。关键资源我已经准备好了一套基础的坦克模型带骨骼动画、地形素材、UI贴图和音效。这些资源风格统一足以支撑我们完成核心演示。所有资源都会打包提供。注意在正式开发中务必建立清晰的资源目录结构例如Assets/Art/Models,Assets/Art/UI,Assets/Scripts/Managers,Assets/Scripts/UI等。良好的工程习惯从文件夹开始。3. 模块化UI系统搭建实战UI是玩家与游戏交互的窗口。我们不希望UI代码散落在各个角落因此要构建一个中央化的UI管理器。3.1 创建UI管理器与页面基类首先创建一个UIManager单例类。单例模式确保整个游戏中只有一个UI管理器方便全局访问。// UIManager.cs using System.Collections.Generic; using UnityEngine; public class UIManager : MonoBehaviour { public static UIManager Instance { get; private set; } // 存储所有注册的UI页面键为页面类型 private DictionarySystem.Type, UIBasePage pageRegistry new DictionarySystem.Type, UIBasePage(); // 当前活动的页面 private UIBasePage currentPage; private void Awake() { if (Instance ! null Instance ! this) { Destroy(gameObject); return; } Instance this; DontDestroyOnLoad(gameObject); // 通常UI管理器跨场景存在 } // 注册页面 public void RegisterPage(UIBasePage page) { var type page.GetType(); if (!pageRegistry.ContainsKey(type)) { pageRegistry.Add(type, page); page.gameObject.SetActive(false); // 初始隐藏 } } // 切换到指定页面 public void SwitchToPageT() where T : UIBasePage { // 隐藏当前页 if (currentPage ! null) { currentPage.OnPageExit(); currentPage.gameObject.SetActive(false); } // 显示新页面 if (pageRegistry.TryGetValue(typeof(T), out UIBasePage newPage)) { newPage.gameObject.SetActive(true); newPage.OnPageEnter(); currentPage newPage; } else { Debug.LogError($页面 {typeof(T)} 未注册); } } }接着创建所有UI页面的基类UIBasePage。每个具体的页面如主菜单、游戏内HUD、设置页都继承自它。// UIBasePage.cs using UnityEngine; public abstract class UIBasePage : MonoBehaviour { // 页面初始化Awake之后Start之前 protected virtual void OnEnable() { UIManager.Instance?.RegisterPage(this); } // 页面被打开时调用 public virtual void OnPageEnter() { } // 页面被关闭时调用 public virtual void OnPageExit() { } // 提供一个便捷方法用于按钮事件绑定切换页面 public void Btn_SwitchToPageT() where T : UIBasePage { UIManager.Instance.SwitchToPageT(); } }3.2 实现具体UI页面主菜单与游戏内HUD现在我们来创建两个具体的页面。首先是在Unity中搭建Canvas。在场景中创建GameObject - UI - Canvas。将Canvas的Render Mode设置为Screen Space - OverlayUI Scale Mode设置为Scale With Screen Size参考分辨率设为1920x1080。在Canvas下创建空物体命名为Page_MainMenu并为其添加组件MainMenuPage脚本需继承UIBasePage。在Page_MainMenu下搭建UI元素背景图、标题、开始游戏按钮、设置按钮、退出游戏按钮。同理创建Page_HUD游戏内抬头显示器包含分数文本TextMeshPro、生命值图标、暂停按钮。MainMenuPage.cs 示例// MainMenuPage.cs using TMPro; using UnityEngine; using UnityEngine.UI; public class MainMenuPage : UIBasePage { [SerializeField] private Button startButton; [SerializeField] private Button settingsButton; [SerializeField] private Button quitButton; private void Start() { // 绑定按钮事件 startButton.onClick.AddListener(OnStartClicked); settingsButton.onClick.AddListener(() Btn_SwitchToPageSettingsPage()); quitButton.onClick.AddListener(OnQuitClicked); } private void OnStartClicked() { // 触发开始游戏事件游戏逻辑管理器会监听并处理场景加载等 GameEventManager.Instance.TriggerGameStart(); // 切换到HUD页面 UIManager.Instance.SwitchToPageHUDPage(); } private void OnQuitClicked() { #if UNITY_EDITOR UnityEditor.EditorApplication.isPlaying false; #else Application.Quit(); #endif } }HUDPage.cs 示例// HUDPage.cs using TMPro; using UnityEngine; public class HUDPage : UIBasePage { [SerializeField] private TMP_Text scoreText; [SerializeField] private GameObject[] lifeIcons; // 生命值图标数组 public override void OnPageEnter() { base.OnPageEnter(); // 订阅游戏数据更新事件 GameDataManager.Instance.OnScoreChanged UpdateScoreDisplay; GameDataManager.Instance.OnLifeChanged UpdateLifeDisplay; // 初始化显示 UpdateScoreDisplay(GameDataManager.Instance.CurrentScore); UpdateLifeDisplay(GameDataManager.Instance.CurrentLife); } public override void OnPageExit() { base.OnPageExit(); // 务必退订事件防止内存泄漏 if (GameDataManager.Instance ! null) { GameDataManager.Instance.OnScoreChanged - UpdateScoreDisplay; GameDataManager.Instance.OnLifeChanged - UpdateLifeDisplay; } } private void UpdateScoreDisplay(int newScore) { scoreText.text $SCORE: {newScore:D8}; // 格式化为8位数字 } private void UpdateLifeDisplay(int newLife) { for (int i 0; i lifeIcons.Length; i) { lifeIcons[i].SetActive(i newLife); } } }3.3 UI动画与交互反馈静态的UI是乏味的。我们可以为按钮添加简单的动画来提升手感。按钮悬停与点击效果直接使用Unity Button组件的Transition属性设置为Animation然后为其指定一个Animator Controller在状态机中定义Normal,Highlighted,Pressed,Selected等状态的动画如缩放、颜色变化。页面切换动画在UIBasePage的OnPageEnter和OnPageExit中加入协程Coroutine来实现渐入渐出、滑入滑出等效果。// 在UIBasePage中添加 [SerializeField] private CanvasGroup canvasGroup; public override void OnPageEnter() { StartCoroutine(FadeInPage()); } private System.Collections.IEnumerator FadeInPage() { float duration 0.3f; float timer 0f; while (timer duration) { timer Time.deltaTime; canvasGroup.alpha Mathf.Lerp(0, 1, timer / duration); yield return null; } }使用TextMeshPro务必使用TextMeshPro - Text (UI)替代旧的Text组件。它渲染质量更高功能更强大如字体加粗、间距调整、材质特效等。首次使用时会提示导入TMP Essentials资源包同意即可。实操心得UI元素的锚点Anchor和轴心Pivot设置是适配不同屏幕分辨率的关键。对于HUD元素如分数文本通常锚定在屏幕左上角对于居中弹窗则锚定在中心。多花时间理解RectTransform组件能省去后期大量的布局调整工作。4. 数据持久化方案设计与实现数据持久化不仅要“存得住”还要“存得好”易读、安全、易扩展。我们将数据分为两类游戏设置如音量、画质和游戏存档如最高分、解锁关卡。4.1 定义数据结构与使用ScriptableObject我们不建议使用静态类或单例直接存储需要持久化的数据定义。这里引入ScriptableObject它是一种可独立于场景存在的资源文件非常适合存放游戏配置和默认数据。首先创建存储数据结构的类// GameSettingsData.cs [System.Serializable] public class GameSettingsData { public float masterVolume 0.8f; public float musicVolume 1.0f; public float sfxVolume 1.0f; public int graphicsQuality 2; // 0Low, 1Medium, 2High } // GameSaveData.cs [System.Serializable] public class GameSaveData { public int highScore 0; public int lastPlayedLevel 1; // 可以扩展解锁的坦克皮肤、成就列表等 }然后创建一个GameDataSO的ScriptableObject作为数据定义的容器// GameDataSO.cs using UnityEngine; [CreateAssetMenu(fileName GameData, menuName TankBattle/GameData)] public class GameDataSO : ScriptableObject { public GameSettingsData defaultSettings; public GameSaveData defaultSave; // 这里可以定义其他游戏常量如坦克血量、子弹伤害等 }在Unity中右键Create/TankBattle/GameData即可创建一个资源文件你可以在Inspector中编辑默认值。4.2 构建数据管理器加载、保存与加密DataManager将负责所有持久化操作。它使用单例模式并在Awake时从ScriptableObject加载默认值然后尝试从磁盘读取玩家的实际存档。// DataManager.cs using Newtonsoft.Json; // 需要导入Json.NET包 using System; using System.IO; using System.Security.Cryptography; using System.Text; using UnityEngine; public class DataManager : MonoBehaviour { public static DataManager Instance { get; private set; } // 当前运行时数据从存档或默认值加载 public GameSettingsData CurrentSettings { get; private set; } public GameSaveData CurrentSave { get; private set; } // 默认数据引用 [SerializeField] private GameDataSO gameDataSO; // 文件路径 private string settingsFilePath; private string saveFilePath; // 一个简单的加密密钥实际项目应更复杂可考虑设备唯一标识符混合 private readonly string encryptionKey YourSecretKey123; // 务必修改 private void Awake() { if (Instance ! null) { Destroy(gameObject); return; } Instance this; DontDestroyOnLoad(gameObject); // 确定文件存储路径 settingsFilePath Path.Combine(Application.persistentDataPath, settings.dat); saveFilePath Path.Combine(Application.persistentDataPath, save.dat); LoadAllData(); ApplySettings(); // 加载后立即应用设置如音量 } private void LoadAllData() { // 1. 加载设置 CurrentSettings LoadDataGameSettingsData(settingsFilePath) ?? gameDataSO.defaultSettings; // 2. 加载存档 CurrentSave LoadDataGameSaveData(saveFilePath) ?? gameDataSO.defaultSave; } private T LoadDataT(string filePath) where T : class { if (!File.Exists(filePath)) { Debug.Log($存档文件不存在: {filePath}); return null; } try { byte[] encryptedBytes File.ReadAllBytes(filePath); string json Decrypt(encryptedBytes); return JsonConvert.DeserializeObjectT(json); } catch (Exception e) { Debug.LogError($加载存档失败 {filePath}: {e.Message}); return null; } } public void SaveSettings() { SaveData(CurrentSettings, settingsFilePath); ApplySettings(); // 保存后再次应用确保即时生效 } public void SaveGame() { SaveData(CurrentSave, saveFilePath); } private void SaveDataT(T data, string filePath) where T : class { try { string json JsonConvert.SerializeObject(data, Formatting.Indented); byte[] encryptedBytes Encrypt(json); File.WriteAllBytes(filePath, encryptedBytes); Debug.Log($数据已保存至: {filePath}); } catch (Exception e) { Debug.LogError($保存数据失败 {filePath}: {e.Message}); } } // 简单的AES加密示例生产环境需更安全地管理密钥 private byte[] Encrypt(string plainText) { using (Aes aesAlg Aes.Create()) { aesAlg.Key DeriveKey(encryptionKey); aesAlg.IV new byte[16]; // 固定IV仅作演示。实际应用应使用随机IV并存储。 ICryptoTransform encryptor aesAlg.CreateEncryptor(aesAlg.Key, aesAlg.IV); using (MemoryStream msEncrypt new MemoryStream()) { using (CryptoStream csEncrypt new CryptoStream(msEncrypt, encryptor, CryptoStreamMode.Write)) { using (StreamWriter swEncrypt new StreamWriter(csEncrypt)) { swEncrypt.Write(plainText); } return msEncrypt.ToArray(); } } } } private string Decrypt(byte[] cipherText) { using (Aes aesAlg Aes.Create()) { aesAlg.Key DeriveKey(encryptionKey); aesAlg.IV new byte[16]; ICryptoTransform decryptor aesAlg.CreateDecryptor(aesAlg.Key, aesAlg.IV); using (MemoryStream msDecrypt new MemoryStream(cipherText)) { using (CryptoStream csDecrypt new CryptoStream(msDecrypt, decryptor, CryptoStreamMode.Read)) { using (StreamReader srDecrypt new StreamReader(csDecrypt)) { return srDecrypt.ReadToEnd(); } } } } } private byte[] DeriveKey(string password) { // 使用SHA256从密码生成固定长度的密钥 using (SHA256 sha256 SHA256.Create()) { return sha256.ComputeHash(Encoding.UTF8.GetBytes(password)); } } private void ApplySettings() { // 将设置应用到游戏系统例如 AudioListener.volume CurrentSettings.masterVolume; // 可以在这里触发一个“设置已变更”的事件让其他模块如音频管理器来响应 // GameEventManager.Instance.TriggerSettingsApplied(CurrentSettings); } }4.3 设置页面与数据绑定有了数据管理器我们就可以创建设置页面来修改这些数据。设置页面上的滑块、下拉菜单需要与DataManager.Instance.CurrentSettings双向绑定。SettingsPage.cs 示例// SettingsPage.cs using TMPro; using UnityEngine; using UnityEngine.UI; public class SettingsPage : UIBasePage { [Header(音量设置)] [SerializeField] private Slider masterSlider; [SerializeField] private TMP_Text masterValueText; [SerializeField] private Slider musicSlider; // ... 其他UI控件 private GameSettingsData tempSettings; // 临时存储修改避免直接修改原数据 public override void OnPageEnter() { base.OnPageEnter(); // 从数据管理器加载当前设置到临时变量 tempSettings JsonConvert.DeserializeObjectGameSettingsData( JsonConvert.SerializeObject(DataManager.Instance.CurrentSettings) ); // 深拷贝 // 初始化UI控件 masterSlider.value tempSettings.masterVolume; UpdateMasterValueDisplay(tempSettings.masterVolume); masterSlider.onValueChanged.AddListener(OnMasterVolumeChanged); // ... 初始化其他控件并绑定事件 } private void OnMasterVolumeChanged(float value) { tempSettings.masterVolume value; UpdateMasterValueDisplay(value); // 可以实时预览音量变化 AudioListener.volume value; } private void UpdateMasterValueDisplay(float value) { masterValueText.text ${value * 100:F0}%; } // 应用按钮 public void OnApplyButtonClicked() { // 将临时设置赋给数据管理器 DataManager.Instance.CurrentSettings tempSettings; DataManager.Instance.SaveSettings(); // 保存到文件 UIManager.Instance.SwitchToPageMainMenuPage(); // 返回主菜单 } // 取消按钮 public void OnCancelButtonClicked() { // 恢复之前的音量预览 AudioListener.volume DataManager.Instance.CurrentSettings.masterVolume; UIManager.Instance.SwitchToPageMainMenuPage(); } public override void OnPageExit() { base.OnPageExit(); // 清理事件监听 masterSlider.onValueChanged.RemoveListener(OnMasterVolumeChanged); // ... 清理其他事件 } }5. 核心模块联动与游戏事件系统现在UI和数据模块已经就绪但它们还是孤立的。我们需要一个中枢来协调它们这就是游戏事件系统。它本质上是一个发布-订阅模式的实现。5.1 实现一个简单的事件管理器// GameEventManager.cs using System; using System.Collections.Generic; using UnityEngine; public class GameEventManager : MonoBehaviour { public static GameEventManager Instance { get; private set; } // 定义一些游戏事件 public event Action OnGameStart; public event Action OnGamePause; public event Action OnGameResume; public event Action OnGameOver; public event Actionint OnScoreChanged; // 带参数的事件 public event Actionint OnLifeChanged; private void Awake() { if (Instance ! null) { Destroy(gameObject); return; } Instance this; DontDestroyOnLoad(gameObject); } // 触发事件的方法 public void TriggerGameStart() OnGameStart?.Invoke(); public void TriggerGamePause() OnGamePause?.Invoke(); public void TriggerScoreChanged(int delta) OnScoreChanged?.Invelta); // ... 其他触发方法 }5.2 连接所有模块现在我们修改之前的GameDataManager假设它负责管理游戏运行时状态如当前分数、生命值让它来响应游戏逻辑并触发事件。// GameDataManager.cs (新增或修改) public class GameDataManager : MonoBehaviour { public static GameDataManager Instance { get; private set; } public int CurrentScore { get; private set; } public int CurrentLife { get; private set; } // 定义事件供UI订阅 public event Actionint OnScoreChanged; public event Actionint OnLifeChanged; private void Awake() { /* 单例初始化 */ } public void AddScore(int value) { CurrentScore value; OnScoreChanged?.Invoke(CurrentScore); // 通知UI更新 // 检查并更新最高分 if (CurrentScore DataManager.Instance.CurrentSave.highScore) { DataManager.Instance.CurrentSave.highScore CurrentScore; DataManager.Instance.SaveGame(); // 即时保存 } } public void SetLife(int life) { CurrentLife life; OnLifeChanged?.Invoke(CurrentLife); if (CurrentLife 0) { GameEventManager.Instance.TriggerGameOver(); } } }在游戏逻辑中例如子弹击中敌人的脚本不再直接修改UI或数据而是调用GameDataManager.Instance.AddScore(100)。GameDataManager会更新数据、触发事件HUDPage监听到事件后自动更新分数显示DataManager也会在必要时保存新的最高分。这样模块之间就没有了直接的依赖只有通过事件和数据管理器进行的间接通信耦合度大大降低。6. 常见问题、调试技巧与性能考量在实际搭建过程中你肯定会遇到各种问题。这里记录几个典型坑点和解决思路。6.1 UI相关常见问题UI点击无响应检查层级确保没有其他UI面板如全屏透明的Image遮挡了按钮。检查Canvas Group的Interactable和Blocks Raycasts。检查EventSystem场景中必须有且仅有一个EventSystem对象。如果跨场景切换时丢失可以在UI管理器的GameObject上始终挂载一个。检查摄像机如果Canvas是World Space模式确保有Physics Raycaster或Graphic Raycaster组件。屏幕适配错乱锚点Anchors是核心理解左上、右上、左下、右下、拉伸、居中等预设锚点的含义。对于需要保持相对位置的元素如边栏按钮使用角锚点对于需要拉伸填充的元素如背景图使用拉伸锚点。使用Canvas ScalerScale With Screen Size模式配合一个参考分辨率如1080p是最常用的方案。Match参数可以在宽高之间权衡通常选0.5两者兼顾或根据游戏是横屏/竖屏选择。TextMeshPro字体缺失或模糊首次使用TMP文本时如果出现粉色方块需要Window - TextMeshPro - Import TMP Essential Resources。字体模糊通常是因为字体纹理图集分辨率不够。在TMP字体资产的Inspector中调整Atlas Resolution如从512调到1024或2048。6.2 数据持久化相关常见问题存档文件读取为null或数据错误路径问题Application.persistentDataPath在不同平台路径不同。在Unity Editor中打印出来看看。确保读写权限。序列化/反序列化失败检查数据类是否标记为[System.Serializable]所有需要保存的字段是否都是public或标记了[SerializeField]。避免保存对Unity引擎对象如GameObject的直接引用。加密/解密密钥不一致确保加密和解密使用相同的密钥和初始化向量IV。我们的示例使用了固定IV这并不安全但简化了演示。正式项目应考虑使用随机IV并随密文一起存储。数据不同步确保任何修改CurrentSettings或CurrentSave的地方都通过DataManager提供的方法如SaveSettings()进行而不是直接修改后忘记保存。对于需要频繁保存的数据如最高分可以采用“延迟保存”策略避免一帧内多次写入磁盘。例如设置一个dirty标志在Update中检查每隔几秒或切换场景时再统一保存。6.3 性能与内存优化提示UI性能避免频繁的SetActive切换页面时如果页面复杂频繁SetActive可能导致卡顿。可以考虑使用Canvas Group的alpha和interactable来控制显示和交互而不是直接激活/禁用GameObject。合批Batching尽量使用图集Sprite Atlas来打包UI图片减少Draw Call。Unity UGUI会自动进行合批但条件苛刻相同材质、纹理、层级等。注意UI元素的层级顺序。使用对象池对于游戏内频繁生成和销毁的UI元素如伤害数字、飘分提示务必使用对象池。数据安全本文的加密示例非常基础旨在说明原理。绝对不要在真实项目中使用硬编码的密钥。可以考虑将密钥拆散、混淆或使用设备相关的信息派生密钥。对于单机游戏防篡改是“防君子不防小人”。更复杂的方案可以加入数据校验如CRC或哈希但核心逻辑最好在服务端验证。事件系统的内存泄漏这是一个极易忽视的严重问题。当一个对象如UI页面订阅了事件如果该对象被销毁如切换场景但事件订阅没有取消那么事件持有者如GameEventManager会一直保留对该对象的引用导致其无法被垃圾回收。黄金法则在OnEnable或Start中订阅事件在OnDisable或OnDestroy中必须退订。正如我们在HUDPage.OnPageExit中所做的那样。7. 项目资源导入与测试指南至此上篇的所有核心模块已经搭建完毕。你可以按照以下步骤测试整个流程导入资源包下载提供的资源包包含模型、UI素材、音效、预设好的ScriptableObject等直接拖入Unity项目Assets文件夹。场景搭建创建一个空场景。将预制好的GameManager包含UIManager,DataManager,GameEventManager,GameDataManager等所有管理器的空物体拖入场景。将MainMenuPage和HUDPage的UI预制件拖入Canvas下。确保场景中有EventSystem。运行测试点击播放应看到主菜单。点击“开始游戏”应切换到HUD页面此时游戏逻辑还未实现HUD数据为默认值。在编辑器中手动调用GameDataManager.Instance.AddScore(500)观察HUD分数是否更新并检查Application.persistentDataPath下的save.dat文件用文本编辑器打开是乱码说明加密成功。打开设置页面调整音量滑块点击应用退出游戏再重新运行检查音量设置是否被保存。这个框架已经为下篇要实现的3D坦克战斗逻辑打下了坚实的基础。下篇我们将深入3D场景实现坦克的移动控制、射击、敌人AI、碰撞伤害、关卡管理等核心玩法并将它们无缝接入今天搭建的UI和数据系统。你会发现有了清晰的架构后续功能的添加会变得非常顺畅。
