Flutter CustomScrollView 中的中心小部件

Question

如何在自定義子滾動視圖 silverlist 中居中元素？

return CustomScrollView(
  physics: BouncingScrollPhysics(),
  slivers: <Widget>[
    SliverList(
        delegate: SliverChildListDelegate([
      SizedBox(height: widget.height),

      HeaderTitle("Hello there"),
      (data.length == 0)
          ? Center(
              child: Container(
                // padding: EdgeInsets.fromLTRB(0, 150, 0, 0),
                child: Column(
                  children: [
                    Text("No Data Yet"),
                    OutlineButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      textColor: Colors.black,
                      child: Text("Do Something"),
                    ),
                  ],
                ),
              ),
            )
          : Container()
    ])),
  
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        childAspectRatio: 10.0 / 10.0,
        crossAxisCount: 2,
      ),
      delegate:
          SliverChildBuilderDelegate((BuildContext context, int index) {
        return CastCard(data[index], null);
      }, childCount: data.length),
    ),
  ],
);

我試圖用 Center 和 Column 用 center 屬性換行，但文本 No Date 尚未定位在屏幕的中心（剩余空間可用）

Answer 1

您可以使用SliverToBoxAdapter在CustomScrollView中放置一個自定義小部件，然后在其中放置一個Center小部件。 例如：

class MenuView extends StatelessWidget {

  double _kMaxCrossAxisExtent = 100;
  double _kMainAxisSpacing=10;
  double _kChildAspectRatio = 1;
  double _kCrossAxisSpacing = 10;
  final double _kSliverPadding = 8;
  double _kExpandedHeight = 250;
  double _kCollapsedHeight =250;


  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        SliverAppBar(
          expandedHeight: _kExpandedHeight,
          collapsedHeight: _kCollapsedHeight,
          flexibleSpace: Placeholder(
            fallbackHeight: 800,
          ),
          elevation: 10,
          actions: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: null,
            )
          ],
        ),
        SliverToBoxAdapter(
          child:Center(child:Padding(
            padding: const EdgeInsets.symmetric(vertical: 80),
            child: Text('This is a centered Text'),
          ))
        ),
        SliverPadding(
          padding: /*const*/ EdgeInsets.all(_kSliverPadding),
          sliver: SliverGrid.extent(
            maxCrossAxisExtent: _kMaxCrossAxisExtent,
            mainAxisSpacing: _kMainAxisSpacing,
            crossAxisSpacing: _kCrossAxisSpacing,
            childAspectRatio: _kChildAspectRatio,
            children: [
              for (int i = 0; i <= 10; i++)
                Placeholder(
                  fallbackWidth: 200,
                  fallbackHeight: 200,
                )
            ],
          ),
        ),
      ],
    );
  }
}

這會產生以下結果：

或者您可以使用SliverFillRemaining填充CustomScrollView的剩余空間，如下所示：

class MenuView extends StatelessWidget {

  double _kMaxCrossAxisExtent = 100;
  double _kMainAxisSpacing=10;
  double _kChildAspectRatio = 1;
  double _kCrossAxisSpacing = 10;
  final double _kSliverPadding = 8;
  double _kExpandedHeight = 250;
  double _kCollapsedHeight =250;


  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: BouncingScrollPhysics(), //The bouncing could be removed
      slivers: [
        SliverAppBar(
          expandedHeight: _kExpandedHeight,
          collapsedHeight: _kCollapsedHeight,
          flexibleSpace: Placeholder(
            fallbackHeight: 800,
          ),
          elevation: 10,
          actions: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: null,
            )
          ],
        ),
        SliverFillRemaining(
          child:Center(child:Padding(
            padding: const EdgeInsets.symmetric(vertical: 80),
            child: Text('This is a centered Text'),
          ))
        ),

      ],
    );
  }
}

結果是（可以刪除一些很棒的彈跳）：

Answer 2

您可以在 CustomScrollView 中使用 SliverFillRemaining 小部件並將其屬性 hasScrollBody 設置為 false 值。

SliverFillRemaining(
  hasScrollBody: false,
  child: Center(
    child: Text(
    "Some Dummy Text",
    ),
  ),
)