温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何实现smobiler仿自如app筛选页面

发布时间:2021-10-13 12:00:26 来源:亿速云 阅读:126 作者:iii 栏目:编程语言

本篇内容介绍了“如何实现smobiler仿自如app筛选页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

原型图:

如何实现smobiler仿自如app筛选页面

创建窗体

创建一个SmobilerForm ,文件名设置ZRSelectForm,将窗体的Layout设置Relative,再设置窗体的Statusbar属性

如何实现smobiler仿自如app筛选页面

并在窗体中拖入两个Panel

如何实现smobiler仿自如app筛选页面

panel1用来放置搜索框,panel2用来放置“综合排序”、“销量最高”、“距离最近”、“筛选”按钮和listview1。

panel1.Height 设置40,panel2.Flex设置1

实现搜索框

将上图的panel1.Layout设置Relative,panel1.Direction设置Row,panel1.Padding设置(6,6,6,6),panel1.Size设置为(0,40)。

如何实现smobiler仿自如app筛选页面

在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设置Row,Layout设置Relative,Padding设置(12,0,12,0),Height设置40。接着在panel4中放置4个ImageButton,Flex属性都设置1,

如何实现smobiler仿自如app筛选页面

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,文件名设置ZRSelectLayout, 将ZRSelectLayout.Layout设置Relative,BackColor设置White

如何实现smobiler仿自如app筛选页面

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

Panel3.Layout设置Relative,Direction设置Row,Height设置46,Padding设置(6,6,6,6)。再往panel3中放置两个button,Flex分别设置1和2,。button1.Text设置“清除”,BackColor设置Silver, button2.Text设置“查看”,BackColor设置orange。

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

实现效果

如何实现smobiler仿自如app筛选页面

“如何实现smobiler仿自如app筛选页面”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI