CustomScrollView 添加横向滑动的 SliverList

image

本以为像Listview一样，加一个scrollDirection: Axis.horizontal属性就可以了，但是SliverList并不支持设置滑动方向

只能换个思路尝试用SliverToBoxAdapter嵌套ListView，行了注意需要设置高度，不然会报错 Horizontal viewport was given unbounded height

class _DemoState extends State {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [

        //头部
        SliverAppBar(
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('水平横向滑动'),
          ),
        ),


        //横向滑动区域
        SliverToBoxAdapter(
          child: Container(
            margin: EdgeInsets.only(top: 10),
            height: 100.0,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (context, index) {
                return Container(
                  width: 100.0,
                  child: Card(
                    color: Colors.primaries[index],
                  ),
                );
              },
            ),
          ),
        ),


        //垂直列表
        SliverList(
          delegate: SliverChildBuilderDelegate((content, index) {
            return Card(
              color: Colors.primaries[index % Colors.primaries.length],
              child: Container(
                height: 100,
                alignment: Alignment.center,
                child: Text(index.toString()),
              ),
            );
          }, childCount: 30),
        )


      ],
    );
  }
}