UIWidgets沒有提供完整文檔, 稱可以去看Flutter的文檔 中文 \ 英文

控件(Control)在Flutter中稱為"Widget", 一個界面的若干控件是通過widget的組合實現的

通過UI容器類可以組合控件

Row是其中一種容器

using System.Collections.Generic;

using Unity.UIWidgets.engine;

using Unity.UIWidgets.painting;

using Unity.UIWidgets.widgets;

using UnityEngine;

public class TestPanel : UIWidgetsPanel

{

protected override Widget createWidget() => new Counter1();

class Counter1 : StatelessWidget

{

public override Widget build(BuildContext context)

{

Text text = new Text(

data: "Hello world",

style: new TextStyle(

color: Unity.UIWidgets.ui.Color.white,

fontSize: 20,

fontStyle: Unity.UIWidgets.ui.FontStyle.italic

)

);

GestureDetector gestureDetector = new GestureDetector(

child: text,

onTap: () =>

{

Debug.Log("Rua!");

}

);

Text text2 = new Text(

data: "line 2!"

);

Row row = new Row(

children: new List

{

gestureDetector,

text2,

}

);

return row;

}

}

}

效果如下

繼承自MultiChildRenderObjectWidget的大多數UI容器類的都可以設置children屬性, 如Flex, Row, Column, ListBody, Stack, Wrap, CustomMultiChildLayout等, 具體用法還需要查看Flutter文檔

通過組合做一個稍復雜一點的界面

下面我打算做一個特別簡單的表單, 可以輸入幾個值(不檢驗), 點擊按鈕可以輸出一個拼接的字符串. 為了這個需求, 需要

查詢UGUI的InputField在Flutter中對應的Widget

規劃一下布局

編碼\測試

使用Material風格控件

基本widgets中似乎沒有按鈕, 前面使用Text + GestureDetector\onTap來實現一個點擊響應很反麻煩

引入Material風格控件后可以簡化一些操作using using Unity.UIWidgets.material;

RaisedButton button = new RaisedButton(

child: new Text(

data: "確定"

),

onPressed: () =>

{

Debug.Log("Rua!");

}

);

RaisedButton是帶陰影的按鈕, 自帶點擊動效, 效果不錯

然后是文本輸入控件....不知道要怎么做才能對, TextFormField\TextField\EditableText直接報錯

之后按照material風格結構創建一下, TextFormField\TextField可以用了

using System.Collections.Generic;

using UIWidgets.Runtime.material;

using Unity.UIWidgets.animation;

using Unity.UIWidgets.engine;

using Unity.UIWidgets.foundation;

using Unity.UIWidgets.material;

using Unity.UIWidgets.painting;

using Unity.UIWidgets.rendering;

using Unity.UIWidgets.service;

using Unity.UIWidgets.ui;

using Unity.UIWidgets.widgets;

using Color = Unity.UIWidgets.ui.Color;

using UnityEngine;

public class TestPanel : UIWidgetsPanel

{

protected override Widget createWidget()

{

return new MaterialApp(

home: new MyWidget()

);

}

class MyWidget : StatefulWidget

{

public override State createState()

{

return new MyState();

}

}

class MyState : State

{

public override Widget build(BuildContext context)

{

TextFormField text = new TextFormField(

decoration: new InputDecoration(

border: new OutlineInputBorder(),

labelText: "hello"

)

);

RaisedButton button = new RaisedButton(

child: new Text("confirm"),

onPressed: () => { Debug.Log("Rua!!!"); }

);

Column column = new Column(

children: new List()

{

new Padding(padding: EdgeInsets.symmetric(vertical: 20.0f)),

text,

new Padding(padding: EdgeInsets.symmetric(vertical: 10.0f)),

button,

}

);

Center center = new Center(

child: column

);

Container container = new Container(

child: center

);

Scaffold scaffold = new Scaffold(

appBar: new AppBar(

title: new Text("Test")

),

body: container

);

return scaffold;

}

}

}

實現簡單的表單

using System.Collections.Generic;

using UIWidgets.Runtime.material;

using Unity.UIWidgets.animation;

using Unity.UIWidgets.engine;

using Unity.UIWidgets.foundation;

using Unity.UIWidgets.material;

using Unity.UIWidgets.painting;

using Unity.UIWidgets.rendering;

using Unity.UIWidgets.service;

using Unity.UIWidgets.ui;

using Unity.UIWidgets.widgets;

using Color = Unity.UIWidgets.ui.Color;

using UnityEngine;

public class TestPanel : UIWidgetsPanel

{

protected override Widget createWidget()

{

return new MaterialApp(

home: new MyWidget()

);

}

class MyWidget : StatefulWidget

{

public override State createState()

{

return new MyState();

}

}

class MyState : State

{

readonly TextEditingController m_NameController = new TextEditingController();

//readonly TextEditingController m_AgeController = new TextEditingController();

public override void dispose()

{

m_NameController.dispose();

//m_AgeController.dispose();

base.dispose();

}

public override Widget build(BuildContext context)

{

TextFormField nameField = new TextFormField(

controller: m_NameController,

decoration: new InputDecoration(

labelText: "姓名 *",

hintText: "在此輸入姓名(不超過十個字)"

),

maxLength: 10,

autovalidate: true,

validator: (text) =>

{

if (string.IsNullOrEmpty(text))

{

return "名字不可為空";

}

else

{

return null;

}

},

onEditingComplete: () => { Debug.Log("編輯結束"); },

onSaved: (text) => { Debug.Log("保存 " + text); },

onFieldSubmitted: (text) => { Debug.Log("提交 " + text); }

);

//TextFormField ageField = new TextFormField(

// controller: m_AgeController,

// decoration: new InputDecoration(

// labelText: "年齡 *",

// hintText: "在此輸入年齡"

// ),

// initialValue: "0",

// autovalidate: true,

// validator: (text) =>

// {

// if (!int.TryParse(text, out int age))

// {

// return "只能輸入數字";

// }

// else

// {

// return null;

// }

// }

// );

RaisedButton button = new RaisedButton(

child: new Text("confirm"),

onPressed: () =>

{

Debug.Log($"名字: {nameField.controller?.text}, 年齡: ageField.controller?.text");

}

);

Column column = new Column(

children: new List()

{

nameField,

//ageField,

button,

}

);

Container container = new Container(

child: column,

padding: EdgeInsets.all(10.0f)

);

Scaffold scaffold = new Scaffold(

appBar: new AppBar(

title: new Text("Test")

),

body: container

);

return scaffold;

}

}

}

不知道是bug還是規定feature...在同一個State的build中用兩個TextEditorController就會報錯...只好去掉一個

畢竟早期階段...文檔不全各種坑踩起來很難受

總結

以上是生活随笔為你收集整理的ui动效 unity_Unity - UIWidgets 2. 控件组合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。