如何在 StaggeredGridView 中居中平铺

如何解决如何在 StaggeredGridView 中居中平铺

我正在 Flutter 中使用 StaggeredGridView，如果某个图块将成为该“行”中唯一的图块，我似乎看不到将图块居中的方法。

例如，如果我将 StaggeredGridView 的 crossAxisCount 设置为 6；然后将磁贴的 crossAxisCellCount 发送到 4，磁贴从左侧开始占据 4 个“单元格”，如果没有可以占据 2 个单元格的磁贴，则在右侧留下 2 个“单元格”的空白空间。

是否可以强制平铺居中？本质上，让它占据单元格 2 - 5，在左边留下 1 个空单元格，在右边留下 1 个空单元格？

我尝试将 StaggeredGridView 包装在一个 Center 小部件中，但这似乎没有什么区别。

目前我有一个有状态的小部件，它具有以下构建方法。

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ProfileEditScreenviewmodel>(
      create: (context) => model,child: Consumer<ProfileEditScreenviewmodel>(
        builder: (context,model,child) => Scaffold(
          appBar: AppBar(
            centerTitle: true,title: Text(model.screenTitle),),body: Center(
            child: StaggeredGridView.count(
              crossAxisCount: 6,shrinkWrap: true,mainAxisspacing: 10.0,crossAxisspacing: 10.0,staggeredTiles: model.displayCardTiles,children: model.displayCards,);
  }

在该小部件的视图模型中，StaggeredGridView 使用了两个相关函数：创建 StaggeredTiles 的 displayCardTiles 函数，以及创建进入图块的小部件的 displayCards 函数。这两个函数如下：

List<StaggeredTile> _builddisplayCardTiles(){
    List<StaggeredTile> myList = [];

    for(var bioCategory in userProfile.bioCategories!){
      myList.add(StaggeredTile.fit(bioCategory.crossAxisCellCount));
    }

    return myList;
  }

List<Widget> _builddisplayCards(){
    List<Widget> myList = [];

    for(var bioCategory in userProfile.bioCategories!){
      myList.add(ProfileItemCard(bioCategory: bioCategory));
    }

    return myList;
  }

“ProfileItemCard”只是一个显示各种文本小部件和复选框的卡片小部件，但它的内容不会影响卡片在 StaggeredGridView 中的位置。

我还尝试将 ProfileItemCard 包装在 Center 小部件中，但它对卡片的显示方式没有任何影响。

解决方法

尝试在中心包裹，然后是具有对齐属性的容器

@override
      Widget build(BuildContext context) {
        return ChangeNotifierProvider<ProfileEditScreenViewModel>(
          create: (context) => model,child: Consumer<ProfileEditScreenViewModel>(
            builder: (context,model,child) => Scaffold(
              appBar: AppBar(
                centerTitle: true,title: Text(model.screenTitle),),body: Center(
                child: Container(
                     margin: EdgeInsets.all(50),height: double.infinity,alignment: Alignment.center,child: StaggeredGridView.count(
                    crossAxisCount: 6,shrinkWrap: true,mainAxisSpacing: 10.0,crossAxisSpacing: 10.0,staggeredTiles: model.displayCardTiles,children: model.displayCards,);
      }