smobiler仿得到app筛选页面

本文档详细介绍了如何使用SmobilerForm创建一个带有搜索框和历史记录功能的窗体。通过拖放组件并设置布局,实现了搜索框的样式和功能,包括搜索图标、清除按钮以及搜索结果的ListView展示。同时,展示了如何添加历史记录面板和热门搜索面板,提供了SmobilerUserControl的创建和布局设计。最后,给出了实现效果的截图。
摘要由CSDN通过智能技术生成

原型图:

 

完整代码见git :

https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/Forms/DDSearch.cs

创建窗体

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

 

并在窗体中拖入Panel和ListView, 

 

panel1用来放置搜索框, panel1.Height 设置40。listView用来显示搜索结果,listView.Flex设置1 。

实现搜索框

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

 

在panel1中拖入imageButton,

 

imageButton1.ImagtType设置FontIcon,

 

imageButton1.ResourceID设置” angle-left” ,

 

imageButton1.Flex设置1,

 

imageButton1.IconColor设置Silver。

 

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

 

接着在panel1中拖入panel2,

 

Panel2.BorderRadius设置12,

 

Panel2.Direction设置Row,

 

Panel2.ItemAlign设置Center,

 

Panel2.Layout设置Relative,

 

Panel2.Touchable设置true,

 

Panel2.BackColor设置WhiteSmoke,

 

Panel2.Flex设置1。

 

在panel2 中加入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设置(6,0,0,0),

KyeLab.Margin设置(6,0,0,0)

 

KeyLab.Text设置“数学通识”

创建SmobilerUserControl

 

创建一个SmobilerUserControl,文件名设置DDSelectLayout, 将DDSelectLayout.Layout设置Relative,BackColor设置White

 

 

上图panel1 用来实现搜索框,panel4用来放置筛选按钮,步骤和前文中的一样,接着再入两个panel,分别命名为hisPanel和disPanel。hisPanel.Layout设置Relative,Size设置(0,0),用来放置历史记录。

 

disPanel.Layout设置Relative,Flex设置1,用了放置热门搜索项。

 

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

 

实现效果

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值