flutter-ListView(列表组件)

1.纵向列表

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:"listView",
      home:Scaffold(
        appBar: new AppBar(
          title:Text("listView Widget")
        ),
        body: ListView(
          children: <Widget>[
            new ListTile(
              leading:new Icon(Icons.access_time),
              title: Text("access_time"),
            ),
            new ListTile(
              leading:Icon(Icons.accessible_forward),
              title:Text("forward")
            ),
            Image.asset('images/2222.png',
              alignment: Alignment.topLeft,
            ),
            new ListTile(
              leading: new CircleAvatar(
                child: new Text("牛"),
                backgroundColor: Colors.blue[400],
              ),
              title: new Text("牛牛牛"),
              subtitle: new Text("牛是真的牛"),
            ),
            new ListTile(
              leading: new CircleAvatar(
                child: new Text("牛"),
                backgroundColor: Colors.blue[400],
              ),
              title: new Text("牛牛牛"),
              subtitle: new Text("牛是真的牛"),
            ),
            new Container(
              width:100.0,
              height:100.0,
              child: Text("data"),
              color:Colors.greenAccent
            )
          ],
        )
      )
    );
  }
}

 

2.横向列表+组件化写法

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext content){
    return MaterialApp(
      title:'listView',
      home:Scaffold(
        appBar: AppBar(
          title:Text("listView")
        ),
        body: Container(
          height: 200.0,
          child: MyList()
        ),
      )
    );
  }
}


class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return ListView(
      scrollDirection:Axis.horizontal,
      children: <Widget>[
        Container(
          width:180.0,
          color:Colors.indigo[200],
          child: Image(
            image: AssetImage('images/2222.png'),
            fit: BoxFit.cover,
          ),
        ),
        Container(
          width:180.0,
          color:Colors.yellowAccent[100],
          child: Image(
            image: AssetImage('images/2222.png'),
            fit: BoxFit.cover,
          ),
        ),
        Container(
          width:180.0,
          color:Colors.deepOrange[100],
          child: Image(
            image: AssetImage('images/2222.png'),
            fit: BoxFit.cover,
          ),
        ),
        Container(
          width:180.0,
          color:Colors.blue[100],
          child: Image(
            image: AssetImage('images/2222.png'),
            fit: BoxFit.cover,
          ),
        )
      ],
    );
  }
}

3.动态加载列表

import 'package:flutter/material.dart';

void main()=>runApp(MyApp(
  // generate 生成 生成1000个
  items:new List<String>.generate(1000, (i) => "item $i")
));

class MyApp extends StatelessWidget{

  //接收参数
  final List<String> items;
  //required的意思是必须的
  MyApp({Key key,@required this.items}):super(key:key);

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'listView',
      home:Scaffold(
        appBar: AppBar(
          title:Text("listView")
        ),
        // ListView.builder就是动态生成列表
        body:Container(
          child: new ListView.builder(
          //列表生成的长度
            itemCount: items.length,
            itemBuilder: (context,index){
              return new ListTile(
                title:new Text('${items[index]}'),
              );
            },
          ),
        ) 
      ),
    );
  }
}