flutter ListView列表组件

纵向列表

• main.dart文件：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Link World!',
        home: Scaffold(
            appBar: new AppBar(title: new Text('ListView '),),
            body: new ListView(
              children: <Widget>[
                new ListTile(
                  leading: new Icon(Icons.add_a_photo),
                  title: new Text('add_a_photo'),
                ),
                new ListTile(
                  leading: new Icon(Icons.ac_unit),
                  title: new Text('ac_unit'),
                ),
                new ListTile(
                  leading: new Icon(Icons.control_point),
                  title: new Text('control_point'),
                ),
                new ListTile(
                  leading: new Icon(Icons.add_location),
                  title: new Text('add_location'),
                ),
                new Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1589509360&di=82ac704d2e918274aa7a55ee80659fe6&src=http://a0.att.hudong.com/27/10/01300000324235124757108108752.jpg'),
                new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589519447615&di=cdb299e6d25934e884255713163ed277&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0617%2Fbe2f5973a60156df0c6aeb2aace791c6.jpg')
              ],
            )
        )
    );
  }
}

纵向列表效果展示：

纵向列表

横向列表

• main.dart文件：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Link World!',
        home: Scaffold(
            appBar: new AppBar(title: new Text('ListView '),),
            body: Container(
                alignment: Alignment.topCenter,  // 子元素位置：左上方、上方居中、右上方等等
                margin: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
                child: Container(
                    height: 200.0,
                    child: new ListView(
                        scrollDirection: Axis.horizontal,
                        children: <Widget>[
                            new Container(
                              width: 180.0,
                              color: Colors.lightBlue,
                            ),
                            new Container(
                              width: 180.0,
                              color: Colors.amber,
                            ),
                            new Container(
                              width: 180.0,
                              color: Colors.deepOrange,
                            ),
                            new Container(
                              width: 180.0,
                              color: Colors.purpleAccent,
                            ),new Container(
                              width: 180.0,
                              color: Colors.pinkAccent,
                            ),
                        ],
                    ),
                )
            )
        )
    );
  }
}

【横向列表】效果展示（色块可以左右拖动）：

横向列表

横向列表拆分 ListView 组件（即：MyList）

• main.dart 代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Link World!',
        home: Scaffold(
            appBar: new AppBar(title: new Text('ListView'),),
            body: Container(
                alignment: Alignment.topCenter,
                margin: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
                child: Container(
                    height: 200.0,
                    child: MyList()
                )
            )
        )
    );
  }
}

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return ListView (
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          new Container(
          width: 180.0,
            color: Colors.lightBlue,
          ),
          new Container(
          width: 180.0,
          color: Colors.amber,
          ),
          new Container(
          width: 180.0,
          color: Colors.deepOrange,
          ),
          new Container(
          width: 180.0,
          color: Colors.purpleAccent,
          ),new Container(
          width: 180.0,
          color: Colors.pinkAccent,
          ),
        ],
    );
  }
}