Fluutter防淘寶九宮格

第一步引用

dependencies:
  flutter_gridnine:
    git:
      url: https://github.com/mingyouzhu/flutter_gridnine.git

第二步使用

class _MyHomePageState extends State<MyHomePage> {
  List<GNModel> models = new List<GNModel>();

  @override
  Widget build(BuildContext context) {
    for(int i = 0;i < 13;i++){
      models.add(GNModel(
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567702065868&di=3b7a93083a7a10270c187ea395bf353a&imgtype=0&src=http%3A%2F%2Fpic32.nipic.com%2F20130808%2F13243996_132446704147_2.jpg',
          title:'標題1',
          description: '描述信息'
      ));
      models.add(GNModel(
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567708302427&di=96653f7cdcd54169b9f296e6fe43b928&imgtype=0&src=http%3A%2F%2Fwww.suntop168.com%2Fblog%2Fzb_users%2Fupload%2F2014%2F2%2FE034CA83.jpg',
          title:'標題',
          description: '描述信息'
      ));
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:Container(
        child:GridNine(
            collection:models,
            indicatorShow: true,
            indicatorActiveColor: Colors.blue,
            onTap:(GNModel item){
              print(item.title);
            }
        ),
      ),
    );
  }
}

預覽