如何實(shí)現(xiàn)smobiler仿自如app篩選頁面

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

創(chuàng)新互聯(lián)公司專注于賀蘭網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供賀蘭營銷型網(wǎng)站建設(shè)，賀蘭網(wǎng)站制作、賀蘭網(wǎng)頁設(shè)計(jì)、賀蘭網(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

實(shí)現(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的點(diǎn)擊事件中寫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 用來實(shí)現(xiàn)搜索框，panel4用來放置篩選按鈕，步驟和前文中的一樣，接著再入兩個panel，分別命名為mianpanel和panel3。mianpanel.Layout設(shè)置Relative，F(xiàn)lex設(shè)置1，用來放置篩選項(xiàng)。

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è)計(jì)器部分就完成了，代碼部分請查看git。

實(shí)現(xiàn)效果

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

當(dāng)前名稱：如何實(shí)現(xiàn)smobiler仿自如app篩選頁面
網(wǎng)站路徑：http://www.muchs.cn/article36/jpjipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、做網(wǎng)站、企業(yè)建站、品牌網(wǎng)站制作、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)