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

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();
         }
     }
}

ElmLayout.cs

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();
        }
    }
}

SelectData.cs

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

    }
}

DBClass.cs

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();
            }
        }
    }
}