Flutter 沉浸式布局

如图要实现的效果

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,
          ),
        ],
      ),
    );
  }

png screenshot

0 人点赞