在底部导航栏的屏幕之间水平滑动

Question

我想在BottomNavigationBar

的屏幕(BottomNavigationBarItems(之间水平滑动。

实施这一点的好方法是什么？

Answer 1

下面是如何做到这一点的示例：

import 'package:flutter/material.dart';
class SwipeTabBar extends StatefulWidget {
  @override
  _SwipeTabBarState createState() => _SwipeTabBarState();
}
class _SwipeTabBarState extends State<SwipeTabBar> {
  final _pageViewController = PageController();
  int _activePage = 0;
  @override
  void dispose() {
    _pageViewController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageViewController,
        children: <Widget>[
          Container(color: Colors.red),
          Container(color: Colors.green),
          Container(color: Colors.blue)
        ],
        onPageChanged: (index) {
          setState(() {
            _activePage = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _activePage,
        onTap: (index) {
          _pageViewController.animateToPage(index, duration: Duration(milliseconds: 200), curve: Curves.bounceOut);
        },
        items: [
          BottomNavigationBarItem(icon: Text("R"), activeIcon: Text("Active"), title: Text("Red")),
          BottomNavigationBarItem(icon: Text("G"), activeIcon: Text("Active"), title: Text("Green")),
          BottomNavigationBarItem(icon: Text("B"), activeIcon: Text("Active"), title: Text("Blue")),
        ],
      ),
    );
  }
}