11. ボトムナビゲーションバーとページ切り替えのカスタマイズを学習するFlutterのBottomNavigationBar

BottomNavigationBar

BottomNavigationBarこれは、下部のタブ スイッチを定義できる下部のナビゲーション バーであり、bottomNavigationBar前述したScaffoldコンポーネントのパラメータです。
共通の属性:

属性名	説明する
items	List<BottomNavigationBar>下部のナビゲーション バーのコレクション
iconSize	アイコンのサイズ
currentIndex	デフォルトで選択される番号
onTap	選択された変更コールバック関数
fixedColor	選択した色
type	BottomNavigationBarType.fied BottomNavigationBarType.shifting

注: 下部に 3 つ以上のタブがある場合、BottomNavigationBarType.fied正常に表示するにはこの属性を使用する必要があります

main()=>runApp(MyApp());
class MyApp extends StatelessWidget{


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }

}

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

}

class _TabsState extends State<Tabs>{
  int _bottomIndex=0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body: Text('tabBar'),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
        ],
      ),
    );
  }
}

タブをクリックすると、タブの色が切り替わることがわかります。

詳細設定: Tab をクリックしてページを切り替えます

まず、ページの
ホームページを作成します

class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }

}

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

設定

class CategoryPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CategoryPageState();
  }

}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('这是设置页面'),
    );
  }
}

私の

class MinePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _MinePageState();
  }

}

class _MinePageState extends State<MinePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('这是我的页面'),
    );
  }
}

次に、_TabsStateクラスを次のように変更できます

class _TabsState extends State<Tabs>{
  List<Widget> _page=[HomePage(),SettignPage(),MinePage()]; //用于存放对应的页面
  int _bottomIndex=0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body:this._page[_bottomIndex],//此处取下标对应的页面即可
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
        ],
      ),
    );
  }
}