[shutter] bottom navigation bar page frame (bottomnavigationbar bottom navigation bar | pageview sliding page | bottom navigation and sliding page associated operation)

One 、BottomNavigationBar Bottom navigation bar

---

stay Scaffold Of bottomNavigationBar Property settings bottom navigation bar ;

Set current index : BottomNavigationBar Of currentIndex Property to set the selected index of the current bottom navigation bar , Set a variable for it , After changing the value of this variable , adopt setState Method update UI Show ;

Set click method : BottomNavigationBar Of onTap Property setting click method , Pass in index Indexes , The index value is the index of the clicked button , In this method, the current currentIndex Attribute variables , as well as PageView Page Jump ;

Bottom button settings : BottomNavigationBar Of item Set several properties BottomNavigationBarItem Type of click button ;

Code example :

bottomNavigationBar: BottomNavigationBar(        ///  Currently selected navigation index         currentIndex: _currentIndex,        ///  Click on the bottom navigation bar         onTap: (index) { 
              //  control  PageView  Jump to the specified page           _pageController.jumpToPage(index);          setState(() { 
                //  Update the current index value             _currentIndex = index;          });        },        ///  Set the bottom of several click navigation bar click button         ///  Pay attention to  List<BottomNavigationBarItem> items        ///  Button sequence in  ,  To work with  PageView  The order of pages in must be consistent         ///  The number and order should be consistent         items: datas.map((data) { 
              return BottomNavigationBarItem(            ///  The default icon ,  gray             icon: Icon(              data.icon,              color: Colors.grey,            ),            ///  The icon in the selected state ,  Red             activeIcon: Icon(              data.icon,              color: Colors.red,            ),            ///  According to whether the current page is selected  ,  determine             title: Text(              data.title,              style: TextStyle(                ///  If it's selected  ,  Then set red                 ///  If it is not selected ,  Set gray                   color: _currentIndex == data.index ? Colors.red : Colors.grey),            ),          );        }).toList(),      )

Two 、PageView Slide page

---

PageView As the main component of the display , Set to Scaffold Of body Field , The following three parameters are mainly set ;

controller : stay PageView Of controller Parameter setting , PageController type , Mainly used to control PageView Page Jump ;

Sliding callback events : onPageChanged Parameter setting sliding callback event , Pass in index Index value , In this case , call setState Method , Update the bottom navigation bar BottomNavigationBar Current index value of , And update the UI Interface ;

According to the component : stay children Parameter Widget The array can be , As long as the component type is Widget Just go ;

Code example :

///  Sliding components  ,  The core elements of the interface body: PageView(  ///  The controller that controls page flipping   controller: _pageController,  ///  Page slide   ///  Set up here  PageView  Page sliding can also   onPageChanged: (index) { 
        setState(() { 
          //  Update the current index value       _currentIndex = index;    });  },  /// Widget  Component array  ,  Set up multiple  Widget  Components   ///  Only one page component is displayed at a time   children: [    HomePage(), //  home page     ImagePage(), //  Picture page     SearchPage(), //  Search page     SettingPage(), //  Personal settings page   ],),

3、 ... and 、BottomNavigationBar And PageView relation

---

BottomNavigationBar Passive device selected : BottomNavigationBar The index of is through a private variable defined inside the component _currentIndex control , Will be _currentIndex Variables are set to the bottom navigation bar BottomNavigationBar Of currentIndex Parameters , After that, you can call setState Methods to modify _currentIndex Private variables , To control BottomNavigationBar Selected state of ;

BottomNavigationBar Actively set the selected state : stay BottomNavigationBar Of onTap Parameters in , You can get the index of the clicked button , And then call PageView Of PageController Of jumpToPage Method Realize the corresponding interface jump ;

BottomNavigationBar(  ///  Currently selected navigation index   currentIndex: _currentIndex,  ///  Click on the bottom navigation bar   onTap: (index) { 
        //  control  PageView  Jump to the specified page     _pageController.jumpToPage(index);    setState(() { 
          //  Update the current index value       _currentIndex = index;    });  },}

PageView Passive setting selected : stay BottomNavigationBar Click the navigation button in the bottom navigation bar , Switch pages , Use PageView Of PageController Of jumpToPage Method to jump to the page ;

PageView Actively set the selected state : slide PageView Interface , Callbacks PageView Medium onPageChanged Method , Call here setState Method , Set in this method _currentIndex Value , And then update BottomNavigationBar The selected state of the bottom navigation bar ;

PageView(  ///  The controller that controls page flipping   controller: _pageController,  ///  Page slide   ///  Set up here  PageView  Page sliding can also   onPageChanged: (index) { 
        setState(() { 
          //  Update the current index value       _currentIndex = index;    });  },}

Four 、 Complete code example

---

1、 Core navigation components

import 'package:flutter/material.dart';import 'package:flutter_app/pages/home_page.dart';import 'package:flutter_app/pages/image_page.dart';import 'package:flutter_app/pages/search_page.dart';import 'package:flutter_app/pages/setting_page.dart';///  The main interface component of the application  ,  The initial root node of the entire application class MainNavigatorWidget extends StatefulWidget { 
      @override  _MainNavigatorWidgetState createState() => _MainNavigatorWidgetState();}///  The parent class of this class  State  Accept a generic ///  The generic type is  StatefulWidget  type  TabNavigatorclass _MainNavigatorWidgetState extends State<MainNavigatorWidget>    with SingleTickerProviderStateMixin { 
      ///  The current index value   int _currentIndex = 0;  /// PageView  controller  ,  Used to control the  PageView  var _pageController = PageController(    ///  Initial index value     initialPage: 0,  );  @override  void dispose() { 
        super.dispose();    ///  The destruction  PageView  controller     _pageController.dispose();  }  @override  Widget build(BuildContext context) { 
        ///  The root component     return Scaffold(      ///  Sliding components  ,  The core elements of the interface       body: PageView(        ///  The controller that controls page flipping         controller: _pageController,        ///  Page slide         ///  Set up here  PageView  Page sliding can also         onPageChanged: (index) { 
              setState(() { 
                //  Update the current index value             _currentIndex = index;          });        },        /// Widget  Component array  ,  Set up multiple  Widget  Components         ///  Only one page component is displayed at a time         children: [          HomePage(), //  home page           ImagePage(), //  Picture page           SearchPage(), //  Search page           SettingPage(), //  Personal settings page         ],      ),      ///  Set the bottom navigation bar button       bottomNavigationBar: BottomNavigationBar(        ///  Currently selected navigation index         currentIndex: _currentIndex,        ///  Click on the bottom navigation bar         onTap: (index) { 
              //  control  PageView  Jump to the specified page           _pageController.jumpToPage(index);          setState(() { 
                //  Update the current index value             _currentIndex = index;          });        },        ///  Set the bottom of several click navigation bar click button         ///  Pay attention to  List<BottomNavigationBarItem> items        ///  Button sequence in  ,  To work with  PageView  The order of pages in must be consistent         ///  The number and order should be consistent         items: datas.map((data) { 
              return BottomNavigationBarItem(            ///  The default icon ,  gray             icon: Icon(              data.icon,              color: Colors.grey,            ),            ///  The icon in the selected state ,  Red             activeIcon: Icon(              data.icon,              color: Colors.red,            ),            ///  According to whether the current page is selected  ,  determine             title: Text(              data.title,              style: TextStyle(                ///  If it's selected  ,  Then set red                 ///  If it is not selected ,  Set gray                   color: _currentIndex == data.index ? Colors.red : Colors.grey),            ),          );        }).toList(),      ),    );  }}///  Encapsulate the icon and text data of the navigation bar class TabData { 
      ///  Navigation data constructor   const TabData({ 
    this.index, this.title, this.icon});  ///  Navigation title   final String title;  ///  Navigation icons   final IconData icon;  ///  Indexes   final int index;}///  Navigation bar data set const List<TabData> datas = const <TabData>[  const TabData(index: 0, title: ' home page ', icon: Icons.home_outlined),  const TabData(index: 1, title: ' picture ', icon: Icons.camera),  const TabData(index: 2, title: ' Search for ', icon: Icons.search),  const TabData(index: 3, title: ' Set up ', icon: Icons.settings),];

2、 Four switching pages

page 1 :

import 'package:flutter/material.dart';///  Application main interface class HomePage extends StatefulWidget { 
      @override  _HomePageState createState() => _HomePageState();}class _HomePageState extends State<HomePage> { 
      @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Centering component       body: Center(        child: Text(" Application main page "),      ),    );  }}

page 2 :

import 'package:flutter/material.dart';///  Picture page class ImagePage extends StatefulWidget { 
      @override  _ImagePageState createState() => _ImagePageState();}class _ImagePageState extends State<ImagePage> { 
      @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Centering component       body: Center(        child: Text(" Picture page "),      ),    );  }}

page 3 :

import 'package:flutter/material.dart';///  Search page class SearchPage extends StatefulWidget { 
      @override  _SearchPageState createState() => _SearchPageState();}class _SearchPageState extends State<SearchPage> { 
      @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Centering component       body: Center(        child: Text(" Search page "),      ),    );  }}

page 4 :

import 'package:flutter/material.dart';///  Personal setting interface class SettingPage extends StatefulWidget { 
      @override  _SettingPageState createState() => _SettingPageState();}class _SettingPageState extends State<SettingPage> { 
      @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Centering component       body: Center(        child: Text(" Personal settings page "),      ),    );  }}

3、 Application startup main interface

import 'package:flutter/material.dart';import 'package:flutter_app/navigator/main_navigator.dart';///  Application main page void main() { 
      runApp(      MyApp()  );}class MyApp extends StatelessWidget { 
      // This widget is the root of your application.  @override  Widget build(BuildContext context) { 
        return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MainNavigatorWidget(),    );  }}

4、 Running effect

5、 ... and 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Plug in download address : https://pub.dev/packages
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )
• GitHub Upper Flutter Open source examples : https://download.csdn.net/download/han1202012/15989510
• Flutter Practical e-books : https://book.flutterchina.club/chapter1/

Important topics :

• Flutter Animation reference documentation : https://flutterchina.club/animations/

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_app ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/16306822 ( The source code snapshot of this blog , You can find the source code of this blog )