创建一个水平滑动的列表
有时,你可能想要创建一个水平滑动(而不是竖直滑动)的列表。
ListView
widget 本身就支持水平列表的创建。
我们将会使用标准的 ListView 构造方法,通过指定 scrollDirection 的值为水平方向,来覆盖默认的竖直方向。
dart
ListView(
scrollDirection: Axis.horizontal,
children: [
for (final color in Colors.primaries)
Container(width: 160, color: color),
],
),
交互式样例
#import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Horizontal list';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: Container(
margin: const EdgeInsets.symmetric(vertical: 20),
height: 200,
child: ScrollConfiguration(
// Add a custom scroll behavior that
// allows all devices to drag the list.
behavior: const MaterialScrollBehavior().copyWith(
dragDevices: {...PointerDeviceKind.values},
),
child: ListView(
scrollDirection: Axis.horizontal,
children: [
for (final color in Colors.primaries)
Container(width: 160, color: color),
],
),
),
),
),
);
}
}
本页内容对你有帮助吗?
除非另有说明,本文档之所提及适用于 Flutter 3.38.1 版本。本页面最后更新时间:2025-10-28。查看文档源码 或者 为本页面内容提出建议。