入门指南

概观

在本教程中，我们将创建一个非常简单的UIWidgets应用。 该应用只包含文本标签和按钮。 文本标签将计算按钮上的点击次数。 首先，请打开或创建Unity项目并使用Unity编辑器打开它。

使用要求

Unity

安装 Unity 2019.4.26f1c1 及其更高版本。 您可以从 https://unity.cn/releases/lts/2019 下载最新的Unity。您也可以通过此处查看所有当前支持版本.

UIWidgets包

访问我们的Github存储库 https://github.com/Unity-Technologies/com.unity.uiwidgets 下载最新的UIWidgets包。

将下载的包文件夹移动到Unity项目的Package文件夹中。

通常，你可以在控制台（或终端）应用程序中输入下面的代码来完成这个操作：

 cd <YourPackagePath>
 git clone https://github.com/Unity-Technologies/com.unity.uiwidgets.git com.unity.uiwidgets

在unity的PackageManager中，选择添加添加local file。选中/com.unity.uiwidgets 下的 package.json。

运行环境

UIWidgets目前暂时只支持MacOS（Metal），iOS（Metal），Android（Armv7，OpenGLes）以及 Windows（Direct3D11）。我们后续会针对更广泛的运行环境进行适配，敬请期待。

场景构建

UIWidgets应用通常构建在Unity UI Canvas上。 请按照以下步骤在Unity中创建一个 UI Canvas。

选择“File-> New Scene”创建一个新场景； 选择“GameObject-> UI-> Canvas”在场景中创建一个UI Canvas； 右键单击Canvas选择添加面板“ UI-> Panel”； 单击面板，您会在它的Inspector窗口中看到一个Image组件，通过单击Image Component右上角的 按钮将其删除，然后选择“Remove Component”。

创建您的第一个UIWidgets App

UIWidgets应用程序需要使用C＃脚本进行编写，请按照以下步骤创建应用，并在Unity编辑器中运行。

通过选择刚创建的 Panel 面板来创建新脚本，在“Inspector检查器” 窗口中单击“Add Component->New script”，为其命名为“ UIWidgetsDemo”，然后单击“Create and Add创建并添加”。 现在，您可以在Assets文件夹中看到UIWidgetsDemo.cs。

在编辑器中双击该文件打开脚本，用以下代码替换UIWidgetsDemo.cs的代码内容：

using System.Collections.Generic;
using Unity.UIWidgets.engine;
using Unity.UIWidgets.foundation;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using TextStyle = Unity.UIWidgets.painting.TextStyle;
using ui_ = Unity.UIWidgets.widgets.ui_;

namespace UIWidgetsSample
{
    public class UIWidgetsDemo : UIWidgetsPanel
    {
        protected void OnEnable()
        {
            base.OnEnable();
        }

        protected override void main()
        {
            ui_.runApp(new MyApp());
        }

        class MyApp : StatelessWidget
        {
            public override Widget build(BuildContext context)
            {
                return new WidgetsApp(
                    home: new ExampleApp(),
                    color: Color.black,
                    pageRouteBuilder: (settings, builder) =>
                        new PageRouteBuilder(
                            settings: settings,
                            pageBuilder: (Buildcontext, animation, secondaryAnimation) => builder(context)
                        )
                );
            }
        }

        class ExampleApp : StatefulWidget
        {
            public ExampleApp(Key key = null) : base(key)
            {
            }

            public override State createState()
            {
                return new ExampleState();
            }
        }

        class ExampleState : State<ExampleApp>
        {
            int counter;

            public override Widget build(BuildContext context)
            {
                return new Container(
                    color: Color.white,
                    child: new Column(
                        children: new List<Widget>
                        {
                            new Text("Counter: " + counter,
                                     style: new TextStyle(fontSize: 20, color: Color.black,fontWeight: FontWeight.w100)),

                            new GestureDetector(
                                onTap: () =>
                                {
                                    setState(() =>
                                    {
                                        counter++;
                                    });
                                },
                                child: new Container(
                                    padding: EdgeInsets.symmetric(20, 20),
                                    color: counter % 2 == 0 ? Color.fromARGB(255, 0, 255, 0) : Color.fromARGB(255, 0, 0, 255),
                                    child: new Text("Click Me",
                                                    style: new TextStyle(fontFamily: "racher", fontWeight: FontWeight.normal))
                                )
                            )
                        }
                    )
                );
            }
        }
    }
}

现在您可以在Unity编辑器中运行您的第一个UIWidgets应用程序了！

在Github上了解更多

UIWidgets 是 Github 上的一个Unity开源项目， 请前往 UIWidgets仓库 了解更多有用的使用技巧与参考示例！