第四节：Flutter ListView 列表组件简介

image.png

一个简单的listview 列表这个是APP开发中常用的功能

直接贴代码,没什么技术含量的,就是先测试控件

import 'package:flutter/material.dart';



class CategoryPage extends StatelessWidget {
  const CategoryPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'ListView',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView'),
        ),
        body: new ListView(
          children: <Widget>[
            new ListTile(
              leading: new Icon(
                Icons.access_alarm
              ),
              title: new Text('access_alarm'),
            ),
            new ListTile(
              leading: new Icon(
                Icons.access_time
              ),
              title: new Text('access_time'),
            ),
            new ListTile(
              leading: new Icon(
                Icons.account_box
              ),
              title: new Text('account_box'),
            ),
            new ListTile(
              leading: new Icon(
                Icons.account_box
              ),
              title: new Text('account_box'),
            ),
            new ListTile(
              leading: new Icon(
                Icons.account_box
              ),
              title: new Text('account_box'),
            ),
            new ListTile(
              leading: new Icon(
                Icons.account_box
              ),
              title: new Text('account_box'),
            )
          ],
        ),
      ),
    );
  }
}

横向listview

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.deepPurpleAccent,
                  ),
                ],
              ),