使用 PageView 的 Flutter 底部导航栏

Question

我想构建带有综合浏览量的底部导航栏。这将是 3 页，您可以向左或向右过渡。我可以滑动，但我的导航栏选择的项目颜色没有改变。你能帮帮我吗？

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
final PageController _pageController = PageController();

@override
Widget build(BuildContext context) {
return Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
          icon: Icon(Icons.portrait), title: Text('Profile')),
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
      BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart), title: Text('Shop'))
    ],
    onTap: _onTappedBar,
    selectedItemColor: Colors.orange,
    currentIndex: _selectedIndex,
  ),
  body: PageView(
    controller: _pageController,
    children: <Widget>[
      ProfilePage(),
      HomeTables(),
      ShoppingPage(),
    ],
  ),
);
}

void _onTappedBar(int value) {
setState(() {
  _selectedIndex = value;
});
_pageController.jumpToPage(value);
}
}

Answer 1

您只需要使用 PageView 的 onPageChanged 属性来捕获当前页码。

PageView(
        controller: _pageController,
        children: <Widget>[
          ProfilePage(),
          HomeTables(),
          ShoppingPage(),
        ],
        onPageChanged: (page) {
          setState(() {
            _selectedIndex = page;
          });
        },
    );

Answer 2

只需添加 PageView 的 onPageChanged 属性并将 pageIndex 分配给 _selectedIndex 属性，然后使用 [= 重新加载小部件14=]方法。

onPageChanged - Called whenever the page in the center of the viewport changes.

PageView(
  ....
  onPageChanged: (pageIndex) {
    setState(() {
      _selectedIndex = pageIndex;
    });
  },
  ...
)

使用 PageView 的 Flutter 底部导航栏

Flutter Bottom Navigation Bar with PageView

mobile

flutter

bottomnavigationview