Unity的Flutter——UIWidgets简介及⼊门
介绍
UIWidgets主要来⾃Flutter。但UIWidgets通过使⽤强⼤的Unity引擎为开发⼈员提供了许多新功能，显著地改进他们开发的应⽤性能和⼯作流程。
效率
通过使⽤最新的Unity渲染SDK，UIWidgets应⽤可以⾮常快速地运⾏并且⼤多数时间保持⼤于60fps的速度。
跨平台
与任何其他Unity项⽬⼀样，UIWidgets应⽤可以直接部署在各种平台上，包括PC，移动设备和⽹页等。
多媒体⽀持
除了基本的2D UI之外，开发⼈员还能够将3D模型，⾳频，粒⼦系统添加到UIWidgets应⽤中。
⽂档
官⽅⽂档只是简单介绍，代码中没有任何中英⽂注释，部分demo还未完成。
不过由于基于Flutter，⼤部分API与Flutter⼀致，所以可以参考Flutter⽂档，或者先学习⼀下Flutter。
Unity Connect App
Unity Connect App是使⽤UIWidgets开发的⼀个移动App产品，可以在以及iOS App Store下载最新的版本.
安装
⾸先需要 Unity 2018.3 或更⾼版本。
新建⼀个unity项⽬或⼀个已有的项⽬。
或者可以在终端中通过git命令来完成这个操作：
cd <YourProjectPath>/Packages
git clone github/UnityTech/UIWidgets.git com.unity.uiwidgets
官⽅⽰例
在⽰例中，我们将创建⼀个⾮常简单的UIWidgets应⽤。 该应⽤只包含⽂本标签和按钮。 ⽂本标签将计算按钮上的点击次数。
⾸先，使⽤Unity编辑器打开项⽬。
场景构建
选择 File > New Scene来创建⼀个新场景。
选择 GameObject > UI > Canvas
在场景中创建UI Canvas。
右键单击Canvas并选择UI > Panel，将⾯板添加到UI Canvas中。 然后删除⾯板中的 Image 组件。
最后为场景命名并保存⾄Assets/Scenes⽬录下
创建部件
创建⼀个新C＃脚本，命名为“UIWidgetsExample.cs”
using System.Collections.Generic;
using Unity.UIWidgets.animation;
using ine;
using Unity.UIWidgets.foundation;
using Unity.UIWidgets.material;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using UnityEngine;
using FontStyle = Unity.UIWidgets.ui.FontStyle;
namespace UIWidgetsSample {
public class UIWidgetsExample : UIWidgetsPanel {
protected override void OnEnable() {
// if you want to use your own font or font icons.
// FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "font family name");
// load custom font with weight & style. The font weight & style corresponds to fontWeight, fontStyle of
// a TextStyle object
// FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "Roboto", FontWeight.w500,
// FontStyle.italic);
// add material icons, familyName must be "Material Icons"
// FontManager.instance.addFont(Resources.Load<Font>(path: "path to material icons"), "Material Icons");
base.OnEnable();
}
protected override Widget createWidget() {
return new WidgetsApp(
home: new ExampleApp(),
pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) =>
new PageRouteBuilder(
settings: settings,
pageBuilder: (BuildContext context, Animation<float> animation,
Animation<float> 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 = 0;
public override Widget build(BuildContext context) {
return new Column(
children: new List<Widget> {
new Text("Counter: " + unter),
new GestureDetector(
onTap: () => {
//这⾥使⽤setState来改变counter的值则可以同步改变Text显⽰，如果不⽤直接counter++则⽆法改变显⽰ this.setState(() => { unter++;
});
},
child: new Container(
padding: EdgeInsets.symmetric(20, 20),
color: Colors.blue,
child: new Text("Click Me")
)
)
}
}
);
}
}flutter开发app
}
}
保存脚本，并附加到panel中作为其组件。
（如果添加失败，请检查⽂件名与类名是否⼀致）
保存场景，运⾏就可以看到效果了。
Image组件
简单介绍⼀下Image组件
加载资源⽂件
将资源图⽚放⼊Assets/Resources⽬录下
使⽤asset函数即可创建⼀个Image并加载相应资源
Unity.UIWidgets.widgets.Image.asset("test")
注意不需要⽂件后缀。
加载⽹络资源
Unity.UIWidgets.widgets.Imagework("www.baidu/img/xinshouyedong_4f93b2577f07c164ae8efa0412dd6808.gif") Image⽀持Gif！可以直接加载显⽰Gif。
除了上⾯两种⽅式，还可以通过⽂件和byte数组来加载资源，函数分别为file()和memory()。
改变⼤⼩等属性
Unity.UIWidgets.widgets.Image.asset(
name: "test",
height: 100
)
这⾥涉及到默认参数，先来看⼀个aseet函数源码
public static Image asset(
string name,
Key key = null,
AssetBundle bundle = null,
float? scale = null,
float? width = null,
float? height = null,
Color color = null,
BlendMode colorBlendMode = BlendMode.srcIn,
BoxFit? fit = null,
Alignment alignment = null,
ImageRepeat repeat = Repeat,
Rect centerSlice = null,
bool gaplessPlayback = false,
FilterMode filterMode = FilterMode.Bilinear
) {
var image = scale != null
(AssetBundleImageProvider) new ExactAssetImage(name, bundle: bundle, scale: scale.Value)
: new AssetImage(name, bundle: bundle);
return new Image(
key,
image,
width,
height,
color,
colorBlendMode,
fit,
alignment,
repeat,
centerSlice,
gaplessPlayback,
filterMode
);
}
除了name，其他参数都设置了默认参数，这样在使⽤这个函数时，⽆需改变默认参数的参数不必传⼊，这样就需要传參时带上参数名。但是如果只传⼀个name参数的时候，可以省略参数名。
所以想改变或设置Image或其他组件的属性时，只需要添加对应参数即可。
如改变图⽚的拉伸规则
Unity.UIWidgets.widgets.Image.asset(
name: "test",
height: 100,
width: 100,
fit: Unity.UIWidgets.painting.BoxFit.fill
)
Navigation页⾯跳转
参考官⽅⽰例中的demo，简化代码如下：
using System;
using System.Collections.Generic;
using Unity.UIWidgets.animation;
using ine;
using Unity.UIWidgets.foundation;
using stures;
using Unity.UIWidgets.painting;
using dering;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using TextStyle = Unity.UIWidgets.painting.TextStyle;
using TextStyle = Unity.UIWidgets.painting.TextStyle;
namespace UIWidgetsSample {
public class NavigationEx : UIWidgetsPanel{
protected override Widget createWidget() {
return new WidgetsApp(
initialRoute: "/",
textStyle: new TextStyle(fontSize: 24),
pageRouteBuilder: this.pageRouteBuilder,
//初始化所有route路由
routes: new Dictionary<string, WidgetBuilder> {
{"/", (context) => new HomeScreen()},
{"/detail", (context) => new DetailScreen()}
});
}
protected PageRouteFactory pageRouteBuilder {
get {
return (RouteSettings settings, WidgetBuilder builder) =>
new PageRouteBuilder(
settings: settings,
pageBuilder: (BuildContext context, Animation<float> animation,
Animation<float> secondaryAnimation) => builder(context),
//设置转场动画，去掉则没有转场动画
transitionsBuilder: (BuildContext context, Animation<float>
animation, Animation<float> secondaryAnimation, Widget child) =>
new _FadeUpwardsPageTransition(
routeAnimation: animation,
child: child
)
);
}
}
}
//⾸页
class HomeScreen : StatelessWidget {
public override Widget build(BuildContext context) {
/
/封装了⼀个NavigationPage，详细见后续代码
return new NavigationPage(
body: new Container(
//设置背景⾊
color: new Color(0xFF888888),
//Center组件可以实现相对parent居中
child: new Center(
//设置按钮点击后跳转到“/detail”
child: new GestureDetector(onTap: () => { Navigator.pushNamed(context, "/detail"); },
child: new Text("Go to Detail"))
)),
title: "Home"
);
}
}
//详情页
class DetailScreen : StatelessWidget {
public override Widget build(BuildContext context) {
return new NavigationPage(
body: new Container(
color: new Color(0xFF1389FD),
child: new Center(
child: new Column(
children: new List<Widget>() {
//设置按钮点击关闭页⾯，回到上⼀页
new GestureDetector(onTap: () => { Navigator.pop(context); }, child: new Text("Back"))
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论