Unity UIWidgets 之 UIWidgets 下载、安装和简单入门使用

柔情只为你懂 2022-12-17 00:29 405阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

# Unity  UIWidgets 之 UIWidgets 下载、安装 和 简单入门使用 #

**目录**

Unity  UIWidgets 之 UIWidgets 下载、安装 和 简单入门使用

一、简单介绍

二、使用要求

二、下载

Unity UIWidgets 源码下载地址

Unity Asset Store 中下载

四、安装

五、简单的使用 UIWidgets

--------------------

## 一、简单介绍 ##

UIWidgets是Unity编辑器的一个插件包，可帮助开发人员通过Unity引擎来创建、调试和部署高效的跨平台应用。

UIWidgets主要来自[Flutter][]。但UIWidgets通过使用强大的Unity引擎为开发人员提供了许多新功能，显著地改进他们开发的应用性能和工作流程。

>  *  效率
> 
> 通过使用最新的Unity渲染SDK，UIWidgets应用可以非常快速地运行并且大多数时间保持大于60fps的速度。
> 
>  *  跨平台
> 
> 与任何其他Unity项目一样，UIWidgets应用可以直接部署在各种平台上，包括PC，移动设备和网页等。
> 
>  *  多媒体支持
> 
> 除了基本的2D UI之外，开发人员还能够将3D模型，音频，粒子系统添加到UIWidgets应用中。
> 
>  *  开发者友好
> 
> 开发者可以使用许多高级工具，如CPU/GPU Profiling和FPS Profiling，直接在Unity Editor中调试UIWidgets应用。

## 二、使用要求 ##

1、安装 **Unity 2018.4.10f1(LTS)** 或 **Unity 2019.1.14f1** 及其更高版本。 你可以从[https://unity3d.com/get-unity/download][https_unity3d.com_get-unity_download]下载最新的Unity（好似Unity2018.3.5版本版本也行）

2、将下载的UIWidgets包文件夹移动到Unity项目的Package文件夹中

3、注意：建议 Scripting Runtime Version 要选择 Net 4.x Equivalent (unity 版本不一样可以说法不一样)

## 二、下载 ##

### Unity UIWidgets 源码下载地址 ###

1、Unity UIWidgets 源码：[https://github.com/UnityTech/UIWidgets][https_github.com_UnityTech_UIWidgets]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

2、可以 clone 或者 Download zip 下载最新的 UIWidgets

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

3、也可以点击下载 UIWidgets 的 Release 发布的稳定版本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

### Unity Asset Store 中下载 ###

1、在 Asset Store 搜索 UIWidgets

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

2、选择 UNITY TECHNOLOGIES 的 UIWidgets ，这里也可以点击下载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

## 四、安装 ##

(以 Unity 2019.3.13f 为例)

1、新建一个 Unity 工程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

2、找到新建工程的目录的 Packages 文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7][]

3、把下载后的 UIWidgets 文件夹添加到该目录下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 9][]

4、回到Unity界面，在 File - Build Settings 中，建议把 Player Settings --- Api Compatibility Level 设置为 Net 4.x

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 10][]

## 五、简单的使用 UIWidgets ##

(以 Unity 2019.3.13f 为例，同事UIWidgets 基于上面配置OK)

1、在场景中添加一个  Panel

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 11][]

2、在工程中新建一个脚本 HelloUIWidgets

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 12][]

3、移除 Panel 上的Image

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 13][]

4、添加 HelloUIWidgets 脚本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 14][]

5、Game 窗口显示脚本构建的内容

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 15][]

6、当前代码

using Unity.UIWidgets.engine;
    using Unity.UIWidgets.widgets;
    using Unity.UIWidgets.painting;
    using Unity.UIWidgets.ui;
    
    namespace MyTestUIWidgets
    {
        public class HelloUIWidgets : UIWidgetsPanel
        {
            protected override Widget createWidget()
            {
                return new Text(
                    data: "Hello UIWidgets",                // 文字内容
                    style: new TextStyle(
                        color: Color.fromARGB(255,255,0,0), // 设置颜色（argb）（红色）
                        fontSize: 30,                       // 字体大小
                        fontStyle: FontStyle.italic)        // 类型斜体
                        );
            }
        }
    }

7、添加点击功能，修改代码

using Unity.UIWidgets.engine;
    using Unity.UIWidgets.widgets;
    using Unity.UIWidgets.painting;
    using Unity.UIWidgets.ui;
    
    namespace MyTestUIWidgets
    {
        public class HelloUIWidgets : UIWidgetsPanel
        {
            protected override Widget createWidget()
            {
                return new GestureDetector(                 // 收受检测
                    child : new Text(
                    data: "Hello UIWidgets",                // 文字内容
                    style: new TextStyle(
                        color: Color.fromARGB(255,255,0,0), // 设置颜色（argb）（红色）
                        fontSize: 30,                       // 字体大小
                        fontStyle: FontStyle.italic)        // 类型斜体
                        ),
                    onTap: () => { UnityEngine.Debug.Log("OnClick : Hello UIWidgets"); }    // 点击事件
    
                );
            }
        }
    }

8、运行场景，点击 Hello UIWidgets ，效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 17][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20221123/2a3eed58b26c4a15a4b2ba48561fb295.png
[Flutter]: https://github.com/flutter/flutter
[https_unity3d.com_get-unity_download]: https://unity3d.com/get-unity/download
[https_github.com_UnityTech_UIWidgets]: https://github.com/UnityTech/UIWidgets
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20221123/b9db0040fbcb432c8b136f4783742c75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20221123/702858c2e9c348bb8cdc0b447bc413f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20221123/fafbc78133c3479d926f52a9a9fa5201.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20221123/96d3a39332834a37acf85dac7c047bee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20221123/acbaf12face14658b1c1e356d34990fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20221123/4ce4db309fb74e6f99a0d86dc94e8c0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7]: /images/20221123/d2b872f4a19645e7ae94ee83a873341d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8]: /images/20221123/132f10e2d82240a7b662a7b5b6fc417e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 9]: /images/20221123/e548194b044a41678c45434c97e61186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 10]: /images/20221123/7831c20df1a447e69860d0b776c3027d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 11]: /images/20221123/7279948549074ad488c73b4715959f10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 12]: /images/20221123/493af98a80c84ae5a9f5098057026d25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 13]: /images/20221123/205a678f9ee34de3a1366836278705ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 14]: /images/20221123/09ad559edade4335bb34a7c8111d9842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 15]: /images/20221123/701c10a6e4dc4dc4b5e8cb09f6b50623.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 16]: /images/20221123/6b160b140bdc49af8369c71219bb9f8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 17]: /images/20221123/bac2bbd13b5e4be4b4f7a6f670ff1269.png