咨询Flutter底部带左右滑动切换页面的图标组件名称

你说的这种需求，Flutter官方已经有成熟的组合方案，不需要手动用Container+Row+Icons从零实现：

核心是用**BottomNavigationBar搭配PageView**（或TabBarView）来完成，完全匹配你提到的推特主页样式。

实现逻辑 #

• PageView负责管理可左右滑动的页面集合，通过PageController控制页面切换
• BottomNavigationBar提供带图标的导航项，点击时通过PageController跳转到对应页面；同时监听PageView的滑动事件，同步更新导航栏的选中状态

核心代码示例 #

class TwitterStyleHome extends StatefulWidget {
  @override
  _TwitterStyleHomeState createState() => _TwitterStyleHomeState();
}

class _TwitterStyleHomeState extends State<TwitterStyleHome> {
  final PageController _pageController = PageController();
  int _currentTabIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) {
          setState(() => _currentTabIndex = index);
        },
        children: const [
          FeedPage(),
          ExplorePage(),
          NotificationsPage(),
          ProfilePage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          _pageController.jumpToPage(index);
          setState(() => _currentTabIndex = index);
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            activeIcon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search_outlined),
            activeIcon: Icon(Icons.search),
            label: '探索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications_none_outlined),
            activeIcon: Icon(Icons.notifications),
            label: '通知',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            activeIcon: Icon(Icons.person),
            label: '我的',
          ),
        ],
      ),
    );
  }
}

如果需要更贴近iOS原生风格的底部导航滑页效果，可以使用**CupertinoTabScaffold**配合CupertinoTabBar，它自带页面切换的动画与状态同步逻辑，无需额外处理控制器。

内容的提问来源于stack exchange，提问作者Emerson Brancher