Flutter開發:關於隱藏Appbar相關屬性的知識點

首先來看一下Flutter的Appbar官方API的介紹,如下所示:

AppBar({

    Key key,

    this.leading,

    this.automaticallyImplyLeading = true,

    this.title,

    this.actions,

    this.flexibleSpace,

    this.bottom,

    this.elevation,

    this.shape,

    this.backgroundColor,

    this.brightness,

    this.iconTheme,

    this.actionsIconTheme,

    this.textTheme,

    this.primary = true,

    this.centerTitle,

    this.titleSpacing = NavigationToolbar.kMiddleSpacing,

    this.toolbarOpacity = 1.0,

    this.bottomOpacity = 1.0,

  })

一、隱藏Appbar的返回按鈕方法

通過查看Appbar的API可以看到,Appbar隱藏返回按鈕是由leading來控制的,如果直接使用把automaticallyImplyLeading屬性改成false,顯然去不掉返回按鈕,讓我們回到原始的騷操作理念,直接給leading賦值空值不就行了麼,結果答案是肯定的,就是這樣操作的。具體的操作以及實際效果如下所示:

二、隱藏Appbar的底部陰影效果

根據UI設計圖,需要把Appbar的導航欄設置爲和界面視圖一樣的顏色效果,一般情況下直接把Appbar的背景色設置爲和界面視圖相同的背景色即可,但是設置完之後的真實效果是這樣的,如下所示:

爲什麼設置完Appbar的背景色之後還有一條線呢,通過查閱Appbar的官方API可以看到elevation這個屬性是控制Appbar的陰影效果的,只需要把該屬性的值改爲0即可去掉Appbar底部的陰影效果,具體操作以及實際效果如下所示:

以上就是本章全部內容,歡迎關注三掌櫃的微信公衆號“iOS開發by三掌櫃”,三掌櫃的新浪微博“三掌櫃666”,歡迎關注!

三掌櫃的微信公衆號:

三掌櫃的新浪微博:

 

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