是否可以从TabBarView内容区域滑动到相邻的PageView页面? [英] Is it possible to swipe from an TabBarView content area to an adjacent PageView page?

问题描述

我想在水平PageView中放置标签，并能够从标签中滑动.在内容区域内，我可以从页面滑入选项卡，但不能滑出选项卡到另一个页面.如果我在TabBar上滑动，则可以离开这些标签并转到下一页.

I'd like to place a tabs inside a horizontal PageView and be able to swipe out of the tabs. Within the content area, I can swipe into the tabs from a page, but not out of the tabs to another page. If I swipe on the TabBar, then I can get out of the tabs and go to the adjacent page.

是否可以让我从TabView内容区域滑动并将其移至相邻的PageView页面?

Is there a way to allow me to swipe from a TabView content area and have it move to the adjacent PageView page?

这是我的测试代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return PageView(
      children: <Widget>[
        Scaffold(
          appBar: AppBar(title: Text('Page 1'),),
          body: Center(child: Text('hi'),),
        ),
        DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
              bottom: TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
            ),
            body: TabBarView(
              children: [
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            ),
          ),
        ),
        Scaffold(
          appBar: AppBar(title: Text('Page 3'),),
          body: Center(child: Text('bye'),),
        ),
      ],
    );
  }
}

推荐答案

好的，我相信我已经知道了您要寻找的东西.为此，我建议在窗口小部件树中使用类似NotificationListener的内容来捕获OverscrollNotification，并且您可以向左或向右滚动，具体取决于过度滚动的一侧(左小于0，右大于0)

Ok, I believe I got the idea of what you're looking for. For this, I suggest using something like a NotificationListener in your widget tree that will catch the OverscrollNotification and you can either scroll to left or right, depending of the overscroll side (less than 0 for left, over 0 for right).

我对它的每一侧进行了线性动画处理(250毫秒)，但是您可以根据需要对其进行调整.

I made it animate linearly (250 ms) for each side, but you can tweak it to your needs.

class Example extends StatefulWidget {
  Example({Key key}) : super(key: key);

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

class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
  TabController _tabController;
  final PageController _pageController = PageController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: PageView(
        controller: _pageController,
        children: <Widget>[
          Center(child: Text('Page 1')),
          Column(
            children: <Widget>[
              TabPageSelector(controller: _tabController),
              Text('Page 2'),
              NotificationListener(
                onNotification: (overscroll) {
                  if (overscroll is OverscrollNotification && overscroll.overscroll != 0 && overscroll.dragDetails != null) {
                    _pageController.animateToPage(overscroll.overscroll < 0 ? 0 : 2,
                        curve: Curves.ease, duration: Duration(milliseconds: 250));
                  }
                  return true;
                },
                child: Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: <Widget>[
                      Center(child: Text('Tab 1')),
                      Center(child: Text('Tab 2')),
                      Center(child: Text('Tab 3')),
                    ],
                  ),
                ),
              ),
            ],
          ),
          Center(child: Text('Page 3')),
        ],
      ),
    );
  }
}

这篇关于是否可以从TabBarView内容区域滑动到相邻的PageView页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！