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的類一般用於實現有狀態更新的操作，繼承StatelessWidget的類一般只用於渲染顯示
數據每次更新時需要使用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++;
                         }
                         );
                 }
                );
        }
    }
}