Aplicação de Flutter bottomNavagationBar

(1) Imagem e descrição do
efeito O efeito que queremos alcançar hoje é clicar no ícone na barra de navegação abaixo, a cor ficará verde e, em seguida, o conteúdo da página correspondente pode ser carregado.

Portanto, esta seção é outro exemplo de aplicação de componentes com estado.

Colete e aprenda rapidamente

(2) Pontos de implementação
(1) Pontos de conhecimento: o estado da
barra de navegação inferior bottomNavigationBar
muda
a cor do ícone setState muda usando as propriedades na bottomNavigationBar

** Dica: ** como visualizar as propriedades de um componente
Clique duas vezes para selecionar o componente, clique com o botão direito e você pode clicar para abrir e ver todo o conteúdo do componente. vai tentar

(2) Método de escrita:
extraia o código, e o código após o salto é encapsulado em uma classe, e cada classe realiza requisitos funcionais específicos

Vamos agora aprender como encapsular componentes, hoje esta é a prática

(3) Implementação do código

Primeiro, crie os seguintes arquivos sob a lib. Quanto à estrutura, você pode fazer o que quiser. Aqui, meu arquivo tabs.dart e guias estão no mesmo nível.
A seguir, está o conteúdo de cada página. arquivo
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());//调用函数
  }
}

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

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

Da mesma forma, o código da página para outras configurações de categoria se refere ao código na página inicial acima.

Não sei se você tem alguma dúvida depois de lê-lo, então
deixe-me deixar uma pergunta.
Se eu quiser adicionar mais algumas navegações na parte inferior, como fazer isso?
Bem-vindo a aprender e trocar uau

Descriptografe a resposta:
link: link .