dart Flutter底部导航条

dsekswqp  于 12个月前  发布在  Flutter
关注(0)|答案(1)|浏览(172)

我如何在选中的项目上方创建行我尝试了一些不同的方法,但我是新的使用原来的底部导航栏,而不是包


的数据
我已经实现了以下事情,正如你所看到的,除了我想要的线之外,一切都很好。


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

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

class _DashboardScreenState extends State<DashboardScreen> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          canvasColor: const Color(0xFF161E21), // Background color
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          showUnselectedLabels: true,
          unselectedFontSize: 14,
          selectedItemColor: const Color(0xFF00A8A8), // Selected item color
          unselectedItemColor: Colors.white, // Unselected item color
          currentIndex: _selectedIndex,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: _selectedIndex == 0 ? SvgPicture.asset('assets/icons/selectedHome.svg') : SvgPicture.asset('assets/icons/home.svg'),
              label: 'الرئيسية',
            ),
            BottomNavigationBarItem(
              icon: _selectedIndex == 1 ? SvgPicture.asset('assets/icons/selectedTools.svg') : SvgPicture.asset('assets/icons/tools.svg'),
              label: 'الصيانة',
            ),
            BottomNavigationBarItem(
              icon: _selectedIndex == 2 ? SvgPicture.asset('assets/icons/selectedCharge.svg') : SvgPicture.asset('assets/icons/charge.svg'),
              label: 'الشحن',
            ),
            BottomNavigationBarItem(
              icon: _selectedIndex == 3 ? SvgPicture.asset('assets/icons/selectedCar.svg') : SvgPicture.asset('assets/icons/car.svg'),
              label: 'المركبات',
            ),
          ],
        ),
      ),
    );
  }
}

字符串

wz8daaqr

wz8daaqr1#

我认为你可以在“编写你的第一个Flutter应用程序”教程中找到一个很好的方法,特别是在codelab的第7节!

相关问题