如何创建可滚动列表使用芯片查看

Question

请有人告诉我如何创建一个包含筹码的可滚动ListView。重点是将筹码包裹起来，使它们都在同一行中，并且在用户滑动时可以滚动。

到目前为止，这是我的代码，但它不可滚动。如何使其水平滚动？

class Filters extends StatefulWidget {
final String chipName;
Filters({Key key, this.chipName}) : super(key: key);
@override
_FiltersState createState() => _FiltersState();
}
class _FiltersState extends State<Filters> {
@override
Widget build(BuildContext context) {
return Row(
children: [
Wrap(
children: <Widget>[
filterChipWidget(chipName: 'General'),
filterChipWidget(chipName: 'Welcome'),
filterChipWidget(chipName: 'Recommendation'),
filterChipWidget(chipName: 'Other'),
filterChipWidget(chipName: 'My Friends'),
filterChipWidget(chipName: 'Threads'),
],
),
],
);
}
}

Answer 1

只需添加SingelChildScrollView作为行的父级，并使其水平。

此处代码：

return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
Wrap(
children: <Widget>[
filterChipWidget(chipName: 'General'),
filterChipWidget(chipName: 'Welcome'),
filterChipWidget(chipName: 'Recommendation'),
filterChipWidget(chipName: 'Other'),
filterChipWidget(chipName: 'My Friends'),
filterChipWidget(chipName: 'Threads'),
],
),
],
),
);