FlutterbottomNavagationBarの適用

（1）効果画像と説明
本日実現したい効果は、下のナビゲーションバーのアイコンをクリックすると、色が緑色に変わり、対応するページコンテンツを読み込むことができます。

したがって、このセクションはステートフルコンポーネントの別のアプリケーション例です。

すばやく収集して学ぶ
ここに画像の説明を挿入

（2）実装ポイント
（1）ナレッジポイント：
下部のナビゲーションバーbottomNavigationBarの
状態
は、bottomNavigationBarのプロパティを使用してsetStateアイコンの色を変更します

**ヒント：**コンポーネントのプロパティを表示する方法
ダブルクリックしてコンポーネントを選択し、右クリックすると、クリックして開き、コンポーネントのすべてのコンテンツを表示できます。試してみてください

（2）
記述方法：コードを抽出し、ジャンプ後のコードをクラスにカプセル化すると、各クラスが特定の機能要件を実現します。

コンポーネントをカプセル化する方法を学びます。今日はこれが実践です

（3）コードの実装
ここに画像の説明を挿入
まず、libの下に以下のファイルを作成します。構造は何でもできます。ここで私のtabs.dartファイルとタブは同じレベルにあります。
次に、各ページのコンテンツを以下に示します。
main.dartファイル

import 'package:flutter/material.dart';
import 'pages/tabs.dart';

void main() => runApp(MyApp());//入口函数

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Tabs());//调用函数
  }
}

tabs.dartファイル

import 'package:flutter/material.dart';
import 'tabs/category.dart';//导包
import 'tabs/home.dart';
import 'tabs/setting.dart';

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;

  List _pageList = [
    Homepage(),
    Categorypage(),
    Settingpage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('甜宠软妹'),
        centerTitle: true,
      ),
      body: this._pageList[this._currentIndex], //调用函数
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          onTap: (int index) {
            setState(() {//状态改变
              this._currentIndex = index;
            });
          },

          iconSize: 30.0,//图标大小
          fixedColor: Colors.green,//图标改变后的颜色
     
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text("首页")),
            BottomNavigationBarItem(
                icon: Icon(Icons.category), title: Text("分类")),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), title: Text("设置"))
          ]),
    );
  }
}

home.dartファイル

import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage>{
  @override
  Widget build(BuildContext context) {
   return ListView(
      children: <Widget>[
        ListTile(title: Text("我是首页"),
        ),
        ListTile(title: Text("我是master"),
        ),
        ListTile(title: Text("我是大帅哥"),
        ),
      ],
    );
  }
}

同様に、他のカテゴリ設定のページコードは、上記のホームページのコードを参照しています。

読んだ後で質問があるかどうかわからないので
、質問を残しておきます。
下部にナビゲーションをいくつか追加したい場合は、どうすればよいですか。
すごい学びと交換へようこそ

答えを解読します：
link：link。

おすすめ