Flutter SliverAppBar 在滚动上剪辑灵活空间小部件

Question

我正在制作一个应用程序，当用户开始滚动时，它会在

flexibleSpace

中推送

SliverAppBar

小部件，但我遇到了一些问题。由于使用了

flexibleSpace

小部件，

OverflowBox

溢出到列表中，这有助于存档我想要的效果。

代码：

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverAppBar(
              leading: const SizedBox(),
              expandedHeight: 117 + 43 + 16 + 20 + 16, // will be calculated from variables
              floating: true,
              pinned: true,
              surfaceTintColor: Colors.transparent,
              flexibleSpace: OverflowBox(
                maxHeight: 117 + 43 + 16 + 20 + 16, // will be calculated from variables
                fit: OverflowBoxFit.deferToChild,
                child: AutoLayout(
                  padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 43 + 16),
                  verticalGap: 16,
                  children: [
                    const Text("Featured"),
                    Container(
                      height: 117,
                      width: double.infinity,
                      decoration: ShapeDecoration(
                        color: Colors.blue[300],
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(16),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              bottom: const SelectionTray(
                height: 43,
                tabs: ["TAB", "TAB", "TAB", "TAB", "TAB", "TAB"],
              ),
            ),
          ];
        },
        body: ListView.builder(
          padding: const EdgeInsets.only(top: 16),
          itemCount: 12,
          itemBuilder: (context, index) {
            return Container(
              height: 76,
              padding: const EdgeInsets.all(12),
              margin: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 8.0),
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(16),
              ),
            );
          },
        ),
      ),
    );
  }

结果：

如何才能达到同样的效果而又不会溢出？

Answer 1

尝试用 LayoutBuilder 包装你的 OverflowBox。 LayoutBuilder 小部件可以提供从其父级到其子级的约束，这有助于控制溢出。

SliverAppBar(
  leading: const SizedBox(),
  expandedHeight: 117 + 43 + 16 + 20 + 16, // will be calculated from variables
  floating: true,
  pinned: true,
  surfaceTintColor: Colors.transparent,
  flexibleSpace: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      return OverflowBox(
        maxHeight: constraints.maxHeight,
        fit: OverflowBoxFit.deferToChild,
        child: AutoLayout(
          padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 43 + 16),
          verticalGap: 16,
          children: [
            const Text("Featured"),
            Container(
              height: 117,
              width: double.infinity,
              decoration: ShapeDecoration(
                color: Colors.blue[300],
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
            ),
          ],
        ),
      );
    },
  ),
  bottom: const SelectionTray(
    height: 43,
    tabs: ["TAB", "TAB", "TAB", "TAB", "TAB", "TAB"],
  ),
),

在这段代码中，LayoutBuilder 向 OverflowBox 提供了 SliverAppBar 的约束，这有助于防止溢出。