版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
我跟着凉鞋大大的教程学习widgets更新的优点慢，但是知识点很多，
这个是初步教程 做一个 输入框存储标签和删除标签
这个例子他们官方有， 跟着凉大敲下来 加深我的理解
这一小节课中有一个很严重的bug 就是
屏幕分辨率达不到的话设置Container的宽度，和他的Margin值同时做的话 他们两个的长度加起来超过当前屏幕的话就会报错 这种错误是溢出错误。
他这种报错有点难解决， 这个bug坑了我一个多小时。原因之一是英语差和没看报错信息
每次打开都有记录的功能，用的unity自带的PlayerPrefs类做的存储和读取。
我先录制一个GIF
接下来我会粘贴上来代码
这个类是对UIWidgets的常用类做的一些扩展
-
using System;
-
using System.Globalization;
-
using System.Collections;
-
using System.Collections.Generic;
-
using Unity.UIWidgets.gestures;
-
using Unity.UIWidgets.painting;
-
using Unity.UIWidgets.widgets;
-
using UnityEngine;
-
using Color = Unity.UIWidgets.ui.Color;
-
using Unity.UIWidgets.foundation;
-
-
namespace
MyTestUIWidgets.UIWidgets
-
{
-
public
class
FQ
-
{
-
public
static ContainerBuild Container =>
new ContainerBuild();
-
public
static TextBuilder Text =>
new TextBuilder();
-
public
static ListViewBuilder ListView =>
new ListViewBuilder();
-
public
static EditableTextBuilder EditableText =>
new EditableTextBuilder();
-
}
-
-
public
class
ContainerBuild
-
{
-
private Widget mChild {
get;
set; }
-
private Alignment mAlignment {
get;
set; }
-
private Color mColor {
get;
set; }
-
private EdgeInsets mMargin = EdgeInsets.zero;
-
//可控参数
-
private
float? mWidth =
null;
-
public static ContainerBuild GetBuilder()
-
{
-
return
new ContainerBuild();
-
}
-
public ContainerBuild Child(Widget _child)
-
{
-
mChild = _child;
-
return
this;
-
}
-
public ContainerBuild Color(Color _color)
-
{
-
mColor = _color;
-
return
this;
-
}
-
public ContainerBuild Margin(EdgeInsets _edgInsets)
-
{
-
mMargin = _edgInsets;
-
return
this;
-
}
-
public ContainerBuild Width(float _width)
-
{
-
mWidth = _width;
-
return
this;
-
}
-
public ContainerBuild Alignment(Alignment _alignment)
-
{
-
mAlignment = _alignment;
-
return
this;
-
}
-
public Container EndContainer()
-
{
-
return
new Container(child: mChild, alignment: mAlignment, color: mColor, width: mWidth, margin: mMargin);
-
}
-
}
-
public
class
TextBuilder
-
{
-
private
string mData {
get;
set; }
-
private TextStyle mStyle {
get;
set; } =
new TextStyle();
-
private
int mFontSize {
get;
set; }
-
public static TextBuilder GetBuilder()
-
{
-
return
new TextBuilder();
-
}
-
public TextBuilder Data(string _data)
-
{
-
mData = _data;
-
return
this;
-
}
-
public TextBuilder SetTextStyle(TextStyle _style)
-
{
-
mStyle = _style;
-
return
this;
-
}
-
public TextBuilder SetSize(int _fountSize)
-
{
-
mFontSize = _fountSize;
-
return
this;
-
}
-
public Text EndText()
-
{
-
if (mFontSize ==
0)
-
{
-
return
new Text(data: mData);
-
}
-
else
-
{
-
return
new Text(data: mData, style:
new TextStyle(fontSize: mFontSize));
-
}
-
}
-
}
-
public
class
ListViewBuilder
-
{
-
List<Widget> mChildren =
new List<Widget>();
-
EdgeInsets mPadding =
null;
-
public static ListViewBuilder GetBuilder()
-
{
-
return
new ListViewBuilder();
-
}
-
public ListViewBuilder Padding(EdgeInsets _madding)
-
{
-
mPadding = _madding;
-
return
this;
-
}
-
public ListViewBuilder Child(List<Widget> _children)
-
{
-
mChildren = _children;
-
return
this;
-
}
-
public ListViewBuilder Child(Widget _child)
-
{
-
mChildren.Add(_child);
-
return
this;
-
}
-
public ListViewBuilder Child(params Widget[] _childeen)
-
{
-
mChildren.AddRange(_childeen);
-
return
this;
-
}
-
public ListView EndListView()
-
{
-
return
new ListView(children: mChildren, padding: mPadding);
-
}
-
}
-
public
static
class
GestureDetectorExtension
-
{
-
public static GestureDetector OnTap(this Widget _widget, GestureTapCallback onTap)
-
{
-
return
new GestureDetector(child: _widget, onTap: onTap);
-
}
-
}
-
public
class
EditableTextBuilder
-
{
-
private TextEditingController mInputController =
new TextEditingController(text:
"");
-
private FocusNode mFocusNode =
new FocusNode();
-
public TextStyle mStyle =
new TextStyle();
-
public Color mCursorColor = Color.black;
-
public
float mFontSize;
-
ValueChanged<
string> mOnValueChanged =
null;
-
ValueChanged<
string> mOnSubmit =
null;
-
public EditableTextBuilder OnValueChanged(ValueChanged<string> _onValueChanged)
-
{
-
mOnValueChanged = _onValueChanged;
-
return
this;
-
}
-
public EditableTextBuilder OnSubmit(ValueChanged<string> _onSubmit)
-
{
-
mOnSubmit = _onSubmit;
-
return
this;
-
}
-
public EditableTextBuilder SetInputController(TextEditingController _inputController, FocusNode _focusNode, TextStyle _style, Color _cursorColor)
-
{
-
mInputController = _inputController;
-
mFocusNode = _focusNode;
-
mStyle = _style;
-
mCursorColor = _cursorColor;
-
return
this;
-
}
-
public EditableTextBuilder FontSize(float size)
-
{
-
mFontSize = size;
-
return
this;
-
}
-
public EditableTextBuilder GetBuilder()
-
{
-
return
new EditableTextBuilder();
-
}
-
public EditableText EndEditableTextBuilder()
-
{
-
return
new EditableText(
-
controller: mInputController,
-
focusNode: mFocusNode,
-
style: mFontSize ==
0 ? mStyle :
new TextStyle(fontSize: mFontSize),
-
cursorColor: mCursorColor,
-
onChanged: mOnValueChanged,
-
onSubmitted: mOnSubmit);
-
}
-
}
-
-
}
这个类是用来帮助TodoListApp类构建
-
-
using Color = Unity.UIWidgets.ui.Color;
-
using Unity.UIWidgets.foundation;
-
using System;
-
using System.Collections.Generic;
-
using MyTestUIWidgets.UIWidgets;
-
using Unity.UIWidgets.painting;
-
using Unity.UIWidgets.widgets;
-
using UnityEngine;
-
-
namespace
MyTestUIWidgets.UIWidgets
-
{
-
-
public
class
TodoView :
StatelessWidget
-
{
-
private
readonly
string mData;
-
private
readonly Action mOnFinish;
-
public TodoView(string data, Action onFinish)
-
{
-
mData = data;
-
mOnFinish = onFinish;
-
}
-
public override Widget build(BuildContext context)
-
{
-
return FQ.Container
-
.Alignment(Alignment.center)
-
.Child(
-
FQ.Text
-
.Data(mData)
-
.SetSize(
20).EndText()
-
)
-
.EndContainer().OnTap(() =>
-
{
-
mOnFinish();
-
});
-
}
-
}
-
public
class
TodoInputView :
StatelessWidget
-
{
-
private
string mInputContent =
string.Empty;
-
-
private Action<
string> mOnAdd;
-
public TodoInputView(Action<string> onAdd)
-
{
-
mOnAdd = onAdd;
-
}
-
public void AddTodo()
-
{
-
if (!
string.IsNullOrWhiteSpace(mInputContent))
-
{
-
mOnAdd(mInputContent);
-
}
-
}
-
public override Widget build(BuildContext context)
-
{
-
return
-
new Container(child:
-
new Row(children:
new List<Widget>(){
-
FQ.Container.Width(
190).Color(Color.white).Margin(EdgeInsets.only(left :
15))
-
.Child(FQ.EditableText.FontSize(
30)
-
.OnValueChanged(mInputContent => {
this.mInputContent = mInputContent; } )
-
.OnSubmit(inputvalue => AddTodo())
-
.EndEditableTextBuilder() )
-
.EndContainer(),
-
FQ.Container.Child(
-
FQ.Text.Data(
"+")
-
.SetSize(
30)
-
.EndText()
-
.OnTap(() => {
-
AddTodo();
-
Debug.Log(
"On Tap");})
-
).Margin(EdgeInsets.only(left:
12)).EndContainer()
-
}
//, mainAxisAlignment: Unity.UIWidgets.rendering.MainAxisAlignment.spaceBetween
-
));
-
-
}
-
}
-
}
-
这个TodoListApp类是用来构建APP界面
-
using System.Xml.Linq;
-
using System;
-
using System.Text;
-
using System.Linq;
-
using System.Collections;
-
using System.Collections.Generic;
-
using Unity.UIWidgets.engine;
-
using Unity.UIWidgets.painting;
-
using Unity.UIWidgets.widgets;
-
using UnityEngine;
-
using Color = Unity.UIWidgets.ui.Color;
-
using MyTestUIWidgets.UIWidgets;
-
using Unity.UIWidgets.foundation;
-
-
namespace
MyTestUIWidgets
-
{
-
public
class
TodoListApp :
UIWidgetsPanel
-
{
-
protected override Widget createWidget()
-
{
-
return
new TodoListPage();
-
}
-
}
-
class
TodoListPage :
StatefulWidget
-
{
-
public override State createState()
-
{
-
return
new TodoListState();
-
}
-
}
-
class
TodoListState :
State<
TodoListPage>
-
{
-
public override void initState()
-
{
-
//PlayerPrefs.DeleteAll();
-
var toDoListContent = PlayerPrefs.GetString(
"TODO_LIST_KEY",
string.Empty);
-
var splitDatas = toDoListContent.Split(
new[] {
"@@@@" }, StringSplitOptions.None);
-
mTodoDatas = splitDatas.Where(data => !
string.IsNullOrEmpty(data)).ToList();
-
}
-
private List<
string> mTodoDatas =
null;
-
public override Widget build(BuildContext context)
-
{
-
return FQ.ListView
-
.Child(
new TodoInputView( data => { AddState(data); }))
-
.Child(TodoViews)
-
.Padding(EdgeInsets.only(
0,
50))
-
.EndListView();
-
}
-
-
private void AddState( string data)
-
{
-
this.setState(() =>
-
{
-
mTodoDatas.Add(data);
-
Save();
-
});
-
}
-
void Save()
-
{
-
StringBuilder stringBuilder =
new StringBuilder();
-
mTodoDatas.ForEach(
-
data =>
-
{
-
stringBuilder.Append(data);
-
stringBuilder.Append(
"@@@@");
-
-
}
-
);
-
PlayerPrefs.SetString(
"TODO_LIST_KEY", stringBuilder.ToString());
-
}
-
Widget[] TodoViews
-
{
-
get
-
{
-
return mTodoDatas.Select(data =>
new TodoView(data, () =>
-
{
-
this.setState(() =>
-
{
-
mTodoDatas.Remove(data);
-
Save();
-
});
-
})).ToArray();
-
}
-
}
-
}
-
}
现在这样的代码就能做出刚才的效果， 我会接着持续更新
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
