时间戳

首页 > 解决方案 > 如何在 StaggeredGridView 中将磁贴居中

flutter - 如何在 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,
            ),
          ),
        ),
      ),
    );
  }

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

标签： flutterstaggered-gridview

解决方案

简介：我自己也遇到了这个问题，所以我要感谢你提出这个问题。

基线：计算模型计数的剩余部分和交叉轴计数（userProfile.bioCategories在6原始问题中），然后将“剩余”图块排成一行（均匀分布），并将该行跨越整个网格宽度。

演示

问题解决方案

复制：Github。

代码（单文件解决方案，唯一的前提是flutter_staggered_grid_view: 0.4.0）：

import 'package:flutter/material.dart';
import 'dart:math';

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(const TabBarDemo());
}

generateRandomColor() => Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);

class Model {
  final num;

  Model({this.num});
}

class ModelWidget extends StatelessWidget {
  final Model model;

  ModelWidget(this.model) : super();

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1,
      child: Container(
          color: generateRandomColor(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                model.num.toString(),
                textAlign: TextAlign.center,
              ),
            ],
          )),
    );
  }
}

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // ------------------------------- given ----------------------------------
    const CROSS_AXIS_COUNT = 6;
    const CROSS_AXIS_SPACING = 10.0;
    const MAIN_AXIS_SPACING = 10.0;
    final models = List.generate(20, (_) => Model(num: Random().nextInt(100)));
    // ------------------------------------------------------------------------
    // ------------------------------ solution --------------------------------
    final modelCount = models.length;
    final int fittingCount = modelCount - modelCount % CROSS_AXIS_COUNT;
    // ------------------------------------------------------------------------

    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(
                  child: Text("problem"),
                ),
                Tab(
                  child: Text("solution (static)"),
                ),
                Tab(icon: Text("solution (builder)")),
              ],
            ),
            title: const Text('staggered_grid - centering tiles'),
          ),
          body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: TabBarView(
              children: [
                // ------------------------------ problem ---------------------------------
                Scaffold(
                  body: StaggeredGridView.count(
                    crossAxisCount: CROSS_AXIS_COUNT,
                    shrinkWrap: true,
                    mainAxisSpacing: MAIN_AXIS_SPACING,
                    crossAxisSpacing: CROSS_AXIS_SPACING,
                    staggeredTiles: models.map((m) => StaggeredTile.fit(1)).toList(),
                    children: models.map((m) => ModelWidget(m)).toList(),
                  ),
                ),
                // ------------------------------------------------------------------------
                // ------------------------- solution (static) ----------------------------
                Scaffold(
                  body: LayoutBuilder(builder: (context, constraints) {
                    return StaggeredGridView.count(
                      crossAxisCount: CROSS_AXIS_COUNT,
                      shrinkWrap: true,
                      mainAxisSpacing: MAIN_AXIS_SPACING,
                      crossAxisSpacing: CROSS_AXIS_SPACING,
                      staggeredTiles: [
                        ...models.sublist(0, fittingCount).map((m) => StaggeredTile.fit(1)).toList(),
                        if (modelCount != fittingCount) StaggeredTile.fit(CROSS_AXIS_COUNT)
                      ],
                      children: [
                        ...models.sublist(0, fittingCount).map((m) => ModelWidget(m)).toList(),
                        if (modelCount != fittingCount)
                          Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: models.sublist(fittingCount, modelCount).map((m) {
                                return Container(
                                    width: constraints.maxWidth / CROSS_AXIS_COUNT - CROSS_AXIS_SPACING,
                                    child: ModelWidget(m));
                              }).toList())
                      ],
                    );
                  }),
                ),
                // ------------------------------------------------------------------------
                // ------------------------- solution (builder) ---------------------------
                Scaffold(
                  body: LayoutBuilder(builder: (context, constraints) {
                    return StaggeredGridView.countBuilder(
                        crossAxisCount: CROSS_AXIS_COUNT,
                        shrinkWrap: true,
                        mainAxisSpacing: MAIN_AXIS_SPACING,
                        crossAxisSpacing: CROSS_AXIS_SPACING,
                        itemCount: modelCount == fittingCount ? fittingCount : fittingCount + 1,
                        itemBuilder: (context, index) {
                          if (index < fittingCount) {
                            return ModelWidget(models.elementAt(index));
                          } else {
                            return Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                children: models.sublist(fittingCount, modelCount).map((m) {
                                  return Container(
                                      width: constraints.maxWidth / CROSS_AXIS_COUNT - CROSS_AXIS_SPACING,
                                      child: ModelWidget(m));
                                }).toList());
                          }
                        },
                        staggeredTileBuilder: (int index) {
                          if (index < fittingCount) {
                            return StaggeredTile.count(1, 1);
                          } else {
                            return StaggeredTile.count(CROSS_AXIS_COUNT, 1);
                          }
                        });
                  }),
                ),
                // ------------------------------------------------------------------------
              ],
            ),
          ),
        ),
      ),
    );
  }
}

推荐阅读