Aplicación de Flutter bottomNavagationBar

(1) Imagen y descripción del
efecto El efecto que queremos lograr hoy es hacer clic en el icono en la barra de navegación de abajo, el color se volverá verde y luego se puede cargar el contenido de la página correspondiente.

Por tanto, esta sección es otro ejemplo de aplicación de componentes con estado.

Recopila y aprende rápidamente

(2) Puntos de implementación
(1) Puntos de conocimiento: el estado de la
barra de navegación inferior bottomNavigationBar
cambia
el color del icono setState cambia usando las propiedades en la parte inferiorNavigationBar

** Sugerencia: ** Cómo ver las propiedades de un componente
Haga doble clic para seleccionar el componente, haga clic con el botón derecho y podrá hacer clic para abrir y ver todo el contenido del componente. Ir a intentar

(2) Método de escritura:
extrae el código y el código después del salto se encapsula en una clase, y cada clase se da cuenta de requisitos funcionales específicos.

Ahora vamos a aprender a encapsular componentes, hoy esta es la práctica

(3) Implementación del código

Primero, cree los siguientes archivos bajo lib. En cuanto a la estructura, puede hacer lo que quiera. Aquí mi archivo tabs.dart y las pestañas están al mismo nivel.
Luego, a continuación, se muestra el contenido de cada página. archivo
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());//调用函数
  }
}

archivo 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("设置"))
          ]),
    );
  }
}

archivo 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("我是大帅哥"),
        ),
      ],
    );
  }
}

De la misma manera, el código de página para la configuración de otras categorías se refiere al código de la página de inicio anterior.

No sé si tienes alguna pregunta después de leerlo, así
que déjame dejarte una pregunta.
Si quiero agregar algunas navegaciones más en la parte inferior, ¿cómo lograrlo?
Bienvenido a aprender e intercambiar wow

Descifra la respuesta:
enlace: enlace .