在Column中嵌入横向滚动的ListView

在Column中嵌入横向滚动的ListView

如果我们直接在column中嵌入一个横向滚动listView, 由于column的主轴是垂直的，和ListView的交叉轴的方向相同，这时候就会出现布局错误，这时候可以在ListView外出套上一个Container之类的组件限制其高度，例如

child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        const Text("begin"),
        Container(
            height: 40,
            child: ListView.builder(
                itemBuilder: (_, index) {
                    return const Card(
                        child: Center(
                            child: Text("图片", style: TextStyle(fontSize: 16),
                                       )),
                    );
                },
                itemCount: 100,
                scrollDirection: Axis.horizontal,
            ),
        ),
        const Text("end")
    ],

但是高度指定的话毕竟不利于拓展，我们希望能根据item自动计算出高度，借鉴到一个比较好的思路是利用Stack布局，它会自动根据除Positioned组件之外的组件的大小来计算出自身的大小，于是我们可以提供一个item作为原型给stack计算大小，将ListView放在Position中显示

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("begin"),
            Stack(
              children: [
              	// 充当原型的item不显示也不能响应点击事件
                IgnorePointer( 
                  child: Opacity(
                    opacity: 0,
                    child: Card(
                      child: Text("图片", style: TextStyle(fontSize: 16),),
                    ),
                  ),
                ),
                // 横向宽度变大
                SizedBox(width: double.infinity,),
                Positioned.fill(
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (_, index){
                      return Card(
                        child: Text("图片", style: TextStyle(fontSize: 16),),
                      );
                    },
                  ),
                )
              ],
            ),
            const Text("end")
          ],
        ),