Flutter(Widget)-bottomNavigation

截屏2022-07-15 11.05.28.png

1.底部切换导航条

9cf708c7704200c32a990ca87b87f9ac.gif

import 'package:flutter/material.dart';
import 'package:flutter_app/bottomNavigationBar/zfl_tab_home_page.dart';
import 'package:flutter_app/bottomNavigationBar/zfl_tab_list_page.dart';
import 'package:flutter_app/bottomNavigationBar/zfl_tab_my_page.dart';
import 'package:flutter_app/bottomNavigationBar/zfl_tab_search_page.dart';

class ZFLBottomNavigationBarPage extends StatefulWidget {
  @override
  _ZFLBottomNavigationBarPageState createState() =>
      _ZFLBottomNavigationBarPageState();
}

class _ZFLBottomNavigationBarPageState
    extends State<ZFLBottomNavigationBarPage> {
  int localIndex = 0;
 List pages = [ZFLTabHomePage(),ZFLTabListPage(),ZFLTabSearchPage(),ZFLTabMyPage(),];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('tab'),
        ),
        body: pages[localIndex],
        bottomNavigationBar: BottomNavigationBar(
          fixedColor: Colors.red,
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.account_balance_rounded), title: Text('首页')),
            BottomNavigationBarItem(
                icon: Icon(Icons.airport_shuttle), title: Text('列表')),
            BottomNavigationBarItem(
                icon: Icon(Icons.business), title: Text('搜索')),
            BottomNavigationBarItem(
                icon: Icon(Icons.audiotrack_outlined), title: Text('我的')),
          ],
          currentIndex: localIndex,
          onTap: (index) {
            localIndex = index;
            setState(() {});
          },
        ));
  }
}

import 'package:flutter/material.dart';
class ZFLTabHomePage extends StatefulWidget {
  @override
  _ZFLTabMyPageState createState() => _ZFLTabMyPageState();
}

class _ZFLTabMyPageState extends State<ZFLTabHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('首页页面'),
    );
  }
}

import 'package:flutter/material.dart';

class ZFLTabListPage extends StatefulWidget {
  @override
  _ZFLTabMyPageState createState() => _ZFLTabMyPageState();
}

class _ZFLTabMyPageState extends State<ZFLTabListPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('列表页面'),
    );
  }
}

class ZFLTabMyPage extends StatefulWidget {
  @override
  _ZFLTabMyPageState createState() => _ZFLTabMyPageState();
}

class _ZFLTabMyPageState extends State<ZFLTabMyPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('我的页面'),
    );
  }
}

import 'package:flutter/material.dart';

class ZFLTabSearchPage extends StatefulWidget {
  @override
  _ZFLTabMyPageState createState() => _ZFLTabMyPageState();
}

class _ZFLTabMyPageState extends State<ZFLTabSearchPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('搜索页面'),
    );
  }
}