Xamarin Shell 踩坑

之前開發的app,底部選項卡是自定義的,頂部導航欄也是自定義的,一直在想這麼通用的東西應該有官方的控件纔對,

最近發現xamarin中的Shell功能感覺還不錯,有底部選項卡,有頂部導航欄,還可以自定義,具體見官方文檔。

開始的時候頁面什麼加進去沒什麼問題。

開發的差不多準備調整UI,問題來了。

浮動欄,禁用掉,OK。

選項卡對應的幾個頁面不需要回退按鈕,回退按鈕圖標默認的Android和ios不一樣,所以要自定義。

1. 坑1,在AppShell.xaml裏面設置如下,OK。但是如果在一個其他的頁面裏面這樣設置,運行起來後報錯,對象爲空,不知道問題在哪裏。只能說是有bug。

<Shell.BackButtonBehavior>
        <BackButtonBehavior IsEnabled="False"/>
    </Shell.BackButtonBehavior>

2. 頂部導航欄想要自定義下回退按鈕圖標,在頁面裏面設置如下。

    <Shell.BackButtonBehavior>
        <BackButtonBehavior>
            <BackButtonBehavior.IconOverride>
                <FontImageSource Glyph="&#xe61d;" 
                                FontFamily="{OnPlatform iOS=iconfont, Android=iconfont.ttf#}"
                                Color="Black"
                                Size="25"/>
            </BackButtonBehavior.IconOverride>
        </BackButtonBehavior>
    </Shell.BackButtonBehavior>

結果是圖標顏色是白的。(另外要說明,iconoverride雖然可以使用圖片,但是圖片得是純色的,否則系統也會把你變成一團顏色。) 這裏的color居然是無效的,然後我將頁面背景設置爲白色,Shell.BackgroundColor="White",悲劇,回退圖標看不見了。。。。這絕對的就是bug。

只能準備棄用這個頂部導航,自己寫過了。。。。

這就導致shell的使用大打折扣了。。。

那麼,如果UI風格統一,不需要更改回退按鈕的圖標顏色(只能是白色的),就還是可以使用的,主頁的回退按鈕禁用掉就行了,其實最好是直接禁用主頁頁面的導航欄,直接寫頁面標題什麼的。

子頁面則可以通過shell.title來重寫導航欄內容(除了回退按鈕)。

2019-7-13

3. IOS下的坑,使用shell,tabbar對應的頁面會從狀態欄下面開始,但是從這些頁面使用Navigation.pushasyn方式打開的頁面內容會被shell的導航欄蓋住。而禁用shell的導航欄,可以發現子頁面內容從手機頂部開始,會被狀態欄蓋住,所以就算自己寫導航欄,頁面還得注意判斷是不是tabbar的頁面,對應增加或不增加狀態欄高度得空間。

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章