如何實現smobiler仿自如app篩選頁面

本篇內容介紹了“如何實現smobiler仿自如app篩選頁面”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

原型圖：

創建窗體

創建一個SmobilerForm ，文件名設置ZRSelectForm，將窗體的Layout設置Relative，再設置窗體的Statusbar屬性

并在窗體中拖入兩個Panel

panel1用來放置搜索框，panel2用來放置“綜合排序”、“銷量最高”、“距離最近”、“篩選”按鈕和listview1。

panel1.Height 設置40，panel2.Flex設置1

實現搜索框

將上圖的panel1.Layout設置Relative，panel1.Direction設置Row，panel1.Padding設置(6,6,6,6),panel1.Size設置為(0,40)。

在panel1中拖入imageButton，

imageButton6.ImagtType設置FontIcon，

imageButton6.ResourceID設置” angle-left” ,

imageButton6.Flex設置1，

imageButton6.IconColor設置Silver。

在imageButton6的點擊事件中寫this.Close();

接著在panel1中拖入panel3，

Panel3.BorderRadius設置4，

Panel3.Direction設置Row，

Panel3.ItemAlign設置Center，

Panel3.Layout設置Relative，

Panel3.Touchable設置true，

Panel3.BackColor設置WhiteSmoke，

Panel3.Flex設置6。

在panel3 中加入fonticon控件，

fontIcon1.Location設置(6,0),

fontIcon1.Size設置(15,15),

fontIcon1.ForeColor設置Gainsboro，

fontIcon1.Resource設置”search”

在panel2中加入Label控件，Label控件的Name設置KeyLab，

KeyLab.Size設置(0,0)

KeyLab.ForeColor設置Gainsboro

KeyLab.Location設置（12,0,0,0）

KeyLab.Text設置“清河”

最后在panel1中拖入imageButton7，

imageButton7.ImagtType設置FontIcon，

imageButton7.ResourceID設置“crosshairs” ,

imageButton7.Flex設置1，

imageButton7.IconColor設置Silver。

放置篩選按鈕

panel4.Direction設置Row，Layout設置Relative，Padding設置(12,0,12,0)，Height設置40。接著在panel4中放置4個ImageButton，Flex屬性都設置1，

imageButton1.ImageDirection設置Right，

imageButton1.ImageType設置“FontIcon”,

imageButton1.ResourceID設置”angel-down”，

imageButton1.Text設置“合租”，

imageButton1.ImgTextRatio設置(2,8)

imageButton2.ImageDirection設置Right，

imageButton2.ImageType設置“FontIcon”,

imageButton2.ResourceID設置”angel-down”，

imageButton2.Text設“位置”

imageButton2.ImgTextRatio設置(2,8)

imageButton3.ImageDirection設置Right，

imageButton3.ImageType設置“FontIcon”,

imageButton3.ResourceID設置”angel-down”，

imageButton3.Text設置“租金”

imageButton3.ImgTextRatio設置(2,8)

imageButton4.ImageDirection設置Right，

imageButton4.ImageType設置“FontIcon”,

imageButton4.ResourceID設置” angle-down “

imageButton4.Text設置“篩選”， 

imageButton4.ImgTextRatio設置(2,8)

imageButton5.ImageDirection設置Right，

imageButton5.ImageType設置“FontIcon”,

imageButton5.ResourceID設置“arrows-v”

imageButton5.ImgTextRatio設置(3,7)

創建SmobilerUserControl

創建一個SmobilerUserControl，文件名設置ZRSelectLayout， 將ZRSelectLayout.Layout設置Relative，BackColor設置White

上圖panel1 用來實現搜索框，panel4用來放置篩選按鈕，步驟和前文中的一樣，接著再入兩個panel，分別命名為mianpanel和panel3。mianpanel.Layout設置Relative，Flex設置1，用來放置篩選項。

Panel3.Layout設置Relative，Direction設置Row，Height設置46，Padding設置(6,6,6,6)。再往panel3中放置兩個button，Flex分別設置1和2，。button1.Text設置“清除”，BackColor設置Silver， button2.Text設置“查看”，BackColor設置orange。

這樣設計器部分就完成了，代碼部分請查看git。

實現效果

“如何實現smobiler仿自如app篩選頁面”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！