Unity/C#实现双按钮功能：变色、存值与跨屏显示图片

针对你需求的两个核心交互+跨界面数据展示功能，以下是分模块的落地实现思路：

1. 颜色修改与持久化存储 #

核心逻辑 #

给改色按钮绑定点击事件，执行两步操作：

• 修改目标物体的颜色：根据平台调用对应的UI属性设置方法（比如Android的setBackgroundColor、Web的style.backgroundColor）
• 存储颜色值：将颜色转为通用格式（十六进制字符串、RGB数组或整数编码），用轻量本地存储方案保存

示例代码（Android Kotlin） #

// 绑定改色按钮点击事件
colorChangeBtn.setOnClickListener {
    // 生成随机色，也可替换为调色板选择的颜色
    val targetColor = Color.rgb(Random.nextInt(256), Random.nextInt(256), Random.nextInt(256))
    // 修改指定物体颜色
    targetView.setBackgroundColor(targetColor)
    // 存储到SharedPreferences
    val sharedPref = getSharedPreferences("AppStorage", Context.MODE_PRIVATE)
    sharedPref.edit().putInt("selected_color", targetColor).apply()
}

2. 图片显示与标识存储 #

核心逻辑 #

给显示图片按钮绑定点击事件，执行两步操作：

• 加载并显示图片：支持本地相册、网络资源或应用内置资源，渲染到界面图片控件
• 存储图片标识：不要直接存图片二进制，优先存储图片的本地路径、网络URL或资源ID（节省存储资源），用同一款本地存储方案保存

示例代码（Web JavaScript） #

// 绑定显示图片按钮点击事件
document.getElementById('showImgBtn').addEventListener('click', () => {
    // 示例：加载网络图片，可替换为用户选择的本地文件路径
    const imgUrl = 'https://your-image-host.com/target-image.jpg';
    // 显示图片
    document.getElementById('imgDisplay').src = imgUrl;
    // 存储到localStorage
    localStorage.setItem('saved_image_key', imgUrl);
});

3. 跨界面展示存储的图片 #

在目标界面的初始化阶段（比如Android的onCreate、iOS的viewDidLoad、Web的DOMContentLoaded），读取存储的图片标识并加载：

示例代码（Flutter） #

late Image? displayedImage;

@override
void initState() {
    super.initState();
    _loadSavedImage();
}

void _loadSavedImage() async {
    final prefs = await SharedPreferences.getInstance();
    final savedImgUrl = prefs.getString('saved_image_key');
    if (savedImgUrl != null) {
        setState(() {
            displayedImage = Image.network(savedImgUrl);
        });
    }
}

关键注意事项 #

• 存储方案选择：轻量键值对用SharedPreferences（Android）、UserDefaults（iOS）、localStorage（Web），避免用重型数据库
• 颜色格式统一：跨平台开发优先用十六进制字符串（如#FF5733），避免平台专属的颜色编码
• 权限处理：若涉及读取本地相册，需提前申请对应权限（Android的READ_MEDIA_IMAGES、iOS的PhotoLibrary权限）
• 图片加载优化：网络图片需添加缓存逻辑，本地图片需处理路径有效性

内容的提问来源于stack exchange，提问作者Maria Nolasco