滚动时如何将Tabs固定在App Bar下方？需使用哪些Widgets？

要实现你展示的滚动时Tabs固定在AppBar下方的效果，核心是让AppBar与Tabs始终保持在顶部，下方内容滚动时不影响二者的位置。

关键Widgets说明 #

• Scaffold：页面基础容器，用于承载AppBar和滚动内容区域
• AppBar：顶部固定导航栏，通过其bottom属性挂载Tabs组件，实现Tabs与AppBar绑定固定
• TabBar：标签切换组件，作为AppBar的底部子组件时，会随AppBar保持在顶部
• TabBarView：与TabBar联动的内容容器，需配合可滚动组件承载长内容
• SingleChildScrollView/ListView：用于包裹TabBarView内的长内容，实现局部滚动效果

基础实现代码示例 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const FixedTabPage());
  }
}

class FixedTabPage extends StatefulWidget {
  const FixedTabPage({super.key});

  @override
  State<FixedTabPage> createState() => _FixedTabPageState();
}

class _FixedTabPageState extends State<FixedTabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('固定Tabs演示'),
        // 将TabBar绑定到AppBar底部，实现固定效果
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(text: '标签一'),
            Tab(text: '标签二'),
            Tab(text: '标签三'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // 每个标签页的可滚动内容
          SingleChildScrollView(
            child: Container(
              height: 1500,
              color: Colors.lightBlue[100],
              alignment: Alignment.center,
              child: const Text('标签一的长内容区域'),
            ),
          ),
          SingleChildScrollView(
            child: Container(
              height: 1500,
              color: Colors.lightGreen[100],
              alignment: Alignment.center,
              child: const Text('标签二的长内容区域'),
            ),
          ),
          SingleChildScrollView(
            child: Container(
              height: 1500,
              color: Colors.orange[100],
              alignment: Alignment.center,
              child: const Text('标签三的长内容区域'),
            ),
          ),
        ],
      ),
    );
  }
}

进阶折叠AppBar+固定Tabs #

如果需要AppBar可折叠但Tabs始终固定的效果，可使用NestedScrollView配合SliverAppBar：

// 核心结构示例
NestedScrollView(
  headerSliverBuilder: (context, innerBoxIsScrolled) {
    return [
      SliverAppBar(
        title: const Text('折叠AppBar+固定Tabs'),
        pinned: true,
        expandedHeight: 200,
        flexibleSpace: FlexibleSpaceBar(
          background: Container(color: Colors.grey[300]),
        ),
        bottom: TabBar(
          controller: _tabController,
          tabs: const [Tab(text: '标签A'), Tab(text: '标签B')],
        ),
      ),
    ];
  },
  body: TabBarView(
    controller: _tabController,
    children: [/* 各标签页内容 */],
  ),
)

内容的提问来源于stack exchange，提问作者David