用户
 找回密码
 立即注册
发表于 2021-4-25 13:46:48
原型图:

完整代码见git
https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/SelectForm/ZRSelectForm.cs
创建窗体
创建一个SmobilerForm ,文件名设置ZRSelectForm,将窗体的Layout设置Relative,再设置窗体的Statusbar属性


并在窗体中拖入两个Panel


panel1用来放置搜索框,panel2用来放置“综合排序”、“销量最高”、“距离最近”、“筛选”按钮和listview1
panel1.Height 设置40panel2.Flex设置1
实现搜索框
将上图的panel1.Layout设置Relativepanel1.Direction设置Rowpanel1.Padding设置(6,6,6,6),panel1.Size设置为(0,40)

panel1中拖入imageButton

imageButton6.ImagtType设置FontIcon

imageButton6.ResourceID设置”angle-left ,

imageButton6.Flex设置1

imageButton6.IconColor设置Silver

imageButton6的点击事件中写this.Close();

接着在panel1中拖入panel3

Panel3.BorderRadius设置4

Panel3.Direction设置Row

Panel3.ItemAlign设置Center

Panel3.Layout设置Relative

Panel3.Touchable设置true

Panel3.BackColor设置WhiteSmoke

Panel3.Flex设置6

panel3 中加入fonticon控件,

fontIcon1.Location设置(6,0),

fontIcon1.Size设置(15,15),

fontIcon1.ForeColor设置Gainsboro

fontIcon1.Resource设置”search

panel2中加入Label控件,Label控件的Name设置KeyLab

KeyLab.Size设置(0,0)

KeyLab.ForeColor设置Gainsboro

KeyLab.Location设置(12,0,0,0

KeyLab.Text设置“清河”

最后在panel1中拖入imageButton7

imageButton7.ImagtType设置FontIcon

imageButton7.ResourceID设置“crosshairs ,

imageButton7.Flex设置1

imageButton7.IconColor设置Silver
放置筛选按钮
panel4.Direction设置RowLayout设置RelativePadding设置(12,0,12,0)Height设置40。接着在panel4中放置4ImageButtonFlex属性都设置1

imageButton1.ImageDirection设置Right
imageButton1.ImageType设置“FontIcon”,
imageButton1.ResourceID设置”angel-down”
imageButton1.Text设置合租
imageButton1.ImgTextRatio设置(2,8)

imageButton2.ImageDirection设置Right
imageButton2.ImageType设置“FontIcon”,
imageButton2.ResourceID设置”angel-down”
imageButton2.Text位置
imageButton2.ImgTextRatio设置(2,8)

imageButton3.ImageDirection设置Right
imageButton3.ImageType设置“FontIcon”,
imageButton3.ResourceID设置”angel-down”
imageButton3.Text设置租金
imageButton3.ImgTextRatio设置(2,8)

imageButton4.ImageDirection设置Right
imageButton4.ImageType设置“FontIcon”,
imageButton4.ResourceID设置”angle-down “
imageButton4.Text设置筛选
imageButton4.ImgTextRatio设置(2,8)

imageButton5.ImageDirection设置Right
imageButton5.ImageType设置“FontIcon,
imageButton5.ResourceID设置“arrows-v
imageButton5.ImgTextRatio设置(3,7)

创建SmobilerUserControl
创建一个SmobilerUserControl,文件名设置ZRSelectLayoutZRSelectLayout.Layout设置RelativeBackColor设置White



上图panel1 用来实现搜索框,panel4用来放置筛选按钮,步骤和前文中的一样,接着再入两个panel,分别命名为mianpanelpanel3mianpanel.Layout设置RelativeFlex设置1,用来放置筛选项。

Panel3.Layout设置RelativeDirection设置RowHeight设置46Padding设置(6,6,6,6)。再往panel3中放置两个buttonFlex分别设置12,。button1.Text设置“清除”,BackColor设置Silver button2.Text设置“查看”,BackColor设置orange

这样设计器部分就完成了,代码部分请查看git

实现效果



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
使用道具 举报 回复
发新帖
您需要登录后才可以回帖 登录 | 立即注册