首先，创建一个Card来当Item。
class Item extends StatelessWidget {
const Item({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: [
Text('Hello',style: TextStyle(fontSize: 15),),
Text('World',style: TextStyle(fontSize: 30),),
],
),
);
}
}
下面是两种方法：
第一种 当数目固定且比较少时，直接使用 Row + SingleChildScrollView
ListView(
children: [
Text("==========="),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
for (int i = 0; i < 20; i ++)
Item(),
],
),
),
])
第二种 当数目不固定时，使用 Stack + Positioned.fill
在Stack的children中，大小由他的非Positioned的子控件的最大的宽和高来决定（不一定是同一个widget）,而Positioned里面内容，不会参与计算。Positioned.fill，就是把Positioned的child的大小和Stack的大小并齐。Opacity是为了把用来充当大小Item()给隐藏掉，放在IgnorePointer（）里面是为了防止误触点到充当大小的Item（）。
参考链接
【Flutter千古难题：如何在Column中嵌入横着滚动的ListView-哔哩哔哩】 https://b23.tv/3iVU7bx
ListView(
children: [
Text("==========="),
Stack(
children: [
IgnorePointer(
child: Opacity(
opacity: 0.0,
child: Item(),
),
),
SizedBox(width: double.infinity,),
Positioned.fill(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (_,index) {
return Item();
}),
),
],
),
])
11111111.gif
