前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 沉浸式布局

Flutter 沉浸式布局

作者头像
赵哥窟
发布2021-01-21 18:47:49
1K0
发布2021-01-21 18:47:49
举报
文章被收录于专栏:日常技术分享

如图要实现的效果

Screenshot_1611201197.png

Screenshot_1611201251.png

Screenshot_1611201253.png

实现,代码很简单就不多说了。

代码语言:javascript
复制
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('沉浸式布局'),
            leading: IconButton(
              icon: Image(
                image: AssetImage("assets/images/navi/navi_back.png"),
                color: null,
                fit: BoxFit.scaleDown,
                alignment: Alignment.center,
              ),
              onPressed: () => Navigator.of(viewService.context).pop(),
            ),
            floating: true,
            expandedHeight: 250,
            elevation: 0,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                child: Image.network(
                  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2055879269,628258096&fm=26&gp=0.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          SliverFixedExtentList(
            delegate: SliverChildBuilderDelegate(
                  (context, index) {
                return Container(
                  margin: EdgeInsets.all(5),
                  height: 44,
                  color: Colors.red,
                );
              },
              childCount: 50,
            ),
            itemExtent: 80,
          ),
        ],
      ),
    );
  }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档