Flattern - Layout ein Raster

Question

Ich versuche, ein 4x4 Raster von Fliesen im Flattern zu legen. Ich schaffte es mit Spalten und Zeilen. Aber jetzt habe ich die GridView-Komponente gefunden. Könnte jemand ein Beispiel geben, wie man es benutzt?

Ich kann nicht wirklich meinen Kopf um die Dokumente wickeln. Ich bekomme anscheinend nicht die gewünschten Ergebnisse.

Danke :)

Answer 1

Ein einfaches Beispiel Bilder in die Fliesen geladen werden.

import 'package:flutter/material.dart'; 

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

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

     color: Colors.white30, 
     child: new 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 new GridTile(
       child: new Image.network(url, fit: BoxFit.cover)); 
      }).toList()), 
    ); 
    } 
} 

Die Flutter Galerie-App enthält ein Beispiel aus der Praxis, die here gefunden werden kann.

Answer 2

GridView wird verwendet für grid lists Material umzusetzen. Wenn Sie wissen, dass Sie eine feste Anzahl von Elementen haben und es nicht sehr viele sind (16 ist in Ordnung), können Sie GridView.count verwenden. Sie sollten jedoch beachten, dass eine GridView scrollbar ist, und wenn dies nicht das ist, was Sie wollen, sind Sie vielleicht besser mit nur Zeilen und Spalten.

import 'dart:collection'; 
import 'package:flutter/scheduler.dart'; 
import 'package:flutter/material.dart'; 
import 'dart:convert'; 

import 'package:flutter/material.dart'; 
import 'package:flutter/services.dart'; 
import 'package:flutter/foundation.dart'; 

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

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     title: 'Flutter Demo', 
     theme: new ThemeData(
     primarySwatch: Colors.orange, 
    ), 
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatelessWidget{ 
    @override 
    Widget build(BuildContext context){ 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text('Grid Demo'), 
    ), 
     body: new GridView.count(
     crossAxisCount: 4, 
     children: new List<Widget>.generate(16, (index) { 
      return new GridTile(
      child: new Card(
       color: Colors.blue.shade200, 
       child: new Center(
       child: new Text('tile $index'), 
      ) 
      ), 
     ); 
     }), 
    ), 
    ); 
    } 
}