Unity UIWidgets 之 UIWidgets 简单入门使用之简单点击事件的数据交互使用

╰+攻爆jí腚メ 2022-12-17 01:22 129阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

# Unity UIWidgets 之 UIWidgets 简单入门使用之 简单点击事件的数据交互使用 #

**目录**

Unity UIWidgets 之 UIWidgets 简单入门使用之 简单点击事件的数据交互使用

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

六、具体代码

--------------------

## 一、简单介绍 ##

UIWidgets是Unity编辑器的一个插件包，可帮助开发人员通过Unity引擎来创建、调试和部署高效的跨平台应用。

UIWidgets主要来自[Flutter][]。但UIWidgets通过使用强大的Unity引擎为开发人员提供了许多新功能，显著地改进他们开发的应用性能和工作流程。

UIWidgets 数据交互不像UGUI一样，直接交互，而是 UIWidgets 有一套自己的机制。

本节介绍，UIWidgets 点击事件中数据交互的使用。

## 二、实现原理 ##

1、关键是 UIWidgets State 相关组件的使用，在 SetState 中设置数据的更新

## 三、注意事项 ##

1、要配置好UIWidgets才能使用哦

参考 UIWidgets 下载安装配置地址：[https://blog.csdn.net/u014361280/article/details/109194172][https_blog.csdn.net_u014361280_article_details_109194172]

2、数据交互不像UGUI一样，直接交互，而是 UIWidgets 有一套自己的机制

## 四、效果预览 ##

![20201021112332635.gif][]

## 五、实现步骤 ##

1、新建Unity工程，配置好 UIWidgets  环境

参考 UIWidgets 下载安装配置地址：[https://blog.csdn.net/u014361280/article/details/109194172][https_blog.csdn.net_u014361280_article_details_109194172]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

2、创景中创建 Panel ，并且移除 Image 组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

3、在工程中创建一个脚本 OnClickState，实现点击交互的逻辑

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

4、把 OnClickState 挂载到 Panel 上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

5、运行场景，点击 UI，效果如上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

## 六、具体代码 ##

using System.Collections;
    using System.Collections.Generic;
    using Unity.UIWidgets.engine;
    using Unity.UIWidgets.painting;
    using Unity.UIWidgets.widgets;
    using UnityEngine;
    
    namespace MyTestUIWidgets
    {
        /// <summary>
        /// 继承 UIWidgetsPanel
        /// 实现一个简单的点击事件数据交互
        /// </summary>
        public class OnClickState : UIWidgetsPanel
        {
            // 创建一个 Widget
            protected override Widget createWidget()
            {
                return new Counter();
            }
    
            /// <summary>
            /// 状态 Widget
            /// </summary>
            class Counter : StatefulWidget {
    
                // 创建状态
                public override State createState()
                {
                    return new CounterState();
                }
            }
    
            /// <summary>
            /// 依附 Counter 的具体状态形态
            /// </summary>
            class CounterState : State<Counter> {
    
                private int mCount { get; set; } = 0;
    
                // 构建改状态下的 Widget
                public override Widget build(BuildContext context)
                {
                    return new GestureDetector(child: new Text("Click Conut : " + mCount, style: new TextStyle(fontSize: 40)),      // 创建文本内容
                                            onTap: () =>        // 点击事件
                                            {
                                                // 状态设置
                                                this.setState(() =>
                                                {
                                                    Debug.Log("Click...");
                                                    mCount++;
    
                                                });
                                            }
                    );
                }
            }
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20221123/36d02eb8a94542e7b258fd0877085317.png
[Flutter]: https://github.com/flutter/flutter
[https_blog.csdn.net_u014361280_article_details_109194172]: https://blog.csdn.net/u014361280/article/details/109194172
[20201021112332635.gif]: /images/20221123/0e3187d6c368495fae78b4a9cbc0a047.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20221123/d8a01b58f2494bc5b7b75eefbdb127f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20221123/cb7db6dec0804ae5874a620fda7e1001.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20221123/9225738597e34e4da6e84f627fb6261e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20221123/defdcd07629f443598d58950256eaa03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20221123/34baf6e95b164a9e9d096780d4c7cde1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20221123/6f52116efa9449fb8af3a30d96bbbb43.png