为什么导航栏项没有索引？

Question

这是没有错误信息的代码：

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

 class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => BottomNavigation();
}

/// This is the private State class that goes with MyStatefulWidget.
class BottomNavigation extends State<MyStatefulWidget> {
int _selectedIndex = 0;
  List<Widget> _widgetOptions= <Widget>[
    Text('Home'),
    Text('Message')
  ];

  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex=index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: Container(
        decoration: BoxDecoration(
              image: DecorationImage(
                image:
                AssetImage("assets/OptimizeYourFood/OptimizeYourFood2.png"),
                fit: BoxFit.cover,
            ),
              color: Colors.transparent)
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.local_dining),
            label: 'Reduce',
          ),
          BottomNavigationBarItem(
            icon: Icon(FontAwesomeIcons.recycle),
            label: 'Reuse and recycle',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}
[Nothing comes out of bottom navigation bar items][1]

................................................ ..................................................... ..................................................... .................................................这个是结束。这就是结局。这就是结局。这就是结局。到此结束。

New Code

New Picture

Answer 1

它将使用项目数组索引。

items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem( // <- index 0
            icon: Icon(Icons.local_dining),
            label: 'Reduce',
          ),
          BottomNavigationBarItem( // <- index 1
            icon: Icon(FontAwesomeIcons.recycle),
            label: 'Reuse and recycle',
          ),
          ...
        ],

Answer 2

您正在更改索引而不是 UI。在 body 上使用 _widgetOptions 。可以直接使用body:_widgetOptions[_selectedIndex ] .

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => BottomNavigation();
}

/// This is the private State class that goes with MyStatefulWidget.
class BottomNavigation extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  List<Widget> _widgetOptions = <Widget>[Text('Home'), Text('Message')];

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  void _onItemTapped(int index) {
    print("tapped  $index");
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: Column(
        children: [
          _widgetOptions[_selectedIndex]
          // Container(
          //     decoration: BoxDecoration(
          //         image: DecorationImage(
          //           image:
          //               AssetImage("assets/OptimizeYourFood/OptimizeYourFood2.png"),
          //           fit: BoxFit.cover,
          //         ),
          //         color: Colors.transparent)),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.local_dining),
            label: 'Reduce',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
            //  Icon(FontAwesomeIcons.recycle),
            label: 'Reuse and recycle',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

为什么导航栏项没有索引？

Why there is no index in navigation bar item?

indexing

flutter

bottomnavigationview