smobiler仿饿了么app搜索页面

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

image

 

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

创建窗体

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

image

并在窗体中拖入Panel和ListView,Panel.Height 设置40,Listview.Flex设置1 ,Listview的模板类设置成ListLayout

image

 

实现搜索框

将上图的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

image

上图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 }
ElmSearch

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 }
ElmLayout

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 }
SelectData

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 }
DBClass

 

posted on 2021-03-11 11:16  smobiler  阅读(86)  评论(0编辑  收藏

导航