flutter - 当折叠内容是动态时如何在 flutter 中实现条子

Question

我需要开发一个屏幕，其中可以使用 sliver 来实现可折叠内容。

但是，可折叠内容的高度是动态的，并且取决于适用于用户的动态小部件的数量(有些可能没有两个动态小部件，有些有一个，有些两者都有)。这些动态小部件作为并行服务加载到后端，而不是以顺序方式加载。不然我就一一计算高度了。

我们将不胜感激，因为互联网上的所有示例都指出了条子的固定标题高度

附上我想要实现的目标的示例图像。

Answer 1

尝试使用银色应用栏，并确保您的 toolbarHeight 为 0。这里我仅对单个元素使用固定高度，总高度将根据您的元素或小部件的数量进行更改有。

import 'package:flutter/material.dart';

class DynamicAppbar extends StatefulWidget {
  const DynamicAppbar({Key key}) : super(key: key);

  @override
  _DynamicAppbarState createState() => _DynamicAppbarState();
}

class _DynamicAppbarState extends State<DynamicAppbar> {
  //set the height fixed for each widget
  double fixedHeight = 50;

  // replace with coming elements
  List<String> items = [
    "dynamicWidget1",
    "dynamicWidget2",
    "dynamicWidget3",
    "dynamicWidget4",
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("My App Bar"),
        ),
        body: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: fixedHeight * items.length,
                  floating: false,
                  pinned: true,
                  snap: false,
                  toolbarHeight: 0,
                  flexibleSpace: FlexibleSpaceBar(
                    background: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: List<Widget>.generate(
                        items.length,
                        (index) {
                          return Container(
                            height: fixedHeight,
                            child: Center(
                                child: Text(
                              items[index],
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 24, fontWeight: FontWeight.bold),
                            )),
                          );
                        },
                      ),
                    ),
                  ),
                ),
                SliverPersistentHeader(
                  delegate: _SliverAppBarDelegate(
                    TabBar(
                      labelColor: Colors.black87,
                      unselectedLabelColor: Colors.grey,
                      tabs: [
                        Tab(icon: Icon(Icons.info), text: "Tab 1"),
                        Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 2"),
                      ],
                    ),
                  ),
                  pinned: true,
                ),
              ];
            },
            body: Center(
              child: Text("Sample text"),
            ),
          ),
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;

  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

输出:

滚动前后