本篇內(nèi)容介紹了“如何實現(xiàn)smobiler仿自如app篩選頁面”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司專注于賀蘭網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供賀蘭營銷型網(wǎng)站建設(shè)，賀蘭網(wǎng)站制作、賀蘭網(wǎng)頁設(shè)計、賀蘭網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造賀蘭網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供賀蘭網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

原型圖：

創(chuàng)建窗體

創(chuàng)建一個SmobilerForm ，文件名設(shè)置ZRSelectForm，將窗體的Layout設(shè)置Relative，再設(shè)置窗體的Statusbar屬性

并在窗體中拖入兩個Panel

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

panel1.Height 設(shè)置40，panel2.Flex設(shè)置1

實現(xiàn)搜索框

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

在panel1中拖入imageButton，

imageButton6.ImagtType設(shè)置FontIcon，

imageButton6.ResourceID設(shè)置” angle-left” ,

imageButton6.Flex設(shè)置1，

imageButton6.IconColor設(shè)置Silver。

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

接著在panel1中拖入panel3，

Panel3.BorderRadius設(shè)置4，

Panel3.Direction設(shè)置Row，

Panel3.ItemAlign設(shè)置Center，

Panel3.Layout設(shè)置Relative，

Panel3.Touchable設(shè)置true，

Panel3.BackColor設(shè)置WhiteSmoke，

Panel3.Flex設(shè)置6。

在panel3 中加入fonticon控件，

fontIcon1.Location設(shè)置(6,0),

fontIcon1.Size設(shè)置(15,15),

fontIcon1.ForeColor設(shè)置Gainsboro，

fontIcon1.Resource設(shè)置”search”

在panel2中加入Label控件，Label控件的Name設(shè)置KeyLab，

KeyLab.Size設(shè)置(0,0)

KeyLab.ForeColor設(shè)置Gainsboro

KeyLab.Location設(shè)置（12,0,0,0）

KeyLab.Text設(shè)置“清河”

最后在panel1中拖入imageButton7，

imageButton7.ImagtType設(shè)置FontIcon，

imageButton7.ResourceID設(shè)置“crosshairs” ,

imageButton7.Flex設(shè)置1，

imageButton7.IconColor設(shè)置Silver。

放置篩選按鈕

panel4.Direction設(shè)置Row，Layout設(shè)置Relative，Padding設(shè)置(12,0,12,0)，Height設(shè)置40。接著在panel4中放置4個ImageButton，F(xiàn)lex屬性都設(shè)置1，

imageButton1.ImageDirection設(shè)置Right，

imageButton1.ImageType設(shè)置“FontIcon”,

imageButton1.ResourceID設(shè)置”angel-down”，

imageButton1.Text設(shè)置“合租”，

imageButton1.ImgTextRatio設(shè)置(2,8)

imageButton2.ImageDirection設(shè)置Right，

imageButton2.ImageType設(shè)置“FontIcon”,

imageButton2.ResourceID設(shè)置”angel-down”，

imageButton2.Text設(shè)“位置”

imageButton2.ImgTextRatio設(shè)置(2,8)

imageButton3.ImageDirection設(shè)置Right，

imageButton3.ImageType設(shè)置“FontIcon”,

imageButton3.ResourceID設(shè)置”angel-down”，

imageButton3.Text設(shè)置“租金”

imageButton3.ImgTextRatio設(shè)置(2,8)

imageButton4.ImageDirection設(shè)置Right，

imageButton4.ImageType設(shè)置“FontIcon”,

imageButton4.ResourceID設(shè)置” angle-down “

imageButton4.Text設(shè)置“篩選”， 

imageButton4.ImgTextRatio設(shè)置(2,8)

imageButton5.ImageDirection設(shè)置Right，

imageButton5.ImageType設(shè)置“FontIcon”,

imageButton5.ResourceID設(shè)置“arrows-v”

imageButton5.ImgTextRatio設(shè)置(3,7)

創(chuàng)建SmobilerUserControl

創(chuàng)建一個SmobilerUserControl，文件名設(shè)置ZRSelectLayout， 將ZRSelectLayout.Layout設(shè)置Relative，BackColor設(shè)置White

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

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

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

實現(xiàn)效果

“如何實現(xiàn)smobiler仿自如app篩選頁面”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！