簡體   English   中英

如何禁用在標簽欄內滑動整個屏幕?

[英]How to disable swiping whole screen inside the Tab Bar?

我在 SliverAppBar 和該特定選項卡內有一個 TabBar,在該特定選項卡內有一個容器,該容器進一步從左到右在其中滑動,但是當我在屏幕內向左或向右滑動時,它會更改選項卡。 假設,我在標簽 1 上,如果我在容器內滑動,它會轉到另一個標簽。 我怎么能阻止它? 如果用戶只按下頂部的應用欄,我只想從一個選項卡切換到另一個選項卡,如果它在屏幕內滑動,那應該沒有任何效果。 我試過 NeverScrollPhysics 但它只會停止應用欄並且在屏幕內沒有任何區別。

以下是標簽的代碼:-

         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......

我很好奇您將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'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM