Flutter：同一页面中有 2 个不同的应用程序栏

Question

在flutter中是否可以在同一个页面中有两个不同的appbars？我需要一个用于 header，但经过一些滚动后，另一个随 body 的其余部分一起出现，并取代了最初的那个。

Answer 1

是的，当您创建一个 child 时，您可以创建新的脚手架，它可以添加一个新的 AppBar

例如..

Return Scaffold(
appBar: AppBar(),
body: Center(
child: Scaffold(
appBar: AppBar()
)
)
)

然后如果你想要建造任何其他东西，你可以将它添加到第二个脚手架的主体中。

Answer 2

您可能想尝试包 flutter_sticky_header。

代码示例

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

class StickyHeaderListWidget extends StatelessWidget {
  final String header;
  final int length;

  const StickyHeaderListWidget({
    Key? key,
    required this.header,
    this.length = 10,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverStickyHeader(
      header: AppBar(title: Text(header)),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (_, i) => ListTile(title: Text('List tile $i')),
          childCount: length,
        ),
      ),
    );
  }
}

class StickyHeadersPage extends StatelessWidget {
  const StickyHeadersPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: CustomScrollView(
        slivers: [
          StickyHeaderListWidget(header: 'Header 1'),
          StickyHeaderListWidget(header: 'Header 2'),
          StickyHeaderListWidget(header: 'Header 3', length: 20),
        ],
      ),
    );
  }
}

Flutter：同一页面中有 2 个不同的应用程序栏

Flutter: 2 differents appbars in same page

flutter

flutter-web

代码示例

结果