smobiler仿饿了么app搜索页面
饿了么-搜索页面如下图所示:
完整代码见git :https://github.com/comsmobiler/BlogsCode
创建窗体
创建一个smobilerForm ,文件名设置ElmSearching, 将窗体的Layout设置Relative,再设置窗体的Statusbar属性
并在窗体中拖入Panel和ListView,Panel.Height 设置40,Listview.Flex设置1 ,Listview的模板类设置成ListLayout
实现搜索框
将上图的panel1.Layout设置Relative,panel1.Direction设置Row,panel1.Padding设置(6,6,6,6),panel1.Size设置为(0,40)。
在panel1中拖入imageButton1,
imageButton1.ImagtType设置FontIcon,
imageButton1.ResourceID设置” angle-left” ,
imageButton1.Size设置(27,0)。
在imageButton1的点击事件中写this.Close();
接着在panel1中拖入panel2,
panel2.BorderRadius设置12,
panel2.Direction设置Row,
panel2.ItemAlign设置Center,
panel2.Layout设置Relative,
panel2.Touchable设置true,
panel2.BackColor设置WhiteSmoke,
panel2.Magrin设置(6,0,0,0),
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.Flex设置1
KeyLab.ForeColor设置Gainsboro
KeyLab.Location设置(6,0,0,0)
KeyLab.Margin设置(6,0,0,0)
KeyLab.Padding设置(4,0,0,0)
KeyLab.Text设置”曼玲粥店”
创建SmobilerUserControl
创建一个SmobilerUserControl,文件名设置ElmLayout, 将ElmLayout.Layout设置Relative,BackColor s设置White,Flex设置1
上图panel1 用来实现搜索框,步骤和前面一样,只是ELmLayout中的KeyLab改成TextBox控件,最后在ElmLayout中拖入两个panel,分别命名为hisPanel和disPanel,这两个Panel的Size设置(0,0)。这样设计器部分就完成了。具体代码见git :https://github.com/comsmobiler/BlogsCode
smobiler仿饿了么app搜索页面相关推荐
- 最新 vue2.x 仿饿了么app商家页面 项目总结
最新vue2.x仿饿了么app 商家页面 项目总结 标签(空格分隔): vuejs 前言 仿饿了么app是基于vue2.x最新实战项目,用到的技术栈 vue2 + vue-router2 + vue- ...
- 最新vue2.x仿饿了么app 商家页面 项目总结
前言 仿饿了么app是基于vue2.x最新实战项目,用到的技术栈 vue2 + vue-router2 + vue-cli2 + vue-resource + stylus + flex布局 + es ...
- 饿了吗app都是用html写的,Vue2.0仿饿了么webapp单页面应用详细步骤
这篇文章主要为大家详细介绍了Vue2.0仿饿了么webapp单页面应用详细步骤,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 部分截图 [图片暂 ...
- Android仿饿了么加减控件,Flutter + Native混合栈仿饿了么APP
前言 一个基于Flutter + Native混合开发的APP,请求数据均人为制造. 目前仅上传Android版本,iOS暂未上传 APK下载 Github地址 效果图: 实现功能: 首页 使用百度定 ...
- Vue仿饿了么app项目总结
前言 这是我的第一个基于Vue项目的作品,目的是把之前的前端知识累积加上目前流行的前端框架,以项目的形式展示出来. 大家在学习Vue的时候,可以将此项目作为学习Vue框架的一个模板 Vue仿饿了么ap ...
- vue +vue-router + es6 +webpack 高仿饿了么app
vue +vue-router + es6 +webpack 高仿饿了么app 刚通过某课网的教程学习了vue高仿饿了么app,由于教程是用Vue1.0编写的,现在Vue已经更新到了2.0,所以项目遇 ...
- smobiler仿京东app搜索页面
京东app搜索界面如下图所示: 完整代码见git :https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_Smob ...
- vue结合饿了么_vue高仿饿了么APP(一)
在网上找了一个vue的视频教程---高仿饿了么,讲得不错,自己也跟着讲师做了一遍,现在来帮自己整理,总结一下,加深对vue的理解. 一,功能技术分析 1,利用vue-resource实现前后端数据交互 ...
- vue高仿饿了么APP(二)
这里我直接跳过vue-cli的安装. 一,vue.js代码是如何运行的? 1,进入页面,首先加载index.html和main.js文件. ① index.html文件 <!DOCTYPE ht ...
最新文章
- 【cocos2d-x 手游研发小技巧(3)Android界面分辨率适配方案】
- 爬虫图片href是html图片,python爬虫取图片详解,
- 网站快照更新不及时有什么好的解决办法吗?
- 软件开发模型之优缺点
- ListView在列表中新增一行的操作(增加、取消)
- django 转发_教你搭建Django环境,就是这么简单
- POJ - 2516 Minimum Cost(最小费用最大流)
- SAP Spartacus 用户请求中的 current id 是从哪里来的
- WebGL(四)—— 第一个WEBGL程序
- Development cannot be enabled while your device is locked.
- UbuntuHelp:AptGet/Howto/zh
- 金庸群侠传5 自动化脚本 绝情谷大厅开宝箱按键游戏
- 电脑文件误删除怎么恢复?
- Javaweb支付宝支付
- 期货反向跟单--有趣儿的差异化
- 整个世界都是你的绿幕:这个视频抠图换背景的方法太惊艳了!
- 2.6亿孤独灵魂能否听出一座喜马拉雅
- 企查查接口php版本~
- UnityHub打开黑屏的解决方法
- 使用calibre导出pdf格式时调整行间距