CustomScrollView 中的 Flutter Center Widget

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 属性的 Center 和 Column 进行换行，但文本 No Date 尚未位于屏幕的中心（剩余空间可用）

Answer 1

您可以在 CustomScrollView 中使用 SliverFillRemaining 小部件并将其属性 hasScrollBody 设置为 false 值。

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

Answer 2

您可以使用 来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'),
          ))
        ),

      ],
    );
  }
}

结果是（有一点很棒的弹跳，可以删除）：