我正在学习《Flutter 中的Riverpod》, 我已经成功地为Tabs创建了一个底部导航栏和一个页面视图,但当我点击导航栏项目时,我的标签没有显示出来,它只是停留在那里,但我的应用程序栏标题和我的AnimatedPosited确实会更新. 我不知道我做错了什么,请帮帮我

S,一个视频推荐人,解释我在Pageview上的麻烦 Video Reference

底部导航栏

class MenuNavBar extends ConsumerStatefulWidget {
  MenuNavBar({Key? key}) : super(key: key);

  @override
  ConsumerState<MenuNavBar> createState() => _MenuNavBarState();
}

class _MenuNavBarState extends ConsumerState<MenuNavBar>
    with TickerProviderStateMixin {
  // late TabController _tabController;
  @override
  void initState() {
    super.initState();

  }

  @override
  void dispose() {
    super.dispose();
  }

  void _onPageChanged(int index) {
    final uiProvider = ref.watch(uiProviders.notifier);
    uiProvider.setSelectedMenuOpt(index);
  }

  @override
  Widget build(BuildContext context) {
    final uiProvider = ref.watch(uiProviders);
    final currentIndex = uiProvider.selectedMenuOpt;

    return BottomNavigationBar(


        showSelectedLabels: false,
        showUnselectedLabels: false,
        items: const [
          BottomNavigationBarItem(
            icon: Image(
              image: AssetImage('assets/icons/inactive/home_tab_inactive.png'),
              width: 25,
              height: 25,
            ),
            activeIcon: Image(
              image: AssetImage('assets/icons/active/home_tab_active.png'),
              width: 30,
              height: 30,
            ),
            label: 'Inicio',
          ),
          BottomNavigationBarItem(
            icon: Image(
              image:
                  AssetImage('assets/icons/inactive/client_tab_inactive.png'),
              width: 25,
              height: 25,
            ),
            activeIcon: Image(
              image: AssetImage('assets/icons/active/client_tab_active.png'),
              width: 30,
              height: 30,
            ),
            label: 'Clientes',
          ),
          BottomNavigationBarItem(
            icon: Image(
              image: AssetImage('assets/icons/inactive/order_tab_inactive.png'),
              width: 25,
              height: 25,
            ),
            activeIcon: Image(
              image: AssetImage('assets/icons/active/order_tab_active.png'),
              width: 30,
              height: 30,
            ),
            label: 'Pedidos',
          ),
          BottomNavigationBarItem(
            icon: Image(
              image:
                  AssetImage('assets/icons/inactive/receipt_tab_inactive.png'),
              width: 25,
              height: 25,
            ),
            activeIcon: Image(
              image: AssetImage('assets/icons/active/receipt_tab_active.png'),
              width: 30,
              height: 30,
            ),
            label: 'Facturas',
          ),
        ],
        currentIndex: currentIndex,
        unselectedItemColor: Colors.grey,
        selectedItemColor: Theme.of(context).primaryColor,
        onTap: _onPageChanged);
  }
}

服务的用户界面提供

class UiPrvoderState {
  int selectedMenuOpt;
  bool isEnabledSwitch;
  bool isLoadingBottomScroller;
  bool showBackToTop;
  PageController pageController;

  UiPrvoderState(
      {this.selectedMenuOpt = 0,
      this.isEnabledSwitch = false,
      this.isLoadingBottomScroller = false,
      this.showBackToTop = false,
      required this.pageController});

  UiPrvoderState copyWith({
    int? selectedMenuOpt,
    bool? isEnabledSwitch,
    bool? isLoadingBottomScroller,
    bool? showBackToTop,
    PageController? pageController,
  }) =>
      UiPrvoderState(
        selectedMenuOpt: selectedMenuOpt ?? this.selectedMenuOpt,
        isEnabledSwitch: isEnabledSwitch ?? this.isEnabledSwitch,
        isLoadingBottomScroller:
            isLoadingBottomScroller ?? this.isLoadingBottomScroller,
        showBackToTop: showBackToTop ?? this.showBackToTop,
        pageController: pageController ?? this.pageController,
      );
}

