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)。这样设计器部分就完成了。
代码
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();
}
}
}
}标签：仿饿,smobiler,Text,app,System,设置,using,new,panel2 来源： https://blog.51cto.com/14360220/2655925