如何在底部导航栏上建立索引

Question

大家好，我是 Flutter 新手。我试图使用底部导航栏，但它包括索引导航，我现在在上面停留了很长时间。我不知道该怎么做，如果有人知道该怎么做，请告诉我。这是我的代码

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

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    int _selectedIndex = 0;
    void _onItemTapped(int index) {
      setState(() {
        _selectedIndex = index;
      });
    }

    return Scaffold(
      extendBody: true,
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.white,
        selectedIconTheme: const IconThemeData(color: Colors.white),
        elevation: 100,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.transparent,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.people,
              ),
              label: "Modes"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.person,
              ),
              label: "Profile"),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), label: "Settings"),
        ],
      ),
      body: _selectedIndex == 0
          ? const Das()
          : _selectedIndex == 1
              ? const Das()
              : _selectedIndex == 2
                  ? const SaySomethingAboutYou()
                  : _selectedIndex == 3
                      ? const SaySomethingAboutYou()
                      : Container(),
    );
  }
}

Answer 1

将以下代码移出build方法

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

保持在 @override 语句之上。

Answer 2

您可以使用这种方法：

//class variable
int _currentIndex = 0;//default

//class variable
final _screens = [
  const Page1(),
  const Page2(),
  const Page3(),
];

//your start page
return Scaffold(
  resizeToAvoidBottomInset: false,
  body: Stack(
    children: [
      _screens[_currentIndex],
      //some code
    ],
  ),
);

通过单击导航栏项目，您可以更改 _currentIndex。

Answer 3

从构建方法中调用以下函数

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

您可以根据 selectedIndex 创建新的 Widget 函数和 return 小部件。检查以下 Widget 函数的代码：

Widget bottomNavBarItems(int index) {
    if (index==0) {
        return const Das();    
    } else if (index==1) {
        return const Das();    
    } else if (index==2) {
        return const SaySomethingAboutYou();    
    } else if (index==3) {
        return const SaySomethingAboutYou();    
    } else {
        return const Container();
    }
}

定义此函数后，在 BottomNavigationBar 的主体中调用它，如下所示：

body: bottomNavBarItems(_selectedIndex)

Answer 4

试一试：

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

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  int _selectedIndex = 0;
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBody: true,
        bottomNavigationBar: BottomNavigationBar(
          selectedItemColor: Colors.white,
          selectedIconTheme: const IconThemeData(color: Colors.white),
          elevation: 100,
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.transparent,
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: const [
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.people,
                ),
                label: "Modes"),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.person,
                ),
                label: "Profile"),
            BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), label: "Settings"),
          ],
        ));
  }
}

如何在底部导航栏上建立索引

How to do indexing on bottom navigation bar

flutter

dart

flutter-layout