Flutter - 布局网格 [英] Flutter - Layout a Grid

问题描述

我正在尝试在颤动中布置一个 4x4 的瓷砖网格.我设法用列和行来做到这一点.但是现在我找到了 GridView 组件.谁能提供一个如何使用它的例子?

我真的无法把头放在文档上.我似乎没有得到我想要的结果.

解决方案

一个将图像加载到图块中的简单示例.

import 'package:flutter/material.dart';无效主(){运行应用程序(我的应用程序())；}class MyApp 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回容器(颜色:Colors.white30，孩子:GridView.count(crossAxisCount: 4,childAspectRatio: 1.0,填充:const EdgeInsets.all(4.0),主轴间距:4.0，crossAxisSpacing: 4.0,孩子们:<字符串>['http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png','http://www.for-example.org/img/main/forexamplelogo.png',].map((字符串网址){返回 GridTile(孩子:Image.network(网址，适合:BoxFit.cover))；}).toList()),);}}

Flutter Gallery 应用包含一个真实示例，可在

I am trying to layout a 4x4 grid of tiles in flutter. I managed to do it with columns and rows. But now I found the GridView component. Could anyone provide an example on how to do it using it?

I can't really wrap my head around the docs. I don't seem to get the results I want.

解决方案

A simple example loading images into the tiles.

import 'package:flutter/material.dart';

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(

      color: Colors.white30,
      child: GridView.count(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: <String>[
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
          ].map((String url) {
            return GridTile(
                child: Image.network(url, fit: BoxFit.cover));
          }).toList()),
    );
  }
}

The Flutter Gallery app contains a real world example, which can be found here.

这篇关于Flutter - 布局网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！