Flutter：結合 SliverAppbar 和 Column 小部件

Question

我正在嘗試為應用程序創建一個事件頁面，用戶可以在其中查看具有橫幅圖像和其他一些有用信息的事件。 我真的很喜歡用橫幅實現 SliverAppBar 的想法，這樣用戶就可以滾動查看更多信息。 為此，我似乎需要一個帶有 SliverAppBar 和 FlexibleSpaceBar 的 CustomScrollView。

我在網上看到的所有教程都假設屏幕的其余部分應該是一個排序列表，但我更想要像 Column 小部件這樣的東西。 但是，Column 具有無限的高度，這會導致 CustomScrollView 中出現溢出錯誤。 我可以將它包裝在具有指定高度的 Container 中，但是 body 的內容大小可變，所以這並不理想。 有沒有辦法讓 SliverAppBar 和 Column 並排工作？

我想要一些類似的東西：

class ActivityPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(slivers: [
          SliverAppBar(
            flexibleSpace: FlexibleSpaceBar(
              background: Image(someImage),
            ),
            expandedHeight: Image,
            floating: false,
            pinned: true,
            snap: false,
          ),
          Column(
            children: [
              someChildren,
            ]
            ),
          )
        ]),
      ),
    );
  }

這應該是可能的，因為在我看來這是一個有點常見的模式，但我環顧四周，我只能找到主體由列表組成的例子......

Answer 1

對於任何有同樣掙扎的人：這是我剛剛找到的解決方案：

Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder:
            (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              backgroundColor: this.color,
              flexibleSpace: FlexibleSpaceBar(
              background: YourImage(),
              ),
            )
          ];
          },
        body: Container(
          child: Builder(builder: (context) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  WidgetOne(),
                  WidgetTwo()
                ]);
          })),
        ),
      )),
    );
  }

Answer 2

使用 ListView 而不是 Column。 ListView 具有動態大小

Answer 3

使用SliverList和SliverChildListDelegate而不是Column 。

Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 200,
          flexibleSpace: FlexibleSpaceBar(
            background: Container(color: Colors.green),
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate([
            Container(color: Colors.yellow, height: 400),
            Container(color: Colors.red, height: 800),
          ]),
        ),
      ],
    ),
  );
}

Answer 4

對我來說最好的方法是使用SliverToBoxAdapter 。 只需將您的Column包裝在Container ，然后將此Container在SliverToBoxAdapter ，它應該可以正常工作。