如何禁用在标签栏内滑动整个屏幕？

Question

我在 SliverAppBar 和那个特定选项卡内有一个 TabBar，有一个容器，可以在其中进一步从左向右滑动，但是当我在屏幕内向左或向右滑动时，它会更改选项卡。假设，我在选项卡 1 上，如果我在容器内滑动，它会转到另一个选项卡。我怎样才能阻止它？如果用户只按下顶部的应用栏，我只想从一个选项卡切换到另一个选项卡，如果它在屏幕内滑动，那应该不会有任何影响。我已经尝试过 NeverScrolPhysics，但它只会停止应用栏并且在屏幕内部没有任何区别。

下面是选项卡的代码：-

         SafeArea(
          child: NestedScrollView(
            controller: _scrollViewController,
            headerSliverBuilder: (BuildContext context, bool  boxIsScrolled){
              return <Widget>[
                SliverAppBar(
                  automaticallyImplyLeading: false,
                  backgroundColor: Colors.transparent,
                  floating: true,
                  pinned: false,
                   snap: true,
                  title: TabBar(

                      isScrollable: true,
                      controller: _tabController,
                      unselectedLabelColor: Colors.blueGrey,
                      unselectedLabelStyle: TextStyle(fontSize: 15,fontWeight: FontWeight.w700 ),
                      labelColor: white,
                      indicatorSize: TabBarIndicatorSize.label,
                      indicator: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: mRed),
                      tabs: [

                        Tab(
                          child: Container(
                         
                              child: Text("TAB 1",),
                            ),
                          ),
                         Tab(
                          child: Container(
                         
                              child: Text("TAB 2",),
                            ),
                          ),
                        )
    and so on......

Answer 1

我很好奇你把 NeverScrollableScrollPhysics() 放在哪里，因为如果我对你的问题的理解正确的话，它就是这样做的。

您已经切掉了下一个关键部分...但是让我们假设在您的 NestedScrollView 主体中有您的 TabBarView，那么它应该如下所示：

    NestedScrollView(
      headerSliverBuilder: ......

      body: TabBarView(
        physics: const NeverScrollableScrollPhysics(),
        .....

这是一个完整的示例：

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: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [
            const SliverAppBar(
              title: Text('AppBar title'),
              bottom: TabBar(
                tabs: [
                  Tab(
                    child: Align(
                      child: Text('Tab 1'),
                    ),
                  ),
                  Tab(
                    child: Align(
                      child: Text('Tab 2'),
                    ),
                  )
                ],
              ),
            )
          ],
          body: TabBarView(
            physics: const NeverScrollableScrollPhysics(),
            children: [
              Container(
                child: const Text('Text 1'),
              ),
              Container(
                child: const Text('Text 2'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

如何禁用在标签栏内滑动整个屏幕？

How to disable swiping whole screen inside the Tab Bar?

dart

flutter

flutter-layout

flutter-animation