flutter实现一个顶部滚动横向列表 包括布局代码
时间: 2024-02-01 18:04:04 浏览: 32
以下是Flutter实现一个顶部滚动横向列表的布局代码:
```dart
import 'package:flutter/material.dart';
class HorizontalList extends StatefulWidget {
@override
_HorizontalListState createState() => _HorizontalListState();
}
class _HorizontalListState extends State<HorizontalList> {
final List<String> items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
'Item 6',
'Item 7',
'Item 8',
'Item 9'
];
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Container(
height: 80,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
selectedIndex = index;
});
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text(
items[index],
style: TextStyle(
color: index == selectedIndex ? Colors.blue : Colors.grey,
fontWeight: index == selectedIndex ? FontWeight.bold : FontWeight.normal,
),
),
SizedBox(height: 5),
Container(
height: 2,
width: 30,
color: index == selectedIndex ? Colors.blue : Colors.transparent,
),
],
),
),
);
},
),
);
}
}
```
在这个示例中,我们创建了一个`HorizontalList`小部件,它包含一个名称为`items`的字符串列表,其中包含我们要显示的项目。
我们使用`ListView.builder`小部件创建一个横向滚动列表,其中每个项目都由`GestureDetector`小部件包装,以便我们可以检测用户的点击事件。在触发点击事件时,我们使用`setState`方法更新`selectedIndex`变量的值,并根据该值更改所选项目的文本和下划线的颜色。
最终,我们将所有这些内容包装在一个`Container`小部件中,并将其高度设置为80,使其在页面上占据适当的空间。