UIWidgets(一)

一：什么是UIWidgets

UIWidgets是一款Unity插件。它是基于Google的移动UI框架Flutter演变过来的UI框架

---

二：为什么要使用UIWidgets

——效率比UGUI高
——维护成本低，特别是复杂度高的UI结构
——3D模型、音频、粒子系统、图片(包含gif)也可以显示在UIWidgets上

---

三：使用

——将UIWidgets导入到工程的Packages文件夹下：https://github.com/UnityTech/UIWidgets

——打开Unity的开发者模式：UIWidgets_DEBUG

——新建一个Canvas，之后在Canvas下创建一个空物体(UIWidgets也是渲染在Canvas上)

——使用UIWidgets创建Text并打印Hello World

using Unity.UIWidgets.engine;
using Unity.UIWidgets.widgets;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.ui;

public class UIWidgetsTest : UIWidgetsPanel
{
    protected override Widget createWidget()
    {
        return new Text(
            data: "Hello World",
            style: new TextStyle(color: Color.fromRGBO(255, 0, 0, 0.5f), fontSize: 20)
            );
    }
}

——使用UIWidgets创建Button
交互的操作都在GestureDetector类中

using Unity.UIWidgets.engine;
using Unity.UIWidgets.widgets;
using Unity.UIWidgets.painting;
using UnityEngine;
using Color = Unity.UIWidgets.ui.Color;

public class UIWidgetsTest : UIWidgetsPanel
{
    protected override Widget createWidget()
    {
        return new GestureDetector(
            child: new Text(
                data: "按钮",
                style: new TextStyle(color: Color.black, fontSize: 20)
                ),
            onTap: () =>
             {
                 Debug.Log("On Tap");
             }
            );
    }
}

——使用UIWidgets实现数据的更新
继承UIWidgetsPanel的类一般用于去渲染显示，继承StatefulWidget的类一般不用于去渲染显示
数据每次更新时需要使用setState方法，它的内部调用了this._element.markNeedsBuild()，所以我们也可以不使用setState方法而直接调用markNeedsBuild方法

using Unity.UIWidgets.engine;
using Unity.UIWidgets.widgets;
using Unity.UIWidgets.painting;
using Color = Unity.UIWidgets.ui.Color;

public class UIWidgetsTest : UIWidgetsPanel
{
    protected override Widget createWidget()
    {
        return new Counter();
    }

    class Counter : StatefulWidget
    {
        public override State createState()
        {
            return new CounterState();
        }
    }

    class CounterState : State<Counter>
    {
        private int clickCount;//点击次数

        public override Widget build(BuildContext context)
        {
            return new GestureDetector(
                child: new Text(
                    data: "OnClick：" + clickCount,
                    style: new TextStyle(fontSize: 30, color: Color.black)),
                onTap: () =>
                 {
                 //=====更新数据
                     //第一种写法
                     clickCount++;
                     (context as StatefulElement).markNeedsBuild();

                     //第二种写法
                     this.setState(() =>
                         {
                             clickCount++;
                         }
                         );
                 }
                );
        }
    }
}