自定义底部导航条

bottomNavigationBar 配置底部导航条。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Retrieve Text Input',
            home: MyBottomNavigationBar(),
        );
    }
}
class MyBottomNavigationBar extends StatefulWidget {
    @override
    _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}
class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
    // 定义当前索引值
    int _currentIndex = 0;
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Hello Flutter'),
            ),
            body: Center(
                child: Text('Hello Flutter'),
            ),
            // bottomNavigationBar 底部导航
            bottomNavigationBar: BottomNavigationBar(
                currentIndex: _currentIndex, // 当前选中的索引值
                onTap: (int index) {
                    setState(() {
                        this._currentIndex = index;
                    });
                },
                items: [
                    BottomNavigationBarItem(
                        // icon 可以是 Icon 组件 也可以是 image
                        icon: Icon(Icons.home),
                        label: '首页',
                    ),
                    BottomNavigationBarItem(
                        icon: Icon(Icons.search),
                        label: '搜索',
                    ),
                ],
            ),
        );
    }
}

切换页面：

import 'package:flutter/material.dart';
import 'tabs/home.dart';
import 'tabs/search.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Retrieve Text Input',
            home: MyBottomNavigationBar(),
        );
    }
}
class MyBottomNavigationBar extends StatefulWidget {
    @override
    _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}
class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
    int _currentIndex = 0;
    // 定义页面 List
    List _pageList = [
        HomeWidget(),
        SearchWidget(),
    ];
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Hello Flutter'),
            ),
            // 根据当前的 currentIndex 渲染对应的页面
            body: this._pageList[this._currentIndex],
            bottomNavigationBar: BottomNavigationBar(
                currentIndex: _currentIndex,
                onTap: (int index) {
                    setState(() {
                        this._currentIndex = index;
                    });
                },
                iconSize: 30, // 改变icon大小
                fixedColor: Colors.pink, // 改变颜色
                type: BottomNavigationBarType.fixed, // 配置多个tabItem
                items: [
                    BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        label: '首页',
                    ),
                    BottomNavigationBarItem(
                        icon: Icon(Icons.search),
                        label: '搜索',
                    ),
                ],
            ),
        );
    }
}