[学習]の基本的な構成要素のBottomNavigationBarフラッタ下部ナビゲーションバー

I.概要

　　BottomNavigationBarこれは、下部のナビゲーションバーコントロールで、デザインコントロールがトップレベルのビュー間の迅速なナビゲーションを提供一言で言えば、下部のナビゲーションバーには、いくつかのラベル、アイコン、またはフォームとの両方が含まれて切り替えるようにしようとするために、ページの下部に表示されます。。

二、バーのキー要素

B ottomNavigationBar　　

B ottomNavigationBarは 制御の下で足場のいずれかに属します。通常 BottomNavigationBarItemは 一緒に使用しました。

BottomNavigationBarコンストラクタ

BottomNavigationBar（{ 
    キーキーは、
    @required これは、.items  
     この.onTap、
     この .currentIndex = 0 、
    BottomNavigationBarTypeタイプ、
    この.fixedColor、
     この .iconSize = 24.0 、
  }）

BottomNavigationBarパラメータ意味

BottomNavigationBarItem
- アイコンとタイトル組成物で表示される項目の下のナビゲーションバー
- BottomNavigationBarItemのコンストラクタ
```
  CONST BottomNavigationBarItem（{ 
    @required この.icon、
     この.TITLE、
    ウィジェットのactiveIcon、
    この.backgroundColor、
  }）
```
- BottomNavigationBarItemパラメータ意味

第三に、実装プロセス

ラベルの下の1.建設

 // 导航图标 
   最終一覧<BottomNavigationBarItem> bottomNavItems = [
      新しいBottomNavigationBarItem（
       backgroundColorの：Colors.blue、
       アイコン：アイコン（Icons.home）、
       タイトル：新しいテキスト（" 首页" ）
     ）、

     新BottomNavigationBarItem（
       backgroundColorの：Colors.green、
       アイコン：アイコン（Icons.message）、
       タイトル：新しいテキスト（' 消息' ）
     ）、

     新しいBottomNavigationBarItem（ 
       backgroundColorの：Colors.amber、
       アイコン：アイコン（Icons.shopping_cart）、
       タイトル：新テキスト（" カート" ）
     ）、

     新新BottomNavigationBarItem（
       backgroundColorの：Colors.red、
       アイコン：アイコン（Icons.person）、
       タイトル：テキスト（' 個々のセンター' ）
     ）
   ];

2.ナビゲーション表示ページの作成

 // 视图ビュー 
    最終ページビュー= [
         新しいホームページ（）、
         新しいMsgPage（）、
         新しいCartPage（）、
         新しいPersonPage（）
    ]。

2.下部のナビゲーションバーを作成します。

      / * *現在のページには、ナビゲーションキーをクリックされていない場合は、スイッチ* / 
    無効 _changePage（int型のインデックス）{
      IF（インデックス=！currentIndex）{ 
       SETSTATE（（）{ 
         currentIndex = インデックス; 
       }）; 
     } 
    } 
 
    @Override 
    ウィジェットのビルド（BuildContextコンテキスト）{ 
    // TODO：ビルドが実装
    返す 新しい新DefaultTabController（
      myTabs.length、：長さ
      チャイルド：   新新足場（
        アプリケーションバー：新しい新しいアプリケーションバー（
          タイトル：新新しいテキスト（「トップタブバーを' ）、
          底：新規のTabBar（
            indicatorColor：Colors.blue、
            タブ：myTabs、
            isScrollable：真、
          ）、 
        ）、
       
        bottomNavigationBar：新しいBottomNavigationBar（
          アイテム：bottomNavItems、
          currentIndex：currentIndex、
          タイプ：BottomNavigationBarType 固定、
          ONTAP：（インデックス） { 
             _changePage（インデックス）; 
          } 
        ）、
        本体：ページビュー[currentIndex] ）
  ）。
      
}

3.コンプリート

インポート' パッケージ：フラッター/ material.dart ' ; 
インポート' ./HomePage.dart ' ; 
インポート' ./CartPage.dart ' ; 
インポート' ./MsgPage.dart ' ; 
インポート' ./PersonPage.dart ' ; 

ボイドメイン（）=> runApp（MyAppを（））。

クラスのMyAppはStatelessWidget {拡張
  @Overrideの
  ウィジェットのビルド（BuildContextコンテキスト）{ 
    // TODOを：ビルドが実装
    返す 新しいMaterialApp（
      タイトル：" 页面布局" 、
      テーマ：新ThemeData（
        primarySwatch：Colors.red 
      ）、
      ホーム：新しいアプリケーション（）、
    ）; 
  } 
} 

クラスアプリStatefulWidget {延び

  @Override 
  状態 <StatefulWidget> createState（）{
     // TODO：createState実装
    戻り 新しいAppStateを（）; 
  } 
} 

クラス AppState延びている状態<アプリケーション> { 

    // 导航图标 
   最終リスト<BottomNavigationBarItem> bottomNavItems = [
      新しいBottomNavigationBarItem（
       backgroundColorの：Colors.blue、
       アイコン：アイコン（Icons.home）、
       タイトル：新しいテキスト（" 首页" ）
     ）、

     新BottomNavigationBarItem（
       backgroundColorの：Colors.green、
       アイコン：アイコン（Icons.message）、
       タイトル：新しいテキスト（" 消息" ）
     ）、

     新BottomNavigationBarItem（
       backgroundColorの：Colors.amber、
       アイコン：アイコン（Icons.shopping_cart）、
       タイトル：新しいテキスト（" 购物车" ）
     ）、

     新しいですBottomNavigationBarItem（
       backgroundColorの：Colors.red、
       アイコン：アイコン（Icons.person）、
       タイトル：テキスト（' 个人中心' ）
     ）
   ]; 

   int型currentIndex; 

   // 视图ビュー 
    最終ページビュー= [
         新しいホームページ（）、
         新しいMsgPage（）、
         新しいCartPage（）、
         新しいPersonPage（）
    ]。

    @Override 
    ボイドinitState（）{ 
      super.initState（）。
      currentIndex = 0 ; 
    } 

      / **現在のページは、ナビゲーションキー、スイッチをクリックされていない場合* /
    ボイド _changePage（int型のインデックス）{
      IF（インデックス=！currentIndex）{ 
       SETSTATE（（）{ 
         currentIndex = インデックス; 
       }）; 
     } 
    } 
 
    @Override 
    ウィジェットのビルド（BuildContextコンテキスト）{ 
    // TODO：ビルドが実装
    返す  新しい新しい足場（
        ：アプリケーションバーの新しい新しいアプリケーションバー（
          タイトル：新新しいテキスト（「トップタブバーを」）、 
        ）、
       
        bottomNavigationBar：新新bottomNavigationBar（
          アイテム：bottomNavItems、
          currentIndex：currentIndex、
          タイプ：BottomNavigationBarType。固定、
          ONTAP：（インデックス）{ 
             _changePage（インデックス）
          }、 
        ）、
        本体：ページビュー[currentIndex] 
    ）。
 } 
}

[学習]の基本的な構成要素のBottomNavigationBarフラッタ下部ナビゲーションバー

I.概要

二、バーのキー要素

第三に、実装プロセス

おすすめ