flutter gridView

flutter 使用gridView布局详细教程

来个最简单的demo

class _MyBookState extends State<MyBook> {
    List<Widget> bookList = [];
    @override
    void initState() {
        super.initState();
        setState(() {
            bookList = List.generate(50, (index) {
                return Container(
                    color: Colors.red,
                    child: Center(child: Text(
                        '初九网络工作室book $index',
                    )),
                );
            });
        });
    }
    @override
    Widget build(BuildContext context) {
        return Container(
            child: GridView.count(
                crossAxisCount: 3,
                children: bookList,
            ),
        );
    }
}

重点看下面代码

     Container(
            child: GridView.count(
                crossAxisCount: 3,
                children: bookList,
            ),
        );

效果图

padding: const EdgeInsets.all(20)

          padding: const EdgeInsets.all(20),
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                crossAxisCount: 3,

文字修改成图片

listData.map((item){
                return Container(
                    child: Center(
                        child: Image.network(item, fit: BoxFit.cover)
                    ),
                );
            }).toList();

OverflowBox可以控制图片在一定的范围内，但是呢，如果直接使用，发现图片并不会变大

还是一样。

比如代码是这样

这时候通过maxWidth: double.infinity可以获取到灵感，原来可以double.infinity,那么直接设置image呢。

设置后看看效果

我靠，惨不忍睹，还是不设置了，这个要根据实际情况设置，比如上传固定比例。

思考，为啥被截取了？

修改后效果如下

| |

因为默认GridView比例是1:1，这里我们适当调整下比例就可以。 childAspectRatio: 1 / 1.3

这时候我们想要封面下面放文字，代码稍微改下

run一下

满屏报错

听说外面加一个Expend 就可以，我试了下 UI稍微有点改变，但是也差不了多少

github.com/flutter/flu…

我看issue也是这样说的

但是也一样

--- 20 分钟过去了 ---

发挥科学家的归纳法，我发现 Expanded 是加在children里面的image上。

效果图

完整代码：

import 'package:flutter/material.dart';

class MyBook extends StatefulWidget {
    MyBook({Key key}) : super(key: key);
    _MyBookState createState() => _MyBookState();
}

class _MyBookState extends State<MyBook> {
    List<Widget> bookList = [];
    @override
    void initState() {
        super.initState();
        setState(() {
            List<String> listData = [
                'http://bookcover.yuewen.com/qdbimg/349573/1016313375/90',
                'http://bookcover.yuewen.com/qdbimg/349573/1016228252/90',
                'http://bookcover.yuewen.com/qdbimg/349573/1016186855/90',
                'http://bookcover.yuewen.com/qdbimg/349573/1016339907/90',
                'http://bookcover.yuewen.com/qdbimg/349573/1016259150/90',
                'http://bookcover.yuewen.com/qdbimg/349573/1016267074/90',
                'https://bookcover.yuewen.com/qdbimg/349573/1005399587/90',
                'https://bookcover.yuewen.com/qdbimg/349573/1013488561/90',
                'https://bookcover.yuewen.com/qdbimg/349573/1012352630/90',
                'https://bookcover.yuewen.com/qdbimg/349573/1010707468/90'
            ];
            bookList = listData.map((item){
                return InkWell(
                    onTap: pickItem(item),
                    child: Flex(
                        direction: Axis.vertical,
                        children: <Widget>[
                            Expanded(
                                child: Image.network(item, 
                                    width: double.infinity,
                                    height: double.infinity,
                                    fit: BoxFit.cover
                                ),
                            ),
                            Text('book name')
                        ]
                    )
                );
            }).toList();
        });
    }
    pickItem(item){
        print(item);
    }
    @override
    Widget build(BuildContext context) {
        return Container(
            child: GridView.count(
                padding: const EdgeInsets.all(20),
                crossAxisSpacing: 15,
                mainAxisSpacing: 15,
                crossAxisCount: 4,
                childAspectRatio: 1 / 1.8,
                children: bookList,
            ),
        );
    }
}

--完成--