Nestedscrollview 每隔一个标签滚动一次

Question

我在具有多个选项卡的应用程序上使用 Nestedscrollview，

现在的问题是：每当我在一个选项卡上向下或向上滚动时，其他选项卡也会向下或向上滚动，有没有办法避免这种行为？

谢谢

有我的代码

return Scaffold(
  body: DefaultTabController(
    length: 5,
    child: NestedScrollView(
      headerSliverBuilder: (context, value) {
        return [
          SliverAppBar(
            floating: true,
            snap: true,
            pinned: true,
            title: Text(
              'MyApp',
              style: GoogleFonts.cookie(
                textStyle: TextStyle(
                  fontSize: 35.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
            actions: <Widget>[
              Search(),
              IconButton(
                icon: Icon(Icons.home_rounded),
                iconSize: 25,
                onPressed: () {
                  Navigator.of(context).pushNamed(FeedScreen.routeName);
                },
                color: Colors.white,
              ),
            ],
            backgroundColor: Theme.of(context).colorScheme.secondary,
            bottom: TabBar(
              labelColor: Colors.amber,
              labelStyle: TextStyle(
                fontSize: 17.0,
                fontWeight: FontWeight.bold,
              ),
              
              isScrollable: true,
              tabs: myTabs,
            ),
          ),
        ];
      },
      body: TabBarView(
        children: [
          
          EducationScreen(),
          FamilleScreen(),
          SportsScreen(),
          InfosScreen(),
          PolitiqueScreen(),
        ],
      ),
    ),
  ),
);

Answer 1

NestedScrollView是child，TabBarView在其下。意味着每个 child 都受到相同 NestedScrollView 的影响，这就是为什么您在每个选项卡上获得相同滚动位置的原因，您需要在 TabBarView 的 children 上应用可滚动功能。

您只需关注此小部件即可。

return DefaultTabController(
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            'MyApp',
            style: GoogleFonts.cookie(
              textStyle: TextStyle(
                fontSize: 35.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.home_rounded),
              iconSize: 25,
              onPressed: () {},
              color: Colors.white,
            ),
          ],
          backgroundColor: Theme.of(context).colorScheme.secondary,
          bottom: TabBar(
            labelColor: Colors.amber,
            labelStyle: TextStyle(
              fontSize: 17.0,
              fontWeight: FontWeight.bold,
            ),
            isScrollable: true,
            tabs: List.generate(5, (index) => Text("tab $index")),
          ),
        ),
        body: TabBarView(
          children: [
            ...List.generate(
              5,
              (index) => SingleChildScrollView( // you can choose `CustomScrollView` for better 
                child: Container(
                  color: index.isEven ? Colors.green : Colors.cyanAccent,
                  child: Column(
                    children: [
                      ...List.generate(
                          44,
                          (y) => Container(
                                height: 100,
                                child: Text("tab $index item $y"),
                              ))
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

Nestedscrollview 每隔一个标签滚动一次

Nestedscrollview scroll every other tabs

flutter

tabs

nestedscrollview