建立水平清單
有時你可能會希望建立一個可以水平滾動的清單,而不是垂直滾動。 ListView 元件(Widget)支援水平清單。
請使用標準的 ListView 建構函式,並傳入一個水平的 scrollDirection,這樣就能覆寫預設的垂直方向。
dart
ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160, color: Colors.red),
Container(width: 160, color: Colors.blue),
Container(width: 160, color: Colors.green),
Container(width: 160, color: Colors.yellow),
Container(width: 160, color: Colors.orange),
],
),互動範例
#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: ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160, color: Colors.red),
Container(width: 160, color: Colors.blue),
Container(width: 160, color: Colors.green),
Container(width: 160, color: Colors.yellow),
Container(width: 160, color: Colors.orange),
],
),
),
),
);
}
}