Flutter携程App_08_Flutter水平垂直滚动列表ListView
Flutter携程App_08_Flutter水平垂直滚动列表ListView
码农帮派
发布于 2020-04-01 15:30:46
发布于 2020-04-01 15:30:46
本节代码利用Flutter的ListView组件实现垂直/水平方向滚动的列表，效果图如下：
垂直方向的滚动：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
const CITY_NAMES = ['北京','上海','广州','深圳','杭州','武汉','四川','重庆',
'南京','济南','青岛','大连','苏州','南昌'
];
class MyApp extends StatelessWidget {
final title = 'Basic ListView';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
scrollDirection: Axis.vertical,
children: _buildList(),
)),
);
}
List<Widget> _buildList() {
return CITY_NAMES.map((city) => _item(city)).toList();
}
Widget _item(String name) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.green),
child: Text(
name,
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
);
}
}水平方向滚动的列表只需要给ListView添加scrollDirection属性，并设置为Axis.horizontal：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
const CITY_NAMES = ['北京','上海','广州','深圳','杭州','武汉','四川','重庆',
'南京','济南','青岛','大连','苏州','南昌'
];
class MyApp extends StatelessWidget {
final title = 'Basic ListView';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
scrollDirection: Axis.horizontal,
children: _buildList(),
)),
);
}
List<Widget> _buildList() {
return CITY_NAMES.map((city) => _item(city)).toList();
}
Widget _item(String name) {
return Container(
width: 100,
margin: EdgeInsets.only(right: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.green),
child: Text(
name,
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
);
}
}本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-03-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读