美文网首页
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