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