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