Flutter BottomNavigationBarは、ページの切り替えを実現するために下部のナビゲーションバーをカスタマイズします

FlutterBottomNavigationBarコンポーネント

BottomNavigationBarは下部のナビゲーションバーであり、下部のTabスイッチを定義できます。bottomNatigationBarはScaffoldコンポーネントのパラメーターです。

 

BottomNavigationBarの一般的な属性

属性	説明
アイテム	List <BottomNavigationBarItem>下部ナビゲーションバーボタンコレクション
iconSize	アイコン
currentIndex	デフォルトでどちらが選択されているか
onTap	選択された変更コールバック関数
	onTap：（int index）{           setState（（）{             print（ "Tagwjlis index = $ {index}"）;             this._currentIndex = index;           }）;         }、
fixedColor	選択した色
タイプ	BottomNavigationBarType.fixed //複数のボタンを持つように下部のタブを構成します   BottomNavigationBarType.shifting

 

ページ切り替え機能ディレクトリを実装する

 

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"),
    );
  }
}