Flutter--实现简单的底部导航

创建一个tabs文件夹,然后创建3个dart组件,注意是要使用有状态组件.

我的页面:person.dart

import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("我的页面"),
    );
  }
}

搜索页面category.dart

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({super.key});

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("我是搜索页面"),
    );
  }
}

首页面home.dart

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  const HomePage({super.key});

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("我是首页"),
    );
  }
}

 在这个主页面里面还需要导入那3个tab组件.

import 'package:flutter/material.dart';
import './tab/category.dart';
import './tab/person.dart';
import './tab/home.dart';

class Tabs extends StatefulWidget {
  const Tabs({super.key});

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

class _TabsState extends State<Tabs> {
  // 设置一个默认值显示的tab页面
  int _index = 0;
  // 把要显示的tab组件集合成一个list
  final List<Widget>  _pages = const [
    HomePage(),CategoryPage(),MainPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("flutter tabs"),),
      // 通过获取当前的index来显示当前的tab页面
      body: _pages[_index],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _index,
        // 通过ontap切换把索引赋值给_index
        onTap: (value) {
          print(value);
          setState(() {
            _index = value;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '搜索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
        selectedItemColor: Colors.blue,
      ),
    );
  }
}