Flutter實戰視頻-移動電商-04.底部導航欄切換效果

04.底部導航欄切換效果

博客地址：

https://jspang.com/post/FlutterShop.html#toc-291

咱們要作的效果圖：

 

 

 

新建四個頁面

home_page.dart

home_page.dart爲了展現切換效果，因此代碼比較簡單。中間放個Center，center裏面再放一個Text文本就能夠了。

剩下的企業幾個頁面都作相應的複製就能夠了。

分類頁面

 

購物車頁面

 

會員中心頁面

 

IndexPage頁面引入四個子頁面

引入四個頁面之後，須要定義一個List變量。把四個頁面加到數組裏面

再聲明連個變量，分別存放索引值，和當前的page頁面

 

而後須要在咱們的initState方法內初始化。咱們重寫initState方法

開始寫build主方法:

動態組件要改變索引的值，必須用setState的方法。

 

 

 

效果展現：

分類頁面