如何在 Flutter 中将 gridView 项目居中？

Posted 2023-02-23

【中文标题】如何在 Flutter 中将 gridView 项目居中？

【英文标题】：How to center gridView items in Flutter?

【发布时间】：2020-01-17 04:26:08

【问题描述】：

我有一个 4*4 的网格视图，但有时可能只有 15 个项目而不是 16 个项目，最后一行看起来不太好...

我想知道有没有办法让 gridView 行中的项目居中？ 或者可能有其他解决方案可以解决我的任务？

【问题讨论】：

可以分享截图吗

【参考方案1】：

作为一个选项，您可以使用 Wrap 小部件而不是 Grid 这是一个例子

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Title')),
        body: AlignedGrid(),
      ),
    );
  


class AlignedGrid extends StatelessWidget 
  final double runSpacing = 4;
  final double spacing = 4;
  final int listSize = 15;
  final columns = 4;

  @override
  Widget build(BuildContext context) 
    final w = (MediaQuery.of(context).size.width - runSpacing * (columns - 1)) / columns;
    return SingleChildScrollView(
      child: Wrap(
        runSpacing: runSpacing,
        spacing: spacing,
        alignment: WrapAlignment.center,
        children: List.generate(listSize, (index) 
          return Container(
            width: w,
            height: w,
            color: Colors.green[200],
          );
        ),
      ),
    );
  

根据需要更改 alignment 属性 例如WrapAlignment.spaceEvenly