在Flutter中,要构建一个水平列表视图,你可以使用ListView.builder,并设置scrollDirection为Axis.horizontal。以下是一个简单的示例:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Horizontal ListView Builder')),
body: HorizontalListViewBuilder(),
),
);
}
}
class HorizontalListViewBuilder extends StatelessWidget {
final List<String> items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
// ... 更多的 items
];
@override
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
height: 100,
color: Colors.blue,
margin: EdgeInsets.all(8.0),
child: Center(
child: Text(
items[index],
style: TextStyle(color: Colors.white),
),
),
);
},
);
}
}
在这个示例中,我们创建了一个名为HorizontalListViewBuilder的StatelessWidget,它包含一个水平列表视图。我们使用ListView.builder来构建列表视图,并设置scrollDirection为Axis.horizontal以实现水平滚动。
我们定义了一个包含5个字符串的列表作为示例数据。在itemBuilder回调函数中,我们为每个列表项创建一个带有文本的Container。你可以根据需要自定义列表项的外观和内容。
运行此示例,你将看到一个水平滚动的列表视图,其中包含5个彩色的方块,每个方块上都有一个文本标签。
领取专属 10元无门槛券
手把手带您无忧上云