GridView

GridView 网格布局组件

import 'package:flutter/material.dart';
import 'data/newList.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Welcome to Flutter'),
                ),
                body: HomeContent(),
            ),
            theme: ThemeData(
                primaryColor: Colors.pink,
            ),
        );
    }
}
class HomeContent extends StatelessWidget {
    List _getData() {
        var tempList = listData.map((e) {
            return Container(
                child: Column(
                    children: [
                        Image.network(
                            e['imageUrl'],
                            width: 300,
                            height: 100,
                            fit: BoxFit.cover,
                        ),
                        Row(
                            children: [
                                Column(
                                    children: [
                                        Text(e['title']),
                                        Text(e['author'])
                                    ],
                                ),
                                Text(
                                    '￥400',
                                    textAlign: TextAlign.center,
                                ),
                            ],
                        ),
                    ],
                ),
            );
        });
        return tempList.toList();
    }
    @override
    Widget build(BuildContext context) {
        return GridView.count(
            padding: EdgeInsets.all(10),
            crossAxisCount: 2,
            // childAspectRatio: 0.5,
            // mainAxisSpacing: 10,
            crossAxisSpacing: 20,
            children: this._getData(),
        );
    }
}

子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的，注意，这里的子元素指的是子组件的最大显示空间，注意确保子组件的实际大小不要超出子元素的空间。

利用 GridView.builder 实现布局：

import 'package:flutter/material.dart';
import 'data/newList.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Welcome to Flutter'),
                ),
                body: HomeContent(),
            ),
            theme: ThemeData(
                primaryColor: Colors.pink,
            ),
        );
    }
}
class HomeContent extends StatelessWidget {
    Widget _getData(context, index) {
        return Container(
            child: Column(
                children: [
                    Image.network(
                        listData[index]['imageUrl'],
                        width: 300,
                        height: 100,
                        fit: BoxFit.cover,
                    ),
                    Row(
                        children: [
                            Column(
                                children: [
                                    Text(listData[index]['title']),
                                    Text(listData[index]['author'])
                                ],
                            ),
                            Text(
                                '￥400',
                                textAlign: TextAlign.center,
                            ),
                        ],
                    ),
                ],
            ),
        );
    }
    @override
    Widget build(BuildContext context) {
        return GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
            ), 
            itemCount: listData.length,
            itemBuilder: this._getData,
        );
    }
}