小菜鸡开始学习flutter之二十八

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情

今日目标

今天来学习了解flutter中的bottomnavigationbar自定义底部导航条以及实现页面的切换

BottomNavigationBar

bottomnavigationbar是底部导航条，可以让我们定义底部tab切换，它是scaffold组件的参数

组件常见属性

属性	说明
items	List底部导航条按钮集合
iconSize	icon
currentIndex	默认选中第几个
onTap	选中变化回调函数
fixedColor	选中颜色
type	fixed shifting

例子

我们简单来实现一个可以切换页面的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);

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  List _pageList = [HomePage(), CategroyPage(), SettingPage()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('你太有才了-Flutter'),
      ),
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize: 36,
        fixedColor: Colors.red[500],
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
    );
  }
}

// Home.dart

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Text('this is home page');
  }
}

// Category.dart

import 'package:flutter/material.dart';

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

  @override
  State<CategroyPage> createState() => _CategroyPageState();
}

class _CategroyPageState extends State<CategroyPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('this is category page'),
    );
  }
}

// Setting.dart

import 'package:flutter/material.dart';

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

  @override
  State<SettingPage> createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          title: Text('设置选项1'),
          leading: Icon(
            Icons.settings,
            color: Colors.red[600],
          ),
        )
      ],
    );
  }
}

// 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());
  }
}

从动态图中可以看出我们简单的是实现了一个tab切换页面的效果。这里需要注意下，如果在没有设置type: BottomNavigationBarType.fixed这个属性的时候，底部导航栏只能最多放三个，超过4个时候会被挤下来，如下图所示

再一个同过上面的代码示例，可以发现我们每一个页面都被抽离成一个单独的组件，这样做的好处有利于我们将复杂的功能拆分开，便于维护。

ending

持续学习~~，如有不正确的地方还请指正，谢谢各位掘友~