Flutter bottomNavagationBar的应用

（一）效果图及说明
我们今天要实现的效果就是点击下面的导航栏的图标，颜色变为绿色，然后可以加载出对应的页面内容。

所以这一节又是一个有状态组件的应用例子哦

赶紧收藏学习起来
在这里插入图片描述

（二）实现要点
（1）知识点：
底部导航条bottomNavigationBar
状态改变 setState
图标的颜色变化用bottomNavigationBar里面的属性

**提示：**怎么查看一个组件的属性
双击选中组件，右键，就可以点开看到该组件的所有内容。快去试试吧

（2）写法：
抽离代码，跳转后的代码我们封装成在一个类里面，每个类里实现具体的功能需求

我们现在要开始学会封装组件啦，今天这才是练手哦

（三）代码实现
在这里插入图片描述
首先在lib下面创建以下文件，至于结构，你可以随意。这里我的tabs.dart文件和tabs是同一级。
然后下面是各个页面的内容。
main.dart文件

import 'package:flutter/material.dart';
import 'pages/tabs.dart';

void main() => runApp(MyApp());//入口函数

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Tabs());//调用函数
  }
}

tabs.dart文件

import 'package:flutter/material.dart';
import 'tabs/category.dart';//导包
import 'tabs/home.dart';
import 'tabs/setting.dart';

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;

  List _pageList = [
    Homepage(),
    Categorypage(),
    Settingpage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('甜宠软妹'),
        centerTitle: true,
      ),
      body: this._pageList[this._currentIndex], //调用函数
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          onTap: (int index) {
            setState(() {//状态改变
              this._currentIndex = index;
            });
          },

          iconSize: 30.0,//图标大小
          fixedColor: Colors.green,//图标改变后的颜色
     
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text("首页")),
            BottomNavigationBarItem(
                icon: Icon(Icons.category), title: Text("分类")),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), title: Text("设置"))
          ]),
    );
  }
}

home.dart文件

import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage>{
  @override
  Widget build(BuildContext context) {
   return ListView(
      children: <Widget>[
        ListTile(title: Text("我是首页"),
        ),
        ListTile(title: Text("我是master"),
        ),
        ListTile(title: Text("我是大帅哥"),
        ),
      ],
    );
  }
}

同理，另外的分类设置的页面代码参考上面这个首页的代码。

不知道大家看了以后有什么问题没，
那我给你们留个问题吧
如果我要再新增几个底部的导航，怎么去实现？
欢迎学习交流哇

解密答案：
链接: link.

Flutter bottomNavagationBar的应用

猜你喜欢