Unity_UIWidgets新手入门

Unity_UIWidgets新手入门

Hello Everyone！好久没见了，有没有有些想念小黑呢？什么？这么想？哈哈哈哈哈哈，不过我也知道你是想了解新的知识了，才不是想我嘞。
好了，好歹也半年没见面了，今儿给大家介绍一个Unity新的插件包：UIWidgets，这可是个好东西啊！

什么是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应用。

个人理解是这样的
UIWidgets，阿巴，阿巴，阿巴，阿巴！
大家理解了么？嗯，我就知道机智得你能理解我的意思（Unity牛逼！！！）

接触UIWidgets的已经一个多月了，给我的感觉就是 快，便捷，上瘾，具体为什么呢？咱们日后见分晓，好了，废话又说了一大堆，还没给大家见见呢，咱们走着。

UIWidgets使用要求

• 一：Unity：
  安装 Unity 2018.4.10f1(LTS) 或 Unity 2019.1.14f1 及其更高版本。 你可以从Unity下载官网下载最新的Unity。
• 二：UIWidgets插件包
  访问我们的Github存储库 UIWidgets开源下载最新的UIWidgets包。
  将下载的包文件夹移动到Unity项目的Package文件夹中。
  通常，你可以在控制台（或终端）应用程序中输入下面的代码来完成这个操作：

cd /Packages
git clone https://github.com/UnityTech/UIWidgets.git com.unity.uiwidgets

怎么用UIWidgets

• 1、打开UnityHub创建一个工程并且打开，切记要使用Unity高版本哟~
• 2、 去Github存储库UIWidgets开源下载最新的UIWidgets插件包。
• 3、把下载好的UIWidgets插件包放入工程的Packages文件夹中。
• 4、在场景中先删除所有物体资源；然后创建一个Panel，删除上边的Image组件。
• 5、创建一个脚本并且挂到之前创建好的Panel上边，命名规则按自己喜好来即可。
• 6、编写脚本，小黑比较懒，拉存储库的代码改了 改贴上来了：
  ** 做为入口脚本，都是继承UIWidgetsPanel类，需要引入命名空间using Unity.UIWidgets.engine;
  一般会重写以下几个函数：

using System.Collections.Generic;
using Unity.UIWidgets.animation;
using Unity.UIWidgets.engine;
using Unity.UIWidgets.foundation;
using Unity.UIWidgets.material;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using UnityEngine;
using FontStyle = Unity.UIWidgets.ui.FontStyle;

namespace StudyUIWidgets
{
    public class UIWidgetsController : UIWidgetsPanel
    {
        protected override void OnEnable()
        {
            // if you want to use your own font or font icons.
            // FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "font family name");

            // load custom font with weight & style. The font weight & style corresponds to fontWeight, fontStyle of
            // a TextStyle object
            // FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "Roboto", FontWeight.w500,
            //    FontStyle.italic);

            // add material icons, familyName must be "Material Icons"
            // FontManager.instance.addFont(Resources.Load<Font>(path: "path to material icons"), "Material Icons");
            base.OnEnable();
        }

        protected override Widget createWidget()
        {
            return new WidgetsApp(
                home: new MainHomeContrroller(),
                pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) =>
                    new PageRouteBuilder(
                        settings: settings,
                        pageBuilder: (BuildContext context, Animation<float> animation,
                            Animation<float> secondaryAnimation) => builder(context)
                    )
            );
        }

        class MainHomeContrroller : StatefulWidget
        {
            public MainHomeContrroller(Key key = null) : base(key)
            {
            }

            public override State createState() => new MainHomeContrrollerState();
        }

        class MainHomeContrrollerState : State<MainHomeContrroller>
        {
            int counter = 0;

            public override Widget build(BuildContext context)
            {
                return new Container(
                    width:float.MaxValue,
                    color:Colors.grey,
                    child: new Column(
                        mainAxisAlignment: Unity.UIWidgets.rendering.MainAxisAlignment.center,
                        children: new List<Widget> {
                            new Text(
                            	data:"Counter: " + this.counter,
                            	style:new TextStyle(fontSize:20f)),
                            new GestureDetector(
                                onTap: () => {
                                    this.setState(() => {
                                        this.counter++;
                                    });
                                },
                                child: new Container(
                                    padding: EdgeInsets.symmetric(20, 20),
                                    color: Colors.blue,
                                    child: new Text("Click Me")
                                )
                            )
                        }
                    )
                );
            }
        }
    }
}

• 7、保存代码，开始运行，如果出现以下问题。
  则去进行如下设置: 把Warn if No Cameras Rendering取消勾选
  
  运行起来。
• 8、看Batches数值，为1，是TMD的 1！刺激不刺激！

UIWidgets运行效果

UIWidgets新手入门结束

短暂的分享时光今日份又要结束啦，感兴趣的同学要多学习，也可以加我qq：841298494，记得带备注，希望可以在未来的道路上一起成长。

接下又要到了分享时刻

小黑的杂货铺，想要什么都有，客官来杯茶喝啊

程序的道路上学习永不停止，探索随时进行。
Let’s go. Just do it. We can.