flutter 嵌套滑动实现

18 篇文章 0 订阅
 

 

类似效果图

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(

        //Image.asset("images/u.png")
        body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            expandedHeight: 260,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.parallax,
                titlePadding: EdgeInsets.only(left: 0),
                title: buildTitle(),
                background: Stack(
                  children: <Widget>[

                    Positioned.fill(
                        child: Image.asset(
                          "images/u.png",
                          fit: BoxFit.cover,
                        )),
                    Positioned.fill(child: BlurUtils(singl: 20,)),
                    //Positioned(bottom:200,left: 0,right: 0,top: 20,child:Ziliao()),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Ziliao(),
                    )
                    //bioa

                  ],
                )),
          )
        ];
      },
      body: ListView.builder(
          itemCount: 20,
          itemBuilder: (Context, index) {
            return ListTile(
              title: Text("${index}"),
            );
          }),
    ));
  }

  Widget buildTitle() {
    return Container(
      child: Container(
        margin: EdgeInsets.fromLTRB(20, 0, 0, 50),
        child: Row(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(23),
              child: Image.asset(
                "images/u.png",
                width: 50,
                height: 50,
              ),
            ),
            Text("张三")
          ],
        ),
      ),
    );
  }

 Widget Ziliao() {
    return Container(
      height: 60,
      alignment: Alignment.center,
      color: Colors.white,
      child: Row(

        children: <Widget>[
          titles(),
          titles(),
          titles(),
          titles()

        ],
      ),
    );
 }
 Widget titles(){
    return  Expanded(child:
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("3"),
        Text("收藏")
      ],
    ));
 }
}

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值