[英]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.