smobiler仿饿了么app搜索页面

饿了么-搜索页面如下图所示：

 

完整代码见git ：https://github.com/comsmobiler/blogscode

创建窗体

创建一个smobilerform ，文件名设置elmsearch， 将窗体的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)。这样设计器部分就完成了。

代码

elmsearch.cs

 1 using system;
 2 using system.collections.generic;
 3 using system.data;
 4 using system.linq;
 5 using system.text;
 6 using selectdemo.layouts;
 7 using smobiler.core;
 8 using smobiler.core.controls;
 9 
10 namespace selectdemo
11 {
12      partial class elmsearch : smobiler.core.controls.mobileform
13      {
14          public elmsearch() : base()
15          {
16              //this call is required by the smobilerform.
17              initializecomponent();
18          }
19 
20         private dbclass dbclass = new dbclass();//dbclass 数据库查询类
21          private void panel2_press(object sender, eventargs e)
22          {
23              showelmlayout();
24          }
25          private void showelmlayout()
26          {
27              //筛选项数据
28              selectdata d1 = new selectdata()
29              {
30                  title = "历史搜索",
31                  items = new string[] { "粥" },
32                  ishow = true
33              };
34              selectdata d2 = new selectdata()
35              {
36                  title = "历史搜索",
37                  items = new string[] { "超级发布30减20起", "小恒水饺", "早餐", "油条", "炸鸡" ,"包子","皮蛋瘦肉粥"},
38                  ishow = false
39              };
40 
41             list<selectdata> sds = new list<selectdata>();
42              sds.add(d1);
43              sds.add(d2);
44             
45              // 实例化elmlayout
46              elmlayout uc = new elmlayout(sds, keylab.text);
47              dialogoptions footerdialogoptions;
48              footerdialogoptions = new dialogoptions(layoutjustifyalign.flexstart, system.drawing.color.transparent, smobiler.core.controls.padding.empty, true);
49              //在窗体中弹出elmlayout
50              showdialog(uc, footerdialogoptions, (obj, args) =>
51              {
52                  if (uc.showresult == showresult.yes)
53                  {
54                      keylab.text = uc.currentkey;
55                      datatable dt = dbclass.dbconnectandquert(uc.querystr);
56                      listview1.rows.clear();
57                      listview1.datasource = dt;
58                      listview1.databind();
59                  }
60              });
61 
62         }
63          private void imagebutton1_press(object sender, eventargs e)
64          {
65              this.close();
66          }
67      }
68 }

