Flutter實戰視頻-移動電商-03.底部導航欄製做

03.底部導航欄製做

 

material是谷歌退出的

 

還有另外的一種：cupertino是IOS的風格

 

咱們底部的導航欄，靜態的widget是不合適的，這垃圾咱們用到動態的widget

這從新改爲動態的組件

依然叫作IndexPage

聲明一個List來放咱們底欄的圖標啊 文件啊，List咱們但願是不變的，是個常量 因此咱們用Final來定義

 

咱們再複製三個BottomNavigationBarItem元素

 

最終代碼：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomTabs=[
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.home),//這裏使用IOS風格的
      title: Text('首頁')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.search),
      title: Text('分類')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.shopping_cart),
      title: Text('購物車')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.profile_circled),
      title: Text('會員中心')
    ) 
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

index_page.dart