一:什么是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++;
}
);
}
);
}
}
}