时间戳

首页 > 解决方案 > Flutter，如何将开关盒用于底部导航栏？

flutter - Flutter，如何将开关盒用于底部导航栏？

问题描述

我是flutter的初学者，我想使用switch case来路由到另一个页面，我确实尝试过但它不起作用，谁能告诉我我做错了什么？？？

希望有人可以解决我的问题 希望有人可以解决我的问题 希望有人可以解决我的问题 希望有人可以解决我的问题 希望有人可以解决我的问题 希望有人可以解决我的问题

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

  @override
  _BottomNavigationEzyMemberState createState() =>
      _BottomNavigationEzyMemberState();
}

class _BottomNavigationEzyMemberState extends State<BottomNavigationEzyMember> {
  int _selectedIndex = 0;

  var bottomTextStyle =
      GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w500);

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

@override
  Widget build(BuildContext context) {
        (index) {
      switch (_selectedIndex) {
        case 0:
          Navigator.of(context).pushNamed('/homepage');
          break;
        case 1:
          Navigator.of(context).pushNamed('/cardpage');
          break;
      }
    };
    return Container(
      height: 64,
      decoration: BoxDecoration(
        color: mFillColor,
        boxShadow: [
          BoxShadow(
              color: Colors.grey.withOpacity(0.3),
              spreadRadius: 2,
              blurRadius: 15,
              offset: const Offset(0, 5))
        ],
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(24),
          topRight: Radius.circular(24),
        ),
      ),
      child: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: _selectedIndex == 0
                ? SvgPicture.asset('assets/icons/home_colored.svg')
                : SvgPicture.asset('assets/icons/home.svg'),
            title: Text('Home', style: bottomTextStyle),
          ),
          BottomNavigationBarItem(
            icon: _selectedIndex == 1
                ? SvgPicture.asset('assets/icons/order_colored.svg')
                : SvgPicture.asset('assets/icons/order.svg'),
            title: Text(
              'My Card',
              style: bottomTextStyle,
            ),
          ),
          BottomNavigationBarItem(
            icon: _selectedIndex == 2
                ? SvgPicture.asset('assets/icons/watch_colored.svg')
                : SvgPicture.asset('assets/icons/watch.svg'),
            title: Text(
              'Watch List',
              style: bottomTextStyle,
            ),
          ),
          BottomNavigationBarItem(
            icon: _selectedIndex == 3
                ? SvgPicture.asset('assets/icons/account_colored.svg')
                : SvgPicture.asset('assets/icons/account.svg'),
            title: Text(
              'Account',
              style: bottomTextStyle,
            ),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: mBlueColor,
        unselectedItemColor: mSubtitleColor,
        onTap: _onItemTapped,
        backgroundColor: Colors.transparent,
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        showUnselectedLabels: true,
        elevation: 0,
      ),
    );
  }
}

标签： flutter

解决方案

从下面删除 switch 语句buildContext；您将在_onItemTapped.

  void _onItemTapped(int index) {
    setState(() {
      print("working");      
      _selectedIndex = index;
      switch (_selectedIndex) {
        case 0:
          Navigator.of(context).pushNamed('/homepage');
          break;
        case 1:
          Navigator.of(context).pushNamed('/cardpage');
          break;
      }

    });
  }

推荐阅读