ListView

ListView屬性代碼塞栅，與Android中ListView功能一樣的列表控件。

ListView({
    Key key,
    Axis scrollDirection: Axis.vertical,//滾動方向
    bool reverse: false,//十分反向顯示數(shù)據(jù)
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,//物理滾動
    bool shrinkWrap: false,
    EdgeInsetsGeometry padding,
    this.itemExtent,//item有效范圍
    bool addAutomaticKeepAlives: true,//自動保存視圖緩存
    bool addRepaintBoundaries: true,//添加重繪邊界
    List<Widget> children: const <Widget>[],
  })

示例中腔丧，在ListView的children數(shù)組子組件中放椰，添加了多個ListTile，代碼如下：

class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new ListView(
      children: <Widget>[
        new ListTile(
          leading: new Icon(Icons.access_alarm_rounded),
          title: Text("鬧鐘"),
        ),
        new ListTile(
          leading: new Icon(Icons.account_balance_rounded),
          title: Text("主頁"),
        ),
        new ListTile(
          leading: new Icon(Icons.add_a_photo_outlined),
          title: Text("相機"),
        ),
        new ListTile(
          leading: new Icon(Icons.airplanemode_on_rounded),
          title: Text("飛機"),
        ),
        new ListTile(
          leading: new Icon(Icons.account_circle),
          title: Text("頭像"),
        )
      ],
    );
  }
}

效果：

上面ListView是靜態(tài)添加的少量數(shù)據(jù)愉粤，所以不能滑動砾医，在實際情況數(shù)據(jù)多，需要滑動頁面的多數(shù)據(jù)ListView衣厘，那么久需要使用ListView.builder如蚜。
相比于new ListView()只不過多出了兩個參數(shù)而已，一個是itemCount指定item的數(shù)量头滔，一個是itemBuilder怖亭，用來構(gòu)建Item。

class HomeContent extends StatelessWidget {
  List<String> list = new List();

  HomeContent() {
    for(var i=0;i<20;i++) {
      list.add("第$i條數(shù)據(jù)");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(list[index]),
        );
      },
    );
  }

}

效果：

• GridView

GirView的用法和ListView類似坤检，只不過由于GridView可以在一列或者一行顯示多個Item兴猩，這個做Android的都知道。

新增屬性：
SliverGridDelegateWithFixedCrossAxisCount：用于固定列數(shù)的場景早歇；
SliverGridDelegateWithMaxCrossAxisExtent：用于子元素有最大寬度限制的場景倾芝；
子屬性：
crossAxisCount :橫軸元素個數(shù)
crossAxisSpacing:橫軸間距
mainAxisSpacing:縱軸間距
childAspectRatio:子組件寬高比例

代碼：

class HomeContent extends StatelessWidget {
  List<ListItem> list = new List();

  HomeContent() {
    for (int i = 0; i < 20; i++) {
      list.add(new ListItem(
          "content",
          Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602884612610&di=99e5e92e7d3fd95d9c922f29c35f4b61&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F57a2a20321de9.jpg",
              alignment: Alignment.topCenter)));
    }
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 0,
            childAspectRatio: 2),
        itemCount: list.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: list[index].image,
            title: Text(list[index].title),
          );
        });
  }
}

class ListItem {
  final String title;
  final Image image;

  ListItem(this.title, this.image);
}

效果：

ListView的item點擊事件

在item的Widget的外層包裝個GestureDetector，在onTap方法中獲取點擊事件箭跳。

ListView.builder(
            itemCount: list.length,
            itemBuilder: (context, index) {
             return GestureDetector(
                onTap: () {
                 
                },
           )
    }
)

ListView中添加分割線

在item的Container中設(shè)置BoxDecoration晨另，添加底邊線。

ListView.builder(
        itemCount: 3,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Text('content'),
            // 下邊框谱姓，及item分割線
            decoration: BoxDecoration(
              border: Border(bottom: BorderSide(width: 0.5, color: Colors.black12))
            ),
          );
        });