美文网首页
CustomScrollView 添加横向滑动的 SliverL

CustomScrollView 添加横向滑动的 SliverL

作者: 橘子有毒 | 来源:发表于2020-06-27 00:02 被阅读0次
image

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

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

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

        //头部
        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),
        )


      ],
    );
  }
}

相关文章

网友评论

      本文标题:CustomScrollView 添加横向滑动的 SliverL

      本文链接:https://www.haomeiwen.com/subject/kwipfktx.html