Flutter List Grid

直接看代码案例快速入手Flutter

本文介绍ListView, GridView

ListView类似与iOS中的UITabelView, GridView类似于iOS中的UICollectionView.

🎉下载GitHub仓库，直接体验

ListView

ListView.builder(
    physics: const BouncingScrollPhysics(),
    itemCount: 50,
    itemBuilder: (BuildContext context, int index) {
    return ListTile(title: Text('Item ${index + 1}'));
    },
),
ListView(
    children: const <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
    ],
),
ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
    Container(width: 200, color: Colors.red),
    Container(width: 200, color: Colors.blue),
    Container(width: 200, color: Colors.green),
    ],
)

GridView

GridView.builder(
    physics: const BouncingScrollPhysics(),
    itemCount: 21,
    gridDelegate:
        const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
    itemBuilder: (BuildContext context, int index) {
        return Stack(
            children: [
            Container(
            color: Colors.primaries[index % Colors.primaries.length]),
            Text('Item ${index + 1}')
            ],
        );
    },
),
GridView(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2),
    children: <Widget>[
        Container(color: Colors.red),
        Container(color: Colors.blue),
        Container(color: Colors.green),
        Container(color: Colors.yellow),
    ],
),