有时,你可能想要创建一个水平滑动(而不是竖直滑动)的列表。ListView Widget 本身就支持水平列表的创建。

我们将会使用标准的 ListView 构造方法,通过指定 scrollDirection 的值为水平方向,来覆盖默认的竖直方向。

  1. ListView(
  2. // This next line does the trick.
  3. scrollDirection: Axis.horizontal,
  4. children: <Widget>[
  5. Container(
  6. width: 160.0,
  7. color: Colors.red,
  8. ),
  9. Container(
  10. width: 160.0,
  11. color: Colors.blue,
  12. ),
  13. Container(
  14. width: 160.0,
  15. color: Colors.green,
  16. ),
  17. Container(
  18. width: 160.0,
  19. color: Colors.yellow,
  20. ),
  21. Container(
  22. width: 160.0,
  23. color: Colors.orange,
  24. ),
  25. ],
  26. )

完整示例

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(MyApp());
  3. class MyApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. final title = 'Horizontal List';
  7. return MaterialApp(
  8. title: title,
  9. home: Scaffold(
  10. appBar: AppBar(
  11. title: Text(title),
  12. ),
  13. body: Container(
  14. margin: EdgeInsets.symmetric(vertical: 20.0),
  15. height: 200.0,
  16. child: ListView(
  17. scrollDirection: Axis.horizontal,
  18. children: <Widget>[
  19. Container(
  20. width: 160.0,
  21. color: Colors.red,
  22. ),
  23. Container(
  24. width: 160.0,
  25. color: Colors.blue,
  26. ),
  27. Container(
  28. width: 160.0,
  29. color: Colors.green,
  30. ),
  31. Container(
  32. width: 160.0,
  33. color: Colors.yellow,
  34. ),
  35. Container(
  36. width: 160.0,
  37. color: Colors.orange,
  38. ),
  39. ],
  40. ),
  41. ),
  42. ),
  43. );
  44. }
  45. }

Horizontal List Demo