版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
接着就开始继续学习UIWidgets主题材质等一系列
我们这节来学习 脚手架 Scaffold类 和 MaterialApp类
这张图是从flutter中找的图
ListTile 用法 必须在MaterialApp类里面才能使用
效果就是这样的
学习ListTile
给ListTile添加Icon
需要在代码中添加这样一段代码 添加一下字体
-
protected override void OnEnable()
-
{
-
base.OnEnable();
-
FontManager.instance.addFont(Resources.Load<Font>(
"MaterialIcons-Regular"),
"Material Icons",fontWeight:FontWeight.normal);
-
FontManager.instance.addFont(Resources.Load<Font>(
"GalleryIcons"),
"GalleryIcons");
-
}
然后这个是使用Icon方法
-
public override Widget build(BuildContext context)
-
{
-
return
-
new ListTile(
-
leading:
new Icon( icon:Icons.check ),
-
// leading: new Text(data : "我是领导标题"),
-
subtitle :
new Text(data :
"我是副标题"),
-
//trailing : new Text(data : "我是补充说明"),
-
trailing :
new Icon( icon:Icons.delete ),
-
title: FQ.Text.Data(mData).SetSize(
30).EndText().OnTap(
-
()=>{
-
mOnFinish();
-
}
-
));
-
}
接着我们给输入框增加一个外边框 我们知道 Container 的才有外边框的属性
decoration :new BoxDecoration 添加一个BoxDecoration
然后看到的就是这种效果
- 接着我们学习Drawer 这个是存在scaffold 下的 效果就是这种效果
- 接着我们学习PopupMenuButton 这个 可以显示出一个
然后通过内部的itemBuilder 生成一个下拉列表 跟他的Demo一样 复制他的Demo过来
-
class
Choice
-
{
-
public Choice(string title, IconData icon)
-
{
-
this.title = title;
-
this.icon = icon;
-
}
-
public
readonly
string title;
-
public
readonly IconData icon;
-
public
static List<Choice> choices =
new List<Choice> {
-
new Choice(
"Car", Unity.UIWidgets.material.Icons.directions_car),
-
new Choice(
"Bicycle", Unity.UIWidgets.material.Icons.directions_bike),
-
new Choice(
"Boat", Unity.UIWidgets.material.Icons.directions_boat),
-
new Choice(
"Bus", Unity.UIWidgets.material.Icons.directions_bus),
-
new Choice(
"Train", Unity.UIWidgets.material.Icons.directions_railway),
-
new Choice(
"Walk", Unity.UIWidgets.material.Icons.directions_walk)
-
};
-
}
然后构成还放在 scaffold 的actions下面
-
actions:
new List<Widget>(){
-
new IconButton(icon:
new Icon(Icons.image)),
-
new IconButton(icon:
new Icon(Icons.image)),
-
new PopupMenuButton<Choice>(
-
onSelected: (choice)=> { Debug.Log(choice.title); },
-
itemBuilder: (BuildContext subContext) => {
-
List<PopupMenuEntry<Choice>> popupItems =
new List<PopupMenuEntry<Choice>>();
-
for (
int i =
0; i < Choice.choices.Count; i++) {
-
popupItems.Add(
new PopupMenuItem<Choice>(
-
value: Choice.choices[i],
-
child:
new Text(Choice.choices[i].title)));
-
}
-
return popupItems;
-
}
-
)
-
}
实现的效果就是这样
好用
接着我们学习FloatingActionButton 类 依然是在scaffold下的
复制demo里面粘贴进来效果是这样的
就是红色框框圈住的小铃铛
然后接着咱们所做的内容就是如下图所示
选中代办事项列表 和已经完成事项列表 添加保存删除 等操作
我先粘贴代码
这次多了几个类 这个类用来注册重新载入setState方法的
-
using System;
-
using MyTestUIWidgets;
-
namespace
MyTestUIWidgets.UIWidgets
-
{
-
public
class
ViewState
-
{
-
public
static TodoListApp.TodoListPageMode todoListPageMode = TodoListApp.TodoListPageMode.List;
-
public
static Action OnStateChange;
-
-
}
-
}
这个类是从重写视图类 输入框 和下面的显示列表
-
-
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;
-
using Unity.UIWidgets.material;
-
-
namespace
MyTestUIWidgets.UIWidgets
-
{
-
public
class
TodoView :
StatelessWidget
-
{
-
private
readonly Todo mData;
-
private
readonly Action mOnFinish;
-
private
readonly Action mDelete;
-
public TodoView(Todo data, Action onFinish, Action onDelete)
-
{
-
mData = data;
-
mOnFinish = onFinish;
-
mDelete = onDelete;
-
}
-
public override Widget build(BuildContext context)
-
{
-
return
-
new ListTile(
-
-
leading:
new IconButton(icon:
new Icon(icon: Icons.check_box_outline_blank, color: Colors.blueAccent, size:
30), onPressed: () => { mOnFinish(); },iconSize:
50),
-
// .OnTap(() =>
-
// {
-
-
// }),
-
// leading: new Text(data : "我是领导标题"),
-
subtitle:
new Text(data: DateTime.Now.ToString(
"yyyy年 m月 d日 HH:mm:ss ")),
-
//trailing : new Text(data : "我是补充说明"),
-
trailing:
new IconButton(icon:
new Icon(icon: Icons.delete_outline, color: Colors.redAccent, size:
30), onPressed: () => { mDelete(); },iconSize:
50),
-
// .OnTap(() =>
-
// {
-
// mDelete();
-
// // mOnFinish();
-
// }),
-
title: FQ.Text.Data(mData.Content).SetSize(
30).EndText());
-
// 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).Height(
40 ).Dec(Colors.lightBlue).Margin(EdgeInsets.only(left :
60))
-
.Child(FQ.EditableText.FontSize(
30)
-
.OnValueChanged(mInputContent => {
this.mInputContent = mInputContent; } )
-
.OnSubmit(inputvalue => AddTodo())
-
.EndEditableTextBuilder())
-
.EndContainer(),
-
new IconButton( icon:
new Icon(Icons.add_box,size:
40,color:Colors.green),onPressed:AddTodo),
-
// FQ.Container.Child(
-
// new Icon(Icons.add_box,size:40,color:Colors.green)
-
// .OnTap(() => {
-
// AddTodo();
-
// Debug.Log("On Tap");})
-
// ).Margin(EdgeInsets.only(left:30)).EndContainer()
-
}
-
));
-
}
-
}
-
}
-
这个类用来扩展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;
-
using Unity.UIWidgets.material;
-
-
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;
-
private
float? mHeight =
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 Height(float height)
-
{
-
mHeight = height;
-
return
this;
-
}
-
public ContainerBuild Alignment(Alignment _alignment)
-
{
-
mAlignment = _alignment;
-
return
this;
-
}
-
private Color mBorderColor =
null;
-
public ContainerBuild Dec(Color color)
-
{
-
mBorderColor = color;
-
-
return
this;
-
}
-
public Container EndContainer()
-
{
-
return
new Container(child: mChild,
-
alignment: mAlignment,
-
color: mColor,
-
width: mWidth,
-
height:mHeight,
-
margin: mMargin,
-
decoration:
-
mBorderColor !=
null ?
new BoxDecoration(border: Border.all(mBorderColor)) :
null);
-
}
-
}
-
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);
-
}
-
}
-
-
}
这个类用来保存列表中的数据
-
using System;
-
using System.Collections.Generic;
-
using System.Linq;
-
using System.Text;
-
using UnityEngine;
-
namespace
MyTestUIWidgets.UIWidgets
-
{
-
public
class
Todo
-
{
-
public
string Content =
string.Empty;
-
public
bool Finished =
false;
-
}
-
public
static
class
Model
-
{
-
public static List<Todo> Load()
-
{
-
//PlayerPrefs.DeleteAll();
-
var toDoListContent = PlayerPrefs.GetString(
"TODO_LIST_KEY",
string.Empty);
-
var splitDatas = toDoListContent.Split(
new[] {
"@@@@" }, StringSplitOptions.None);
-
return splitDatas.Where(data => !
string.IsNullOrEmpty(data))
-
.Select(toddData =>
-
{
-
var todo =
new Todo();
-
var todoSplitDatas = toddData.Split(
new[] {
"::::" }, StringSplitOptions.None);
-
todo.Content = todoSplitDatas[
0];
-
if (todoSplitDatas.Length >
1)
-
{
-
todo.Finished =
bool.Parse(todoSplitDatas[
1]);
-
}
-
return todo;
-
})
-
.ToList();
-
}
-
public static void Save(this List<Todo> self)
-
{
-
StringBuilder stringBuilder =
new StringBuilder();
-
self.ForEach(
-
data =>
-
{
-
stringBuilder.Append(data.Content);
-
stringBuilder.Append(
"::::");
-
stringBuilder.Append(data.Finished);
-
stringBuilder.Append(
"@@@@");
-
}
-
);
-
PlayerPrefs.SetString(
"TODO_LIST_KEY", stringBuilder.ToString());
-
}
-
}
-
}
这个类用来构成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;
-
using Unity.UIWidgets.animation;
-
using Unity.UIWidgets.material;
-
using Unity.UIWidgets.ui;
-
using UnityEditor;
-
-
namespace
MyTestUIWidgets
-
{
-
class
Choice
-
{
-
public Choice(string title, IconData icon)
-
{
-
this.title = title;
-
this.icon = icon;
-
}
-
public
readonly
string title;
-
public
readonly IconData icon;
-
public
static List<Choice> choices =
new List<Choice> {
-
new Choice(
"Car", Unity.UIWidgets.material.Icons.directions_car),
-
new Choice(
"Bicycle", Unity.UIWidgets.material.Icons.directions_bike),
-
new Choice(
"Boat", Unity.UIWidgets.material.Icons.directions_boat),
-
new Choice(
"Bus", Unity.UIWidgets.material.Icons.directions_bus),
-
new Choice(
"Train", Unity.UIWidgets.material.Icons.directions_railway),
-
new Choice(
"Walk", Unity.UIWidgets.material.Icons.directions_walk)
-
};
-
}
-
public
class
TodoListApp :
UIWidgetsPanel
-
{
-
protected override void OnEnable()
-
{
-
base.OnEnable();
-
FontManager.instance.addFont(Resources.Load<Font>(
"MaterialIcons-Regular"),
"Material Icons", fontWeight: FontWeight.normal);
-
FontManager.instance.addFont(Resources.Load<Font>(
"GalleryIcons"),
"GalleryIcons");
-
}
-
protected override Widget createWidget()
-
{
-
return
new MaterialApp(home:
-
new Scaffold(
-
appBar:
new AppBar(title:
new Center(child: FQ.Text.Data(
"My App").SetSize(
20).EndText()),
-
backgroundColor: Color.black,
-
// leading: new Icon(Icons.home),
-
actions:
new List<Widget>(){
-
new IconButton(icon:
new Icon(Icons.image,color:Colors.white)),
-
new IconButton(icon:
new Icon(Icons.image,color:Colors.white)),
-
new PopupMenuButton<Choice>(
-
onSelected: (choice)=> { Debug.Log(choice.title); },
-
itemBuilder: (BuildContext subContext) => {
-
List<PopupMenuEntry<Choice>> popupItems =
new List<PopupMenuEntry<Choice>>();
-
for (
int i =
0; i < Choice.choices.Count; i++) {
-
popupItems.Add(
new PopupMenuItem<Choice>(
-
value: Choice.choices[i],
-
child:
new Text(Choice.choices[i].title)));
-
}
-
return popupItems;
-
}
-
)
-
}),
-
drawer:
new Drawer(
-
child: FQ.ListView.Padding(EdgeInsets.zero).
-
Child(
new Divider()).
-
Child(
new ListTile(leading:
new Icon(Icons.list),
-
title: FQ.Text.Data(
"代办事项").EndText(), onTap: () =>
-
{
-
ViewState.todoListPageMode = TodoListPageMode.List;
-
Debug.Log(
"点击了待办事项");
-
ViewState.OnStateChange.Invoke();
-
})).
-
Child(
new Divider()).
-
Child(
new ListTile(
-
leading:
new Icon(Icons.check_box),
-
title: FQ.Text.Data(
"已完成事项").EndText(), onTap: () =>
-
{
-
Debug.Log(
"点击了已完成");
-
ViewState.todoListPageMode = TodoListPageMode.Finished;
-
ViewState.OnStateChange.Invoke();
-
})
-
).Child(
new Divider())
-
.EndListView()
-
),
-
body:
new TodoListPage(),
-
-
floatingActionButton:
new FloatingActionButton(
-
backgroundColor: Colors.redAccent,
-
child:
new Icon(Unity.UIWidgets.material.Icons.add_alert),
-
onPressed: () => { Debug.Log(
"OnbuttonClick"); }
-
-
)
-
));
-
}
-
-
class
TodoListPage :
StatefulWidget
-
{
-
public override State createState()
-
{
-
return
new TodoListState();
-
}
-
}
-
public
enum TodoListPageMode
-
{
-
List,
-
Finished
-
}
-
class
TodoListState :
State<
TodoListPage>
-
{
-
-
private TodoListPageMode mPageMode = TodoListPageMode.Finished;
-
-
-
public override void initState()
-
{
-
ViewState.OnStateChange += OnChange;
-
mTodoDatas = Model.Load();
-
}
-
public override void deactivate()
-
{
-
ViewState.OnStateChange -= OnChange;
-
}
-
void OnChange()
-
{
-
this.setState(() => { });
-
}
-
private List<Todo> mTodoDatas =
null;
-
public override Widget build(BuildContext context)
-
{
-
if (ViewState.todoListPageMode == TodoListPageMode.List)
-
{
-
return FQ.ListView
-
//.Child(new Text(data: "哈哈哈哈哈"))
-
.Child(
new TodoInputView(data => { AddState(data); }))
-
.Child(ListTodoViews)
-
.Padding(EdgeInsets.only(
0,
50))
-
.EndListView();
-
}
-
else
-
{
-
return FQ.ListView
-
//.Child(new Text(data: "哈哈哈哈哈"))
-
//.Child(new TodoInputView(data => { AddState(data); }))
-
.Child(FinishedListView)
-
.Padding(EdgeInsets.only(
0,
50))
-
.EndListView();
-
}
-
}
-
private void AddState(string data)
-
{
-
this.setState(() =>
-
{
-
mTodoDatas.Add(
new Todo() { Content = data, Finished =
false });
-
Save();
-
});
-
}
-
private void Save()
-
{
-
mTodoDatas.Save();
-
}
-
Widget[] FinishedListView
-
{
-
get
-
{
-
var retWidgets =
new List<Widget>();
-
foreach (
var data
in mTodoDatas.Where(data => data.Finished))
-
{
-
retWidgets.Add(
new TodoView(data, () =>
-
{
-
this.setState(() =>
-
{
-
Debug.Log(data.Finished +
"未设置");
-
data.Finished =
false;
-
Debug.Log(data.Finished +
"设置后");
-
});
-
Save();
-
},
-
() =>
-
{
-
this.setState(() =>
-
{
-
mTodoDatas.Remove(data);
-
Save();
-
});
-
}));
-
retWidgets.Add(
new Divider());
-
}
-
return retWidgets.ToArray();
-
}
-
}
-
Widget[] ListTodoViews
-
{
-
get
-
{
-
var retWidgets =
new List<Widget>();
-
foreach (
var data
in mTodoDatas.Where(data => !data.Finished))
-
{
-
retWidgets.Add(
new TodoView(data, () =>
-
{
-
this.setState(() =>
-
{
-
Debug.Log(data.Finished +
"未设置");
-
data.Finished =
true;
-
Debug.Log(data.Finished +
"设置后");
-
});
-
Save();
-
},
-
() =>
-
{
-
this.setState(() =>
-
{
-
mTodoDatas.Remove(data);
-
Save();
-
});
-
}));
-
retWidgets.Add(
new Divider());
-
}
-
return retWidgets.ToArray();
-
// return mTodoDatas.Where(data => !data.Finished).Select(data => new TodoView(data, () =>
-
// {
-
// this.setState(() =>
-
// {
-
// Debug.Log(data.Finished + "未设置");
-
// data.Finished = true;
-
// Debug.Log(data.Finished + "设置后");
-
// });
-
// Save();
-
// }, () =>
-
// {
-
// this.setState(() =>
-
// {
-
// mTodoDatas.Remove(data);
-
// Save();
-
// });
-
// })).ToArray();
-
}
-
}
-
}
-
}
-
}
-
这三节课的Demo我会上传在github上 一会会在下面贴上连接
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
