flutter - Flutter，在第 1 页时无法点击第 2 页

Question

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

• 如果它在第 2 页上，则上一页和下一页都是可点击的。
• 如果它在第 3 页上，则上一页是可点击的。
• 如果它在第 1 页上，则下一页不可点击。

更新：当它在 page1 上单击两个按钮时，这里是 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'),
            ),
          ),
        ],
      ),
    );
  }
}

标签： flutter