flutter 如何从底部导航栏打开bottomModal工作表?

ryevplcw  于 2023-03-04  发布在  Flutter
关注(0)|答案(1)|浏览(142)

在底部导航栏中,我有五个图标,其中四个打开4个不同的屏幕,我希望另一个打开showModalBottomSheet,但当我实现它并运行应用程序时,它显示错误消息
在构建期间调用了setState()或MarkNeedsBuild()。和"包:flutter/src/widgets/navigator. dart":Assert失败:第2903行位置18:"!导航器.调试锁定":不是真的。
我还尝试使用WidgetsBinding. instance?. addPostFrameCallback((
),但它也显示错误**"此表达式的类型为" void ",因此无法使用其值。"**我应该怎么做??

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

  @override
  State<BottomNavigationPage> createState() => _BottomNavigationPageState();
}

class _BottomNavigationPageState extends State<BottomNavigationPage> {
  int currentIndex = 1;

  @override
  Widget build(BuildContext context) {
    List body = [
      showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
            return const Containers(
              height: 400,
              color: Colors.green,
            );
          }),
      const Containers(
        height: 400,
        color: Colors.red,
      ),
      const Dashboard(),
      const DepartmentPage(),
      const Dashboard(),
      const DepartmentPage(),
    ];
    return Scaffold(
      body: Center(
        child: body[currentIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        //showUnselectedLabels: true,
        selectedItemColor: AppColor.btnColor,
        selectedIconTheme: const IconThemeData(color: AppColor.btnColor),
        unselectedItemColor: Colors.black45,
        showSelectedLabels: true,
        currentIndex: currentIndex,
        onTap: (int newindex) {
          setState(() {
            currentIndex = newindex;
          });
        },
        items: const [
          BottomNavigationBarItem(
            label: '',
            activeIcon: Icon(
              Icons.menu,
              color: AppColor.btnColor,
              size: 30,
            ),
            icon: Icon(
              Icons.menu,
              size: 30,
            ),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.home,
              size: 30,
            ),
            label: 'होम',
            icon: Icon(
              Icons.home,
              size: 30,
            ),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.people,
              size: 30,
            ),
            label: 'शाखा हरु ',
            icon: Icon(
              Icons.people,
              size: 30,
            ),
          ),
          BottomNavigationBarItem(
            label: 'सूचना हरु',
            activeIcon: Icon(
              Icons.task,
              size: 30,
            ),
            icon: Icon(
              Icons.task,
              size: 30,
            ),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.task,
              size: 30,
            ),
            label: 'सूचना हरु',
            icon: Icon(
              Icons.task,
              size: 30,
            ),
          ),
        ],
      ),
    );
  }
}
y0u0uwnf

y0u0uwnf1#

您不必将showModalBottomSheet添加到body列表中。您可以在点击BottomNavigationBarItem时检查newindex == 0,然后显示它。请尝试以下操作

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

  @override
  State<BottomNavigationPage> createState() => _BottomNavigationPageState();
}

class _BottomNavigationPageState extends State<BottomNavigationPage> {
  int currentIndex = 1;

  @override
  Widget build(BuildContext context) {
    List body = [
      const Containers(
        height: 400,
        color: Colors.red,
      ),
      const Dashboard(),
      const DepartmentPage(),
      const Dashboard(),
      const DepartmentPage(),
    ];
    return Scaffold(
      body: Center(
        child: body[currentIndex-1],
      ),
      bottomNavigationBar: BottomNavigationBar(
        //showUnselectedLabels: true,
        selectedItemColor: AppColor.btnColor,
        selectedIconTheme: const IconThemeData(color: AppColor.btnColor),
        unselectedItemColor: Colors.black45,
        showSelectedLabels: true,
        currentIndex: currentIndex,
        onTap: (int newindex) {
          if (newindex == 0) {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return const Containers(
                  height: 400,
                  color: Colors.green,
                );
              }
            );
          } else {
            setState(() {
              currentIndex = newindex;
            });
          }
        },
        items: const [
          BottomNavigationBarItem(
            label: '',
            activeIcon: Icon(
              Icons.menu,
              color: AppColor.btnColor,
              size: 30,
            ),
            icon: Icon(
              Icons.menu,
              size: 30,
            ),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.home,
              size: 30,
            ),
            label: 'होम',
            icon: Icon(
              Icons.home,
              size: 30,
            ),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.people,
              size: 30,
            ),
            label: 'शाखा हरु ',
            icon: Icon(
              Icons.people,
              size: 30,
            ),
          ),
          BottomNavigationBarItem(
            label: 'सूचना हरु',
            activeIcon: Icon(
              Icons.task,
              size: 30,
            ),
            icon: Icon(
              Icons.task,
              size: 30,
            ),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.task,
              size: 30,
            ),
            label: 'सूचना हरु',
            icon: Icon(
              Icons.task,
              size: 30,
            ),
          ),
        ],
      ),
    );
  }
}

相关问题