顫振 - 佈局網格

Question

我想擺動4x4網格的顫振。我設法用列和行來做到這一點。但是現在我找到了GridView組件。任何人都可以提供一個關於如何使用它的例子嗎？

我不能真正包裹我的頭文件。我似乎沒有得到我想要的結果。

謝謝:)

Answer 1

一個簡單的例子加載圖像到瓦片。

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

飛舞的照片應用程序包含一個現實世界的例子，可以發現here。

Answer 2

GridView用於實現材料grid lists。如果你知道你有一個固定數量的項目，並且它不是很多（16是好的），你可以使用GridView.count。但是，您應該注意GridView是可滾動的，如果這不是您想要的，那麼您最好只使用行和列。

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