如何實現Smobiler仿拉勾app篩選頁面

# 如何實現Smobiler仿拉勾app篩選頁面

## 一、前言

在移動應用開發中，篩選功能是提升用戶體驗的關鍵組件之一。拉勾網作為知名招聘平臺，其篩選頁面以清晰的交互邏輯和高效的篩選機制著稱。本文將詳細介紹如何使用Smobiler平臺（基于.NET的跨平臺移動應用開發框架）實現類似拉勾APP的篩選頁面，涵蓋UI布局設計、數據綁定、事件交互等核心實現步驟。

---

## 二、環境準備與項目創建

### 1. 開發環境要求
- Visual Studio 2017或更高版本
- .NET Framework 4.6.1+
- Smobiler Designer插件（需安裝到VS）

### 2. 新建Smobiler項目
1. 打開Visual Studio → 新建項目 → 選擇"Smobiler Application"
2. 右鍵項目 → 添加新項 → 選擇"Smobiler Form"（命名為`JobFilterForm`）

```csharp
// 示例：初始化窗體代碼
public partial class JobFilterForm : Smobiler.Core.Controls.MobileForm
{
    public JobFilterForm() : base()
    {
        InitializeComponent();
    }
}

三、UI界面設計

1. 頁面結構分析

拉勾篩選頁典型布局： - 頂部：標題欄（返回按鈕+標題+重置按鈕） - 中部：多組篩選項（地區、薪資、經驗等） - 底部：確定按鈕

2. 關鍵控件實現

標題欄實現

<MobileForm.TitleToolbar>
    <Toolbar Position="Relative">
        <ToolbarButton Text="返回" Click="btnBack_Click"/>
        <ToolbarLabel Text="職位篩選" Flex="1" HorizontalAlignment="Center"/>
        <ToolbarButton Text="重置" Click="btnReset_Click"/>
    </Toolbar>
</MobileForm.TitleToolbar>

篩選項分組（使用Panel+ListView）

// 示例：地區選擇Panel
Panel panelLocation = new Panel()
{
    Height = 200,
    Layout = LayoutStyle.Flex,
    Direction = LayoutDirection.Column,
    Border = new Border(1, "#eeeeee")
};
ListView lvLocation = new ListView()
{
    DataSource = GetLocationData(),
    Template = new TextItemTemplate() { BindDisplayValue = "Name" }
};
panelLocation.Controls.Add(lvLocation);

底部確認按鈕

<Button Text="確認篩選" 
        Height="50" 
        BackColor="#00BFFF" 
        ForeColor="White"
        Click="btnConfirm_Click"/>

四、數據綁定與交互邏輯

1. 數據模型定義

public class FilterItem
{
    public string Name { get; set; }
    public string Value { get; set; }
    public bool IsSelected { get; set; }
}

// 示例：生成篩選數據
private List<FilterItem> GetLocationData()
{
    return new List<FilterItem>()
    {
        new FilterItem(){ Name="全國", Value="0" },
        new FilterItem(){ Name="北京", Value="1" },
        new FilterItem(){ Name="上海", Value="2" },
        // 其他城市數據...
    };
}

2. 多選邏輯實現

// ListView的ItemClick事件
private void lvLocation_ItemClick(object sender, ListViewItemClickEventArgs e)
{
    var item = (FilterItem)e.Item.Data;
    item.IsSelected = !item.IsSelected;
    lvLocation.Refresh(); // 刷新視圖
}

3. 重置功能

private void btnReset_Click(object sender, EventArgs e)
{
    foreach (var control in this.Controls)
    {
        if (control is ListView lv)
        {
            foreach (FilterItem item in lv.DataSource)
            {
                item.IsSelected = false;
            }
            lv.Refresh();
        }
    }
}

五、高級功能實現

1. 動態加載更多選項

// 實現下拉加載
private bool isLoading = false;
private void lvExperience_Scroll(object sender, ListViewScrollEventArgs e)
{
    if (e.ScrollPercentage > 80 && !isLoading)
    {
        isLoading = true;
        LoadMoreData();
        isLoading = false;
    }
}

2. 聯動篩選（如：選擇城市后加載區域）

private void lvCity_ItemClick(object sender, ListViewItemClickEventArgs e)
{
    var selectedCity = (FilterItem)e.Item.Data;
    lvDistrict.DataSource = GetDistrictData(selectedCity.Value);
}

3. 篩選結果傳遞

private void btnConfirm_Click(object sender, EventArgs e)
{
    Dictionary<string, string> filters = new Dictionary<string, string>();
    
    // 收集所有選中項
    foreach (var control in this.Controls)
    {
        if (control is ListView lv)
        {
            var selected = ((List<FilterItem>)lv.DataSource)
                         .Where(i => i.IsSelected)
                         .Select(i => i.Value);
            filters.Add(lv.Name, string.Join(",", selected));
        }
    }
    
    // 回傳給主頁面
    this.Close(filters);
}

六、樣式優化技巧

1. 選中狀態樣式

// 自定義Item模板
public class CheckableItemTemplate : ItemTemplate
{
    public override Control OnCreateControl()
    {
        Panel panel = new Panel { Layout = LayoutStyle.Flex };
        Label lblName = new Label { Flex = 1 };
        Image imgCheck = new Image { ResourceID = "unchecked.png" };
        
        // 數據綁定
        lblName.DataMember = "Name";
        imgCheck.DataMember = "IsSelected";
        imgCheck.DataBind += (s, e) => {
            ((Image)s).ResourceID = (bool)e.Value ? "checked.png" : "unchecked.png";
        };
        
        panel.Controls.AddRange(lblName, imgCheck);
        return panel;
    }
}

2. 動畫效果

// 展開/折疊動畫
private void TogglePanel(Panel panel)
{
    panel.Height = panel.Height == 0 ? 200 : 0;
    panel.Animate("height", 300, AnimationEffect.EaseOut);
}

七、性能優化建議

1. 數據懶加載：非可見區域的篩選項延遲加載
2. 列表項回收：設置ListView.EnableRecycle = true
3. 圖片緩存：使用Image.UseCache = true
4. 減少布局嵌套：簡化控件層級結構

八、完整實現效果

最終實現的篩選頁面應包含以下特性： - 支持多維度篩選（地區/薪資/經驗等） - 流暢的交互體驗（點擊反饋、動畫過渡） - 完整的篩選狀態管理（選擇/重置/確認） - 自適應不同屏幕尺寸

九、常見問題解決

Q1: 如何實現單選模式？

private void lvSalary_ItemClick(object sender, ListViewItemClickEventArgs e)
{
    foreach (FilterItem item in lvSalary.DataSource)
    {
        item.IsSelected = (item == e.Item.Data);
    }
    lvSalary.Refresh();
}

Q2: 數據量過大導致卡頓？

• 使用分頁加載（每次加載20-30條）
• 實現搜索過濾功能

Q3: 如何保存用戶篩選記錄？

// 使用Smobiler的Client.Session保存
Client.Session["lastFilter"] = filters;

十、總結

通過本文的步驟，我們完整實現了基于Smobiler的高效篩選頁面。關鍵點在于： 1. 合理的控件組合（Panel+ListView） 2. 靈活的數據綁定機制 3. 完善的交互事件處理 4. 性能優化措施

開發者可根據實際需求擴展更多功能，如自定義排序、歷史記錄等，進一步提升用戶體驗。 “`

（注：實際實現時需根據Smobiler具體版本調整API調用，圖片路徑需替換為實際資源）