美文网首页
flutter之Sliver

flutter之Sliver

作者: wrootlflvl | 来源:发表于2019-06-15 17:30 被阅读0次
    class SliverDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar( // 类似AppBar,但是可以设置滚动效果
                title: Text('动画'), // 导航栏标题
    //            pinned: true, // 设置为true就会固定在顶部
                floating: true, // 下拉显示效果
                expandedHeight: 178.0, // 设置顶部向下伸展的高度
                flexibleSpace: FlexibleSpaceBar( // 向下伸展的部分
                  title: Text('你好,欢迎光临!', style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400),),
                  background: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560266593833&di=96dc58ad2f09d707173a045c83026803&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20131014%2F13419492_181704251155_2.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SliverSafeArea( // 让内容显示在安全区域内
                sliver: SliverPadding( // 添加内边距
                  padding: EdgeInsets.all(8.0),
                  sliver: SliverGridDemo(),
                ),
              ),
    
            ],
          ),
        );
      }
    }
    
    class SliverGridDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return SliverGrid( // 构建网格视图
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 8.0,
            mainAxisSpacing: 8.0,
            childAspectRatio: 1.0, // 控制网格视图项目显示的比例
          ),
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return Container(
                child: Image.network(items[index].imageUrl, fit: BoxFit.cover,),
              );
            },
            childCount: items.length,
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter之Sliver

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