Flutter学习第2章 ListView Widget 列表组件的使用（2）

1、基本结构

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
    Widget build(BuildContext context){
      return MaterialApp(
        title: '组件学习',
        home: Scaffold(
          appBar: new AppBar(
            title: new Text(
              '组件学习'
            ),
          ),
          body:new Center(
            child: Container(
              height: 200.0,
              //引用list组件
              child: MyList()
            ),
          )
        ),
      );
    }
}

//把list组件抽出来
class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return ListView(
       scrollDirection: Axis.horizontal,//横向
                children: <Widget>[
                  new Container(
                    width: 180.0,
                    color: Colors.lightGreen,
                  ),
                  new Container(
                    width: 180.0,
                    color: Colors.orange,
                  ),
                  new Container(
                    width: 180.0,
                    color: Colors.purple,
                  ),
                  new Container(
                    width: 180.0,
                    color: Colors.deepOrangeAccent,
                  )
                ],
    );
  }
}

2、属性解释

• Axis.horizontal:横向滚动或者叫水平方向滚动。

• Axis.vertical:纵向滚动或者叫垂直方向滚动。

3、效果展示