时间戳

首页 > 解决方案 > 在 TabBarView 中颤动 PageView：滚动到页面末尾的下一个选项卡

flutter - 在 TabBarView 中颤动 PageView：滚动到页面末尾的下一个选项卡

问题描述

我有 3 个选项卡，每个选项卡里面都有一个 PageView。在 PageView 结束时，我希望能够滚动到下一个选项卡。

如果没有更多页面指向该方向，有没有办法可以进行 TabBar 滚动而不是 PageView 滚动？（仅向左或向右滚动）

这是示例代码。当我在第一个选项卡的最后一页向右滚动时，我想查看第二个选项卡的第一页。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: ScrollableTabsDemo());
  }
}

class _Page {
  const _Page({ this.icon, this.text });
  final IconData icon;
  final String text;
}

const List<_Page> _allPages = <_Page>[
  _Page(icon: Icons.grade, text: 'TRIUMPH'),
  _Page(icon: Icons.playlist_add, text: 'NOTE'),
  _Page(icon: Icons.check_circle, text: 'SUCCESS'),
];

class ScrollableTabsDemo extends StatefulWidget {
  static const String routeName = '/material/scrollable-tabs';

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

class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTickerProviderStateMixin {
  TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: _allPages.length);
  }

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

  @override
  Widget build(BuildContext context) {
    final Color iconColor = Theme.of(context).accentColor;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scrollable tabs'),
        bottom: TabBar(
          controller: _controller,
          isScrollable: true,
          tabs: _allPages.map<Tab>((_Page page) {
            return Tab(text: page.text, icon: Icon(page.icon));
          }).toList(),
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: _allPages.map<Widget>((_Page page) {
          return SafeArea(
            top: false,
            bottom: false,
            child: PageView.builder(
              itemBuilder: (context, position)
              {
                return Container(child: Center(child: Text(position.toString())));
              },
              itemCount: 5,
            ),
          );
        }).toList(),
      ),
    );
  }
}

标签： flutter

解决方案

将 onPageChange 参数添加到 pageBuilder。然后检查它是否是最后一页，如果是，将 tabController 动画到 nextPage。


onPageChanged: (page) {
       if (page == _allPages.length &&
           (_controller.index + 1) < _controller.length) {
          _controller.animateTo(_controller.index + 1);
     }
 },
itemCount: _allPages.length + 1,

推荐阅读