基于Listview实现水平和垂直方式滚动

listview 水平和垂直的关键属性： scrollDirection: Axis.horizontal

（1）如何实现垂直滚动列表

import 'package:flutter/material.dart';


//listview 垂直方向滚动


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

const CITY_NAMES=['北京','上海','广州','深圳','杭州','苏州','成都','武汉','郑州','云南'];


class MyApp extends StatelessWidget{
final title = 'Basic List';
@override
Widget build(BuildContext context) {

return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: _buildList(),
),
),

);
}

}

List _buildList(){
return CITY_NAMES.map((city)=>_item(city)).toList();
}

Widget _item(String city){
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color:Colors.teal),
child: Text(
city,
style: TextStyle(color: Colors.white,fontSize: 20),
),
);
}

（2）如何实现水平滚动列表

import 'package:flutter/material.dart';


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

const CITY_NAMES =['jake','marry','harry','lily','susan','jeke','ketty'];

class MyApp extends StatelessWidget{
final title ='Name_listview';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),

),
body: Container(
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: _ChildBuilder(),
),
),
),

);
}



}
List _ChildBuilder() {
return CITY_NAMES.map((city)=>_map(city)).toList();

}
Widget _map(String city) {
return Container(
width: 160,
margin: EdgeInsets.only(right: 5),
color: Colors.teal,
alignment: Alignment.center,
// decoration: BoxDecoration(),
child: Text(city,style: TextStyle(color: Colors.white)),

);
}