Flutter中，如何在Column中嵌入横着滚动的ListView的2种解决方法

首先，创建一个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