Flutter移动电商实战 --（3）底部导航栏制作

小灰灰 2023-06-01 05:56 12阅读 0赞

#### 1、cupertino\_IOS风格介绍 ####

在Flutter里是有两种内置风格的：

*  **material风格**： Material Design 是由 Google 推出的全新设计语言，这种设计语言是为手机、平板电脑、台式机和其他平台提供一致，更广泛的外观和感觉。我喜欢称它为纸墨设计。Material Design 风格是一种非常有质感的设计风格，并会提供一些默认的交互动画。
 *  **cupertino风格**：即 IOS 风格组件，它重现了很多经典的有 IOS 特性的交互和界面风格，让适用于 IOS 的人感觉亲切和友好。

> 并非选择了一种风格，就要一直使用这种风格，事实是你可以一起使用，兼顾两个风格的特点。

我们在 index\_page.dart 页面同时使用两种风格 UI ，只需要在头部分引入了 cupertino.dart、material.dart。注意这两个引入是不分先后顺序的。

index\_page.dart 文件：

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

#### 2、使用动态StatefulWidget ####

上篇文章为了测试入口文件，我们在 index\_page.dart 文件里使用了静态组件（也就是继承了StatelessWidget）。

正常情况下，底部导航栏是要根据用户操作不断变化的，所以我们改用动态组件（StatefulWidget）。

修改后的代码如下:

改编后的界面效果并未发生改变，不截图了。

#### 3、底部栏 ####

有了动态组件，接下来可以在State部分先声明一个List变量，变量名称为boottomTabs，变量的属性为BottomNavigationBarItem。

其实这个List变量就定义了底部导航的文字和使用的图标。

代码如下:

final List<BottomNavigationBarItem> bottomTabs = [
        BottomNavigationBarItem(
          icon:Icon(CupertinoIcons.home),
          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('会员中心')
        ),
      ];

底栏的数据有了，怎么使用呢？

修改后的 index\_page.dart 文件：

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),
            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 new Scaffold(
          appBar: new AppBar(title: new Text("百姓生活+"),),
          body: new Center(
            child: Text("我是居中的文本内容"),
          ),
          bottomNavigationBar: BottomNavigationBar(
            type:BottomNavigationBarType.fixed,
            currentIndex: 0,
            items:bottomTabs,
            onTap: (index){
    
            },
          ),
        );
      }
    }

效果图：

![1090399-20190811213200422-1746188790.png][]

下篇将打通4非底部导航栏，关于界面切换以及底栏的实现可参考之前写的一篇文章：  
[Flutter实 ViewPager、bottomNavigationBar界面切换][Flutter_ ViewPager_bottomNavigationBar]

转载于:https://www.cnblogs.com/crazycode2/p/11223574.html

[1090399-20190811213200422-1746188790.png]: /images/20230601/01201ec6a9224a3aad342c7f0b9d0ce5.png
[Flutter_ ViewPager_bottomNavigationBar]: https://www.cnblogs.com/niceyoo/p/9901828.html