Flutter学习三 List和GridList

list：

滑动布局：

/ / /参见:

///* [ListView]，这是一个常用的[ScrollView]，显示滚动子窗口小部件的线性列表。

/// * [PageView]，这是一个滚动的子窗口小部件列表视口大小。

/// * [GridView]，它是一个[ScrollView]，显示一个滚动的2D数组子窗口小部件。

/// * [CustomScrollView]，它是一个[ScrollView]，创建自定义滚动使用条子效果。

/// * [ScrollNotification]和[NotificationListener]可以用来观察不使用[ScrollController]的滚动位置。

ListView 和 GridView 都继承自BoxScollView 

listView两种使用：

1.new ListView(填入child widget[],ListView属性如：滑动方向); 这种形式flutter会一次性把所有widget绘制出来，如果数据过大会容易造成卡顿。资源消耗过多。所以建议，如果小量数据可以使用这个方法，而且语句相比第二种更方便，比如创建个横向的item。

2.new ListViwe.builder();  适用于大量数据。builder中的属性就是针对这个ListView的布局设置，属性ItemCount：是指item的个数，itemBuilder就是子条目和android中的adapter一样，针对item，里面可设置item布局属性。

GridView使用：

GridView创建有多种方式：GridView（）、GridView.custom()、GridView.count()、GridView.builder()、GridView.extent()。

，例子：通过GridView.count（） 创建固定个数布局，可指定行列，指定滑动方向（横竖），设置布局参数

自定义滑动布局CustomScrollView实现GridView效果：

 

全部学习代码：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'list',
      theme: new ThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.yellow,
      ),
      home: new HomePage(),
//      home: new Scaffold(
//        body: new GridView.count(
//          // Create a grid with 2 columns. If you change the scrollDirection to
//          // horizontal, this would produce 2 rows.
//          crossAxisCount: 2,
//          // Generate 100 Widgets that display their index in the List
//          children: new List.generate(100, (index) {
//            return new Center(
//              child: new Text(
//                'Item $index',
//                style: Theme.of(context).textTheme.headline,
//              ),
//            );
//          }),
//        ),
//      ),
    );
  }
}

class HomePage extends StatefulWidget {
//  @override
//  HomeState createState() => new HomeState();

//  @override
//  HomeListLongState createState() => new HomeListLongState(new List<String>.generate(1000,(i) => "item ${i}"));
//  @override
//  HomeListTypeState createState() =>
//      new HomeListTypeState(
//          new List<ListItem>.generate(10000, (i) =>
//          i % 6 == 0 ? new ListItemTypeOne("typeOne -> ${i}")
//              : new ListItemTypeTwo("typeTwo -> ${i}",
//              "https://img-blog.youkuaiyun.com/20160418120631895")));

  @override
  GridViewState createState() => new GridViewState();

}

class HomeState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(
          'list', style: new TextStyle(color: Colors.green),),
      ),
      body: new ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          new Container(width: 300,
            color: Colors.green,

          ),
          new Container(width: 300,
            color: Colors.grey,
          ),
          new Container(width: 300,
            color: Colors.yellow,
          ),
        ],),
    );
  }
}

//长list要用ListView.builder。 ListView是一次加载所有，builder只加载显示的
class HomeListLongState extends State<HomePage> {
  HomeListLongState(this._list);

  final List<String> _list;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(
          'list', style: new TextStyle(color: Colors.green),),
      ),
      body: new ListView.builder(
          itemCount: _list.length, itemBuilder: (context, index) {
        return new ListTile(title: new Text("${_list[index]}"),);
      }),
    );
  }
}

//不同数据类型
class HomeListTypeState extends State<HomePage> {
  HomeListTypeState(this._list);

  final List<ListItem> _list;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(
          'list', style: new TextStyle(color: Colors.yellow),),
      ),
      body: new ListView.builder(
          padding: EdgeInsets.all(20),
          itemCount: _list.length,
          itemBuilder: (context, index) {
            ListItem item = _list[index];
            if (item is ListItemTypeOne) {
              return new ListTile(
                title: new Text((item as ListItemTypeOne).title),);
            } else {
              return
                new Container(
                    height: 200,
                    child: new Column(
                      children: <Widget>[
                        new Row(
                          children: <Widget>[
                            new Text((item as ListItemTypeTwo).title,),
                            new Container(
                              child: new Image.network(
                                  (item as ListItemTypeTwo).imageUrl),
                              width: 200,
                              height: 150,
                              padding: EdgeInsets.fromLTRB(80, 20, 20, 20),
                            ),

                          ],
                        ),
                        new Divider(height: 30.0, color: Colors.yellow,)
                      ],
                    )
                );
            }
          }),
    );
  }
}


abstract class ListItem {}

class ListItemTypeOne implements ListItem {
  String title;

  ListItemTypeOne(this.title);
}

class ListItemTypeTwo implements ListItem {
  String title;

  String imageUrl;

  ListItemTypeTwo(this.title, this.imageUrl);
}


class GridViewState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new GridView.count(
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this would produce 2 rows.
          crossAxisCount: 2,
          // Generate 100 Widgets that display their index in the List
          children: new List.generate(100, (index) {
            return new Center(
              child: new Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline,
              ),
            );
          }),
        ),
      );
  }

}