Componente Flutter BottomNavigationBar

BottomNavigationBar es la barra de navegación inferior, que nos permite definir el interruptor de pestaña inferior, bottomNatigationBar es el parámetro del componente Scaffold.

Atributos comunes de BottomNavigationBar

Atributos	Descripción
artículos	List <BottomNavigationBarItem> colección de botones de la barra de navegación inferior
tamaño de ícono	icono
currentIndex	Cuál está seleccionado por defecto
onTap	Función de devolución de llamada de cambio seleccionada
onTap	onTap: (int index) { setState (() { print ("Tagwjlis index = $ {index}"); this._currentIndex = index; }); },
FixedColor	Color seleccionado
tipo	BottomNavigationBarType.fixed // Configure las pestañas inferiores para tener varios botones BottomNavigationBarType.shifting

Implementar un directorio de función de cambio de página

main.dart

import 'package:flutter/material.dart';
import 'package:stack_align_positioned/pages/Tabs.dart';
import 'reg/listData.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  int _curentIndex = 0;
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }

}

Tabs.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stack_align_positioned/main.dart';
import 'package:stack_align_positioned/pages/tabs/CategoryPages.dart';
import 'package:stack_align_positioned/pages/tabs/HomePage.dart';
import 'package:stack_align_positioned/pages/tabs/SettingsPages.dart';

class Tabs extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TabsState();
  }
}

class _TabsState extends State<Tabs>{
  int _currentIndex = 0;
  List _listPageData = [  //页面的链表
    HomePages(),
    CategoryPages(),
    SettingsPages()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter BottomNavigationBar"),
      ),
      body: this._listPageData[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,//配置对应的索引值选中
        onTap: (int index){//index 表示选择选项
          setState(() {
            print("Tagwjlis index = ${index}");
            this._currentIndex = index;
          });
        },
        iconSize: 36.0,           //icon的大小
        fixedColor: Colors.red,   //选中颜色
        type: BottomNavigationBarType.fixed,//配置底部tabs可以有多个按钮
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("首页")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text("分类")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("设置")
          )
        ],
      ),
    );
  }
}

HomePages.dart

import 'package:flutter/cupertino.dart';

class HomePages extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }

}

class _HomeState extends State<HomePages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Home Text"),
    );
  }
}

CategoryPages.dart

import 'package:flutter/cupertino.dart';

class CategoryPages extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CategorysStae();
  }
}

class _CategorysStae extends State<CategoryPages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("CategoryPages center"),
    );
  }
}

SettingsPages.dart

import 'package:flutter/cupertino.dart';

class SettingsPages extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return _SettingsStae();
  }
}

class _SettingsStae extends State<SettingsPages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("SettingsPages center"),
    );
  }
}

Flutter BottomNavigationBar personaliza la barra de navegación inferior para lograr el cambio de página