UIWidgets笔记

介绍

• UIWidget是Unity Editor的一个插件包，可帮助开发人员使用Unity Engine创建，调试和部署高效的跨平台应用程序。
• UIWidget主要来自Flutter @ https://github.com/flutter/flutter。但是，利用功能强大的Unity Engine，它为开发人员提供了许多新功能，可以显着改善他们的应用程序和开发工作流程。

效率

• 使用最新的Unity渲染SDK，UIWidget应用程序可以非常快速地运行并且大多数时间保持> 60fps。

跨平台

• 与任何其他Unity项目一样，UIWidget应用程序可以直接部署在各种平台上，包括PC，移动设备和网页。

3D支持

• 除了基本的2D UI之外，开发人员还能够将3D模型，粒子系统包含在他们的UIWidget应用程序中。

学习方式

• https://www.bilibili.com/video/av47558897
• http://www.sikiedu.com/my/course/410
• https://github.com/UnityTech/UIWidgets/

使用说明

• 如何打印一个hello world

using Unity.UIWidgets.engine;
using Unity.UIWidgets.widgets;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.ui;
namespace MyTestUIWidgets{
public class SetUpApp : UIWidgetsPanel
{
protected override Widget createWidget(){//创建一个UI窗口
return new Text(//文本对象
data:"Hello World",//数据内容
style :new TextStyle(//风格设置
color: Color.white ,
fontSize:20,
fontStyle: FontStyle.italic )
);
}
}
}'…

• 事件

using Unity.UIWidgets.engine;
using Unity.UIWidgets.widgets;
using Unity.UIWidgets.painting;
using Color = Unity.UIWidgets.ui.Color;
//using Unity.UIWidgets.ui;
using UnityEngine;
namespace MyTestUIWidgets
{
public class OnClickExample : UIWidgetsPanel
{
protected override Widget createWidget(){
return
//GestureDetector 包含的很多事件
new GestureDetector(//需要绑定事件的控件外层套一层GestureDetector
child: new Text(
data: " On Click",
style: new TextStyle(
color: Color.white,
fontSize: 20 )
),
onTap :()=>{//事件回调
Debug.Log( "On click ");
}
);
}
}
}

• Ui数据更新

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Unity.UIWidgets.engine;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.widgets;
using Color= Unity.UIWidgets.ui.Color;
namespace MyTestUIWidgets{
public class ViewData_State : UIWidgetsPanel
{
protected override Widget createWidget(){
return new Counter();
}
class Counter :StatefulWidget{ //可以进行数据更新的Ui控件
public override State createState(){
return new CounterState() ;//返回一个State
}
}
class CounterState:State<Counter>{//State 用于进行数据存储
private int mClickCount { get; set; }=0;//数据
public override Widget build(BuildContext context)//创建State对象
{
return new GestureDetector(
child: new Text(
data: "Click Count:"+ mClickCount,
style: new TextStyle(
fontSize: 50,
color: Color.white)),
onTap: () =>
{
//第一种方法
//(context as StatefulElement).markNeedsBuild(); //手动刷新面板
Debug.Log(" Click Me");
//第二种方法
this.setState( fn: ()=>{//修改数据刷新面板（官方推荐用法）
this.mClickCount++;
} );
}
);
}
}
}
}