smobiler仿饿了么app搜索页面
16lz
2021-03-11
饿了么-搜索页面如下图所示：
完整代码见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)。这样设计器部分就完成了。
代码
using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text;using SelectDemo.Layouts;using Smobiler.Core;using Smobiler.Core.Controls;namespace SelectDemo{ partial class ElmSearch : Smobiler.Core.Controls.MobileForm { public ElmSearch() : base() { //This call is required by the SmobilerForm. InitializeComponent(); } private DBClass dBClass = new DBClass();//DBClass 数据库查询类 private void panel2_Press(object sender, EventArgs e) { ShowElmLayout(); } private void ShowElmLayout() { //筛选项数据 SelectData d1 = new SelectData() { title = "历史搜索", items = new String[] { "粥" }, ishow = true }; SelectData d2 = new SelectData() { title = "历史搜索", items = new String[] { "超级发布30减20起", "小恒水饺", "早餐", "油条", "炸鸡" ,"包子","皮蛋瘦肉粥"}, ishow = false }; List<SelectData> sds = new List<SelectData>(); sds.Add(d1); sds.Add(d2); // 实例化ElmLayout ElmLayout uc = new ElmLayout(sds, keyLab.Text); DialogOptions footerDialogOptions; footerDialogOptions = new DialogOptions(LayoutJustifyAlign.FlexStart, System.Drawing.Color.Transparent, Smobiler.Core.Controls.Padding.Empty, true); //在窗体中弹出ElmLayout ShowDialog(uc, footerDialogOptions, (obj, args) => { if (uc.ShowResult == ShowResult.Yes) { keyLab.Text = uc.currentkey; DataTable dt = dBClass.DbConnectAndQuert(uc.querystr); listView1.Rows.Clear(); listView1.DataSource = dt; listView1.DataBind(); } }); } private void imageButton1_Press(object sender, EventArgs e) { this.Close(); } }}using System;using System.Collections.Generic;using System.Linq;using System.Text;using Smobiler.Core;using Smobiler.Core.Controls;namespace SelectDemo.Layouts{ ////ToolboxItem用于控制是否添加自定义控件到工具箱，true添加，false不添加 //[System.ComponentModel.ToolboxItem(true)] partial class ElmLayout : Smobiler.Core.Controls.MobileUserControl { public ElmLayout() : base() { //This call is required by the SmobilerUserControl. InitializeComponent(); } public ElmLayout(List<SelectData> selectDatas, string defalutStr) : base() { //This call is required by the SmobilerUserControl. InitializeComponent(); GethHistory(selectDatas, defalutStr); } public string currentkey; public string querystr; private void CloseDialog_Press(object sender, EventArgs e) { this.ShowResult = ShowResult.No; this.Close(); } private void GethHistory(List<SelectData> selectDatas, string defaultstr) { this.KeyLab.Text = defaultstr; foreach (SelectData data in selectDatas) { //该label用于显示“历史搜索”文字 Label label1 = new Label() { Text = data.title, Flex = 1, FontSize = 15, Size = new System.Drawing.Size(0, 25), Bold=true, ForeColor=System.Drawing.Color.Gray }; Panel p1 = new Panel() { Layout = LayoutPosition.Relative, Direction = LayoutDirection.Row, Size = new System.Drawing.Size(0, 0), Padding = new Padding(12, 0, 12, 0) }; p1.Controls.Add(label1); Panel p2 = new Panel() { Layout = LayoutPosition.Relative, Direction = LayoutDirection.Row, Size = new System.Drawing.Size(0, 0), Padding = new Padding(12, 0, 12, 0), Wrap = LayoutWrap.Wrap }; if (data.ishow == true) { //添加“历史搜索”后的删除按钮 ImageButton imgbtn = new ImageButton() { ImageType = ImageEx.ImageStyle.FontIcon, ResourceID = "trash-o", IconColor = System.Drawing.Color.Silver, Size = new System.Drawing.Size(25, 25) }; imgbtn.Press += this.DeleteButtonPress; p1.Controls.Add(imgbtn); for (int i = 0; i < data.items.Length; i++) { Button btn = new Button() { Text = data.items[i], BackColor = System.Drawing.Color.WhiteSmoke, ForeColor = System.Drawing.Color.Gray, Size = new System.Drawing.Size(0, 0), Padding = new Padding(12,8,12,8), BorderRadius = 4, Margin = new Margin(0, 4, 12, 4) }; btn.Press += this.SelectButtonPress; p2.Controls.Add(btn); } hisPanel.Controls.Add(p1); hisPanel.Controls.Add(p2); } else { //原型上“超级发布30减20起 按钮” Button spbtn = new Button() { Text = data.items[0], BackColor = System.Drawing.Color.AliceBlue, ForeColor = System.Drawing.Color.DeepSkyBlue, Size = new System.Drawing.Size(0, 0), Padding = new Padding(12,8,12,8), BorderRadius = 4, Margin = new Margin(0,4, 12, 4) }; spbtn.Press += this.SelectButtonPress; p2.Controls.Add(spbtn); for (int i = 1; i < data.items.Length; i++) { Button btn = new Button() { Text = data.items[i], BackColor = System.Drawing.Color.WhiteSmoke, ForeColor = System.Drawing.Color.Gray, Size = new System.Drawing.Size(0, 0), Padding = new Padding(12,8,12,8), BorderRadius = 4, Margin = new Margin(0, 4, 12, 4) }; btn.Press += this.SelectButtonPress; p2.Controls.Add(btn); } disPanel.Controls.Add(p1); disPanel.Controls.Add(p2); } } } /// <summary> /// 清空历史搜索记录 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void DeleteButtonPress(object sender, EventArgs e) { hisPanel.Controls.Clear(); } /// <summary> /// 搜索内容查询 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void SelectButtonPress(object sender, EventArgs e) { Button btn = (Button)sender; this.ShowResult = ShowResult.Yes; currentkey = btn.Text; //将查询关键字替换进去 querystr = @"SELECT * FROM `testdata` where data like '%"+currentkey+"%'"; this.Close(); } /// <summary> /// 搜索框回车键事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void KeyLab_SubmitEditing(object sender, EventArgs e) { this.ShowResult = ShowResult.Yes; currentkey = KeyLab.Text; //将查询关键字替换进去 querystr = @"SELECT * FROM `testdata` where data like '%" + KeyLab.Text+ "%'"; this.Close(); } private void imageButton1_Press(object sender, EventArgs e) { this.ShowResult = ShowResult.No; this.Close(); } }}using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;namespace SelectDemo{ class SelectData { public String title { set; get; } public String[] items { set; get;} public Boolean ishow { set; get; } public Boolean isradio { set; get; } public String type { set; get; } }}using System;using System.Collections.Generic;using System.Data;using System.Data.SqlClient;using System.Linq;using System.Text;using System.Threading.Tasks;using MySql.Data.MySqlClient;namespace SelectDemo{ class DBClass { /// <summary> /// 连接数据库并查询相应数据 /// </summary> /// <param name="query">数据库查询语句</param> /// <returns></returns> public DataTable DbConnectAndQuert(string query) { String connetStr = "server=127.0.0.1;port=3306;user=****;password=****; database=***;charset=utf8"; MySqlConnection conn = new MySqlConnection(connetStr); try { DataTable dt = new DataTable(); conn.Open(); MySqlCommand com = new MySqlCommand(query, conn); MySqlDataAdapter adapter = new MySqlDataAdapter(com); adapter.Fill(dt); return dt; } catch (MySqlException ex) { Console.WriteLine(ex.Message); return null; } finally { conn.Close(); } } }}更多相关文章
- vs设置背景图片
- Windows10 20H2 IT维护人员感兴趣的一些功能
- 几个小问题
- 6：VMware Horizon View 8.0－安装数据库服务器
- 如何设置HomePod？
- ui组件
- 安卓常用组件
- 安卓高级组件
- JavaScript初学习/之classList：动态设置元素类、dataset: 读写自