class UiProviderNotifier extends StateNotifier<UiPrvoderState> {
  UiProviderNotifier()
      : super(UiPrvoderState(pageController: PageController()));

  void setSelectedMenuOpt(int i, {PageController? pageController}) {
    state = state.copyWith(selectedMenuOpt: i);
    pageController?.animateToPage(i,
        duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
  }

  void setIsEnabledSwitch(bool value) {
    state = state.copyWith(isEnabledSwitch: value);
  }

  void setIsLoadingBottomScroller(bool value) {
    state = state.copyWith(isLoadingBottomScroller: value);
  }

  void setShowBackToTop(bool value) {
    state = state.copyWith(showBackToTop: value);
  }
}

final uiProviders =
    StateNotifierProvider.autoDispose<UiProviderNotifier, UiPrvoderState>(
        (ref) {
  return UiProviderNotifier();
});

页面视图

class _MainMenuTabs extends ConsumerStatefulWidget {
  _MainMenuTabs({Key? key}) : super(key: key);

  @override
  ConsumerState<_MainMenuTabs> createState() => __MainMenuTabsState();
}

class __MainMenuTabsState extends ConsumerState<_MainMenuTabs> {
  @override
  Widget build(BuildContext context) {

    final uiProvider = ref.watch(uiProviders);
    return Container(
        height: MediaQuery.of(context).size.height,
        margin: EdgeInsets.only(left: 5, right: 5, top: 0, bottom: 20),
        padding: EdgeInsets.only(top: 0, bottom: 50),
        child: PageView(
            scrollBehavior: const ScrollBehavior(),
            controller: uiProvider.pageController,
            children: <Widget>[
              MainTab(
                dayOfMonth: DateTime.now().day,
                date: '${DateTime.now()}',
                totalAppointments: 40,
                appointmentsLeft: 40 - 1,
              ),
              ClientTab(),
              OrderTab(),
              Container(
                color: Colors.yellow,
              ),
            ]));
  }
}

推荐答案

您没有将pageController传递给uiProvider.setSelectedMenuOpt(Index);

您需要在setSelectedMenuOpt中使用state.pageController.

代码:

void setSelectedMenuOpt(int i) {
    state = state.copyWith(selectedMenuOpt: i);
    state.pageController?.animateToPage(i,
        duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
  }

Flutter相关问答推荐

Cupertino Buttino SheetAction on按下可触发加载指示器,然后勾选并延迟

Flutter:InteractiveViewer中可伸缩SVG背景上的定位小部件不对齐

无法在GroupButton内部正确呈现

在Flutter 中将参数从一个类传递到另一个类

如何让一个名为ONTAP的回调函数、另一个名为onTapDown的回调函数和另一个名为onTapUp的回调函数不重叠?

带有可滚动页面(不包括分页区)的Flutter 页面视图

使用ThemeProvider不在亮模式和暗模式之间切换

更改BottomNavigationBar onTap?的大小

有没有一种正确的方法可以通过上下滑动在两个小部件(在我的情况下是应用程序栏)之间切换?

就像Flutter 中的头文件一样?

一个API中有两个不同JSON响应的Flutter 改装问题

在flutter中实现类似3D的可滚动堆叠分页列表

flatter_localizations错误在Null值上使用了Null判断运算符

按一下按钮即可更新 fl_chart

尽管海拔设置为 0,如何删除 appBar 下的下划线

如何在 Flutter 中将列小部件添加到行小部件?

有什么方法可以将 ChangeNotifier 与 ValueListenableBuilder 一起使用

将一个 Flutter 应用程序集成到另一个 Flutter 应用程序中

如何在 tabBar 中的选项卡之间制作垂直线?

Navigator.push '!_debugLocked' 上的错误:不正确