有没有什么办法可以让标签栏固定在顶部，而工具栏会滚动？

Question

我正在尝试执行与此处 Material 准则中所述相同的滚动技术：https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior 在 "App bar with tabs" 部分。

找不到任何示例来执行此操作。目前在 Flutter 中可以吗？

Answer 1

您希望选项卡栏固定在顶部，同时工具栏滚动。您可以使用 SliverAppBar 和 pinned: true and floating: true 来完成此操作。此示例的完整代码如下。

import 'package:flutter/material.dart';

main() async {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 2,
      child: new Scaffold(
        body: new NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              new SliverAppBar(
                title: const Text('Tabs and scrolling'),
                forceElevated: innerBoxIsScrolled,
                pinned: true,
                floating: true,
                bottom: new TabBar(
                  tabs: <Tab>[
                    new Tab(text: 'green'),
                    new Tab(text: 'purple'),
                  ],
                ),
              ),
            ];
          },
          body: new TabBarView(
            children: <Widget>[
              new Center(
                child: new Container(
                  height: 1000.0,
                  color: Colors.green.shade200,
                  child: new Center(
                    child: new FlutterLogo(colors: Colors.green),
                  ),
                ),
              ),
              new Center(
                child: new Container(
                  height: 1000.0,
                  color: Colors.purple.shade200,
                  child: new Center(
                    child: new FlutterLogo(colors: Colors.purple),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

有没有什么办法可以让标签栏固定在顶部，而工具栏会滚动？

Is there any way to make tab bar stays anchored at the top, while the toolbar scrolls off?

dart

flutter