Question

我正在 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 小部件中，但它对卡片的显示方式没有任何影响。

Answer 1

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

@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,
                    ),
                ),
              ),
            ),
          ),
        );
      }

如何在 StaggeredGridView 中居中平铺

1 个答案: