颤振，无法在第1页上单击第2页

Question

我创建了一个PageView，其中包含3个页面，每个页面都有一个按钮。 单击每个按钮应滚动到该页面。

• 如果在第2页上，则可以单击上一页和下一页。
• 如果在第3页上，则可以单击上一页。
• 如果在第1页上，则下一页不可点击。

更新： 单击页面1上的两个按钮时，这是RawGestureDetector：

当位置在第1页上时，
• 轻按首页按钮上的按钮。TapGestureRecognizer
当位置在第1页上时，
• 轻按第二页上的按钮。HorizontalDragGestureRecognizer

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<AuthState>.value(
          notifier: AuthState(),
        )
      ],
      child: MaterialApp(
        title: Strings.logoTitle,
        color: Colors.grey,
        home: _ScrollableSubTitleWidget(),
      ),
    );
  }
}

class _ScrollableSubTitleWidget extends StatefulWidget {
  const _ScrollableSubTitleWidget();

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

class _ScrollableSubTitleWidgetState extends State<_ScrollableSubTitleWidget> {
  PageController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: 0, viewportFraction: 0.5);
    debugPrint('[+] -- $runtimeType: initWithScrollPosition: ');
  }

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

  void _animateToPage(int index) {
    // if (index == _controller.page) return;
    debugPrint(
        '[+] -- $runtimeType: scrollPage: [${_controller.page} => $index] ');
    _controller.animateToPage(
      index,
      duration: Duration(milliseconds: 200),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: PageView(
        controller: _controller,
        children: <Widget>[
          Center(
            child: FlatButton(
              onPressed: () {
                _animateToPage(0);
              },
              color: Colors.red,
              child: Text('First Tab'),
            ),
          ),
          Center(
            child: FlatButton(
              onPressed: () {
                _animateToPage(1);   //<-- issue here
              },
              color: Colors.blue,
              child: Text('Second Tab'),
            ),
          ),
          Center(
            child: FlatButton(
              onPressed: () {
                _animateToPage(2);
              },
              color: Colors.green,
              child: Text('Third Tab'),
            ),
          ),
        ],
      ),
    );
  }
}