Flutter——ListView组件（平铺列表组件）

ListView的常见参数:

名称	类型	说明
scrollDirection	Axis	Axis.horizontal 水平列表 Axis.vertical 垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List<Widget>	列表元素

 

• 垂直列表

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "ListWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.directions_car),
              title: Text("标题"),
              subtitle: Text("内容"),
              trailing: Icon(Icons.airplanemode_active),
            ),
            ListTile(
              leading: Icon(Icons.directions_car),
              title: Text("标题"),
              subtitle: Text("内容"),
              trailing: Icon(Icons.airplanemode_active),
            ),
            ListTile(
              leading: Icon(Icons.directions_car),
              title: Text("标题"),
              subtitle: Text("内容"),
              trailing: Icon(Icons.airplanemode_active),
            ),
          ],
        ),
    );
  }
}

 

• 水平列表

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "ListWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              color: Colors.pink,
              width: 100.0,
              height: 100.0,
            ),
            Container(
              color: Colors.yellow,
              width: 100.0,
              height: 100.0,
            ),
            Container(
              color: Colors.blue,
              width: 100.0,
              height: 100.0,
            ),
            Container(
              color: Colors.green,
              width: 100.0,
              height: 100.0,
            ),
            Container(
              color: Colors.orange,
              width: 100.0,
              height: 100.0,
            ),
          ],
        ),
    );
  }
}

注意：如果是垂直列表，LIstView里面的widget设置的width属性失效。

　　　如果是水平列表，ListView里面的widget设置的height属性失效。

 

• 动态列表

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "ListWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  List list = new List();
  MyApp() {
    for(var i = 0; i < 15; i++) {
      this.list.add("我是第$i条数据");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
          itemCount: this.list.length,
          itemBuilder: (context,index) {
            return ListTile(
              leading: Icon(Icons.palette),
              title: Text("${this.list[index]}"),
            );
          }
        ),
    );
  }
}