我试图弄清楚如何显示活动标签在我的底部导航栏,我使用Flutter Gnav

jgwigjjp  于 2023-06-24  发布在  Flutter
关注(0)|答案(2)|浏览(131)

这是我的代码。成功更改屏幕,但活动选项卡未更改。任何帮助?我想,如果例如它点击配置文件,它将自动显示,配置文件标签是活动的。

class BottomNavBar extends StatefulWidget {
const BottomNavBar({super.key});

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

class _BottomNavBarState extends State<BottomNavBar> {
int _selectedIndex = 0;

static final List<String> _routeNames = [
   '/home',
   '/booking',
   '/settings',
  '/profile'
];

... designs in omy code and Gnav Widget

Gnav(tabs: const [
            GButton(
              icon: LineIcons.home,
              text: 'Home',
            ),
            GButton(
              icon: LineIcons.bookOpen,
              text: 'Bookings',
            ),
            GButton(
              icon: LineIcons.cog,
              text: 'Settings',
            ),
            GButton(
              icon: LineIcons.user,
              text: 'Profile',
            ),
          ],)

selectedIndex: _selectedIndex,
   onTabChange: (index) {
      setState(() {
          selectedIndex = index;
          final goRouter = GoRouter.of(context);
          goRouter.push(_routeNames[index]);
      });
   },
2hh7jdfx

2hh7jdfx1#

setState上,您正在导航到新页面。我想这就是问题的根源。
不需要导航到一个新页面,您可以只在同一个scaffold中将所选索引的页面显示为子级。
你可以这样做

static final List<Widget> _pages = [
   Home(), Booking(), Setting(), Profile(),
];

int _selectedIndex = 0;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ... ,
      body: _pages[_selectedIndex],
      bottomNavigationBar: GNav( ... ),
    );
  }
cwtwac6a

cwtwac6a2#

检查包中提供的示例:https://pub.dev/packages/google_nav_bar/example下面是内容:

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';

void main() => runApp(MaterialApp(
    builder: (context, child) {
      return Directionality(textDirection: TextDirection.ltr, child: child!);
    },
    title: 'GNav',
    theme: ThemeData(
      primaryColor: Colors.grey[800],
    ),
    home: Example()));

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _Examenter code herepleState();
}

class _ExampleState extends State<Example> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.w600);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Home',
      style: optionStyle,
    ),
    Text(
      'Likes',
      style: optionStyle,
    ),
    Text(
      'Search',
      style: optionStyle,
    ),
    Text(
      'Profile',
      style: optionStyle,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 20,
        title: const Text('GoogleNavBar'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              blurRadius: 20,
              color: Colors.black.withOpacity(.1),
            )
          ],
        ),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
            child: GNav(
              rippleColor: Colors.grey[300]!,
              hoverColor: Colors.grey[100]!,
              gap: 8,
              activeColor: Colors.black,
              iconSize: 24,
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              duration: Duration(milliseconds: 400),
              tabBackgroundColor: Colors.grey[100]!,
              color: Colors.black,
              tabs: [
                GButton(
                  icon: LineIcons.home,
                  text: 'Home',
                ),
                GButton(
                  icon: LineIcons.heart,
                  text: 'Likes',
                ),
                GButton(
                  icon: LineIcons.search,
                  text: 'Search',
                ),
                GButton(
                  icon: LineIcons.user,
                  text: 'Profile',
                ),
              ],
              selectedIndex: _selectedIndex,
              onTabChange: (index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

相关问题