elmlayout.cs

  1 using system;
  2 using system.collections.generic;
  3 using system.linq;
  4 using system.text;
  5 using smobiler.core;
  6 using smobiler.core.controls;
  7 
  8 namespace selectdemo.layouts
  9 {
 10     ////toolboxitem用于控制是否添加自定义控件到工具箱，true添加，false不添加
 11     //[system.componentmodel.toolboxitem(true)]
 12     partial class elmlayout : smobiler.core.controls.mobileusercontrol
 13     {
 14         public elmlayout() : base()
 15         {
 16             //this call is required by the smobilerusercontrol.
 17             initializecomponent();
 18         }
 19         public elmlayout(list<selectdata> selectdatas, string defalutstr) : base()
 20         {
 21             //this call is required by the smobilerusercontrol.
 22             initializecomponent();
 23             gethhistory(selectdatas, defalutstr);
 24         }
 25         public string currentkey;
 26         public string querystr;
 27 
 28         private void closedialog_press(object sender, eventargs e)
 29         {
 30             this.showresult = showresult.no;
 31             this.close();
 32 
 33         }
 34         private void gethhistory(list<selectdata> selectdatas, string defaultstr)
 35         {
 36             this.keylab.text = defaultstr;
 37             foreach (selectdata data in selectdatas)
 38             {
 39                 //该label用于显示“历史搜索”文字
 40                 label label1 = new label()
 41                 {
 42                     text = data.title,
 43                     flex = 1,
 44                     fontsize = 15,
 45                     size = new system.drawing.size(0, 25),
 46                     bold=true,
 47                     forecolor=system.drawing.color.gray
 48                 };
 49 
 50                 panel p1 = new panel()
 51                 {
 52                     layout = layoutposition.relative,
 53                     direction = layoutdirection.row,
 54                     size = new system.drawing.size(0, 0),
 55                     padding = new padding(12, 0, 12, 0)
 56                 };
 57 
 58                 p1.controls.add(label1);
 59 
 60                 panel p2 = new panel()
 61                 {
 62                     layout = layoutposition.relative,
 63                     direction = layoutdirection.row,
 64                     size = new system.drawing.size(0, 0),
 65                     padding = new padding(12, 0, 12, 0),
 66                     wrap = layoutwrap.wrap
 67                 };
 68                 if (data.ishow == true)
 69                 {   
 70                     //添加“历史搜索”后的删除按钮
 71                     imagebutton imgbtn = new imagebutton()
 72                     {
 73                         imagetype = imageex.imagestyle.fonticon,
 74                         resourceid = "trash-o",
 75                         iconcolor = system.drawing.color.silver,
 76                         size = new system.drawing.size(25, 25)
 77                     };
 78                     imgbtn.press += this.deletebuttonpress;
 79                     p1.controls.add(imgbtn);
 80 
 81                     for (int i = 0; i < data.items.length; i++)
 82                     {
 83                         button btn = new button()
 84                         {
 85                             text = data.items[i],
 86                             backcolor = system.drawing.color.whitesmoke,
 87                             forecolor = system.drawing.color.gray,
 88                             size = new system.drawing.size(0, 0),
 89                             padding = new padding(12,8,12,8),
 90                             borderradius = 4,
 91                             margin = new margin(0, 4, 12, 4)
 92                         };
 93                         btn.press += this.selectbuttonpress;
 94                         p2.controls.add(btn);
 95                     }
 96                     hispanel.controls.add(p1);
 97                     hispanel.controls.add(p2);
 98                 }
 99                 else
100                 {
101                     //原型上“超级发布30减20起 按钮”
102                     button spbtn = new button()
103                     {
104                         text = data.items[0],
105                         backcolor = system.drawing.color.aliceblue,
106                         forecolor = system.drawing.color.deepskyblue,
107                         size = new system.drawing.size(0, 0),
108                         padding = new padding(12,8,12,8),
109                         borderradius = 4,
110                         margin = new margin(0,4, 12, 4)
111                     };
112                     spbtn.press += this.selectbuttonpress;
113                     p2.controls.add(spbtn);
114 
115                     for (int i = 1; i < data.items.length; i++)
116                     {
117                         button btn = new button()
118                         {
119                             text = data.items[i],
120                             backcolor = system.drawing.color.whitesmoke,
121                             forecolor = system.drawing.color.gray,
122                             size = new system.drawing.size(0, 0),
123                             padding = new padding(12,8,12,8),
124                             borderradius = 4,
125                             margin = new margin(0, 4, 12, 4)
126                         };
127                         btn.press += this.selectbuttonpress;
128                         p2.controls.add(btn);
129                     }
130                     dispanel.controls.add(p1);
131                     dispanel.controls.add(p2);
132                 }
133 
134             }
135         }
136 
137         /// <summary>
138         /// 清空历史搜索记录
139         /// </summary>
140         /// <param name="sender"></param>
141         /// <param name="e"></param>
142         private void deletebuttonpress(object sender, eventargs e)
143         {
144             hispanel.controls.clear();
145         }
146         /// <summary>
147         /// 搜索内容查询
148         /// </summary>
149         /// <param name="sender"></param>
150         /// <param name="e"></param>
151         private void selectbuttonpress(object sender, eventargs e)
152         {
153             button btn = (button)sender;
154             this.showresult = showresult.yes;
155             currentkey = btn.text;
156             //将查询关键字替换进去
157             querystr = @"select * from `testdata` where data like '%"+currentkey+"%'";
158             this.close();
159         }
160         /// <summary>
161         /// 搜索框回车键事件
162         /// </summary>
163         /// <param name="sender"></param>
164         /// <param name="e"></param>
165         private void keylab_submitediting(object sender, eventargs e)
166         {
167             this.showresult = showresult.yes;
168             currentkey = keylab.text;
169             //将查询关键字替换进去
170             querystr = @"select * from `testdata` where data like '%" + keylab.text+ "%'";
171             this.close();
172         }
173 
174         private void imagebutton1_press(object sender, eventargs e)
175         {
176             this.showresult = showresult.no;
177             this.close();
178         }
179     }
180 }

selectdata.cs

 1 using system;
 2 using system.collections.generic;
 3 using system.linq;
 4 using system.text;
 5 using system.threading.tasks;
 6 
 7 namespace selectdemo
 8 {
 9     class selectdata
10     {
11         public string title { set; get; }
12         public string[] items { set; get;}
13         public boolean  ishow { set; get; }
14         public boolean isradio { set; get; }
15         public string type { set; get; }
16 
17     }
18 }

dbclass.cs

 1 using system;
 2 using system.collections.generic;
 3 using system.data;
 4 using system.data.sqlclient;
 5 using system.linq;
 6 using system.text;
 7 using system.threading.tasks;
 8 using mysql.data.mysqlclient;
 9 namespace selectdemo
10 {
11     class dbclass
12     {
13         /// <summary>
14         /// 连接数据库并查询相应数据
15         /// </summary>
16         /// <param name="query">数据库查询语句</param>
17         /// <returns></returns>
18         public datatable dbconnectandquert(string query)
19         {
20            
21             string connetstr = "server=127.0.0.1;port=3306;user=****;password=****; database=***;charset=utf8";
22             mysqlconnection conn = new mysqlconnection(connetstr);
23             try
24             {   
25                 datatable dt = new datatable();
26                 conn.open();
27                 mysqlcommand com = new mysqlcommand(query, conn);
28                 mysqldataadapter adapter = new mysqldataadapter(com);
29                 adapter.fill(dt);
30                 return dt;
31                
32             }
33             catch (mysqlexception ex)
34             {
35                 console.writeline(ex.message);
36                 return null;
37             }
38             finally
39             {
40                 conn.close();
41             }
42         }
43     }
44 }