Unity基于UIWidgets的UI入门（一简单的入门）

 序

看了官方的介绍后UIWidgets和直播后，感觉肯定是趋势，优化好，DrawCall少，可以完全舍弃UGUI，适合游戏开发，所以我们要跟上时代的潮流艺多不压身。

• 1.使用Unity2018.3版本以上， 我目前用的是Unity2018.3.5版本。
• 2.下载UIWidgets连接 https://github.com/UnityTech/UIWidgets
• 然后新版本倒入  Unity工程里   把UIWidgets-master 倒入在Unity工程目录的Packages下
• Scripting Runtime Version 选择4.x

•  打开Unity的开发者模式 UIWidgets_DEBUG

然后还可以选择性的打开Unity的 UIWidgetsInspector

 

其他没有什么需求了我们就开始搞UIWidgets！

入门一， 打印Helloworld

所有的代码都要挂载在UI上 去掉Image组件

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(){
            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(
                child: new Text(
                    data: " On Click",
                    style: new TextStyle(
                        color: Color.white,
                        fontSize: 20   ) 
                        ), 
                    onTap :()=>{
                        Debug.Log( "On click "); 
                    } 
            ); 
        }
    }
}

入门三，事件触发改变值

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{ 
     public override State createState(){
        return  new CounterState() ;
     }
    }
class CounterState:State<Counter>{
    private int mClickCount { get; set; }=0;
    public override Widget build(BuildContext context)
    {
        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++; 
                        } ); 
                    }
                    );
    }
} 
}
}