新增 卡片布局及其示例

This commit is contained in:
hyb1996
2018-10-18 12:09:03 +08:00
parent 9e3b40e3c9
commit 270b2f7844
7 changed files with 218 additions and 37 deletions

View File

@@ -0,0 +1,42 @@
"ui";
ui.layout(
<vertical>
<appbar>
<toolbar id="toolbar" title="卡片布局"/>
</appbar>
<card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
cardElevation="1dp" gravity="center_vertical">
<vertical padding="18 8" h="auto">
<text text="写操作系统作业" textColor="#222222" textSize="16sp"/>
<text text="明天第12节" textColor="#999999" textSize="14sp"/>
</vertical>
<View bg="#f44336" h="*" w="10"/>
</card>
<card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
cardElevation="1dp" gravity="center_vertical">
<vertical padding="18 8" h="auto">
<text text="修复ui模式的Bug" textColor="#222222" textSize="16sp"/>
<text text="无限期" textColor="#999999" textSize="14sp"/>
</vertical>
<View bg="#ff5722" h="*" w="10"/>
</card>
<card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
cardElevation="1dp" gravity="center_vertical">
<vertical padding="18 8" h="auto">
<text text="发布Auto.js 5.0.0正式版" textColor="#222222" textSize="16sp"/>
<text text="2019年1月" textColor="#999999" textSize="14sp"/>
</vertical>
<View bg="#4caf50" h="*" w="10"/>
</card>
<card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
cardElevation="1dp" gravity="center_vertical">
<vertical padding="18 8" h="auto">
<text text="完成毕业设计和论文" textColor="#222222" textSize="16sp"/>
<text text="2019年4月" textColor="#999999" textSize="14sp"/>
</vertical>
<View bg="#2196f3" h="*" w="10"/>
</card>
</vertical>
);

View File

@@ -0,0 +1,46 @@
"ui";
ui.layout(
<frame>
<vertical>
<appbar>
<toolbar id="toolbar" title="卡片布局" />
</appbar>
<list id="todos">
<card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
cardElevation="1dp" gravity="center_vertical">
<vertical padding="18 8" h="auto">
<text text="{{this.title}}" textColor="#222222" textSize="16sp" />
<text text="{{this.summary}}" textColor="#999999" textSize="14sp" />
</vertical>
<View bg="{{this.color}}" h="*" w="10" />
</card>
</list>
</vertical>
</frame>
);
var todos = [
{
title: "",
summary: "",
color: ""
},
{
title: "",
summary: "",
color: ""
},
{
title: "",
summary: "",
color: ""
},
{
title: "",
summary: "",
color: ""
}
];
ui.todos.setDataSource(todos);