当前位置：首页 > news >正文

flutter AppBar滚动渐变

news 来源：原创 2024/9/23 3:20:05

这个需求应该是挺多的,今天用flutter 实现以下 , 直接上代码.
我没有过多的封装,为了一次性贴出来,我自定义的组件你可以写自己的,
如果项目自己用,最好封装好,这样看着代码很乱
这里只要的知识点是
1: 监听

NotificationListener(
             onNotification: (ScrollNotification notification) {
               if (notification is ScrollUpdateNotification &&
                   notification.depth == 0) {
                 _onScroll(notification.metrics.pixels);
               }
             },

//以下是API
print(metrics.pixels);// 当前位置
print(metrics.atEdge);//是否在顶部或底部
print(metrics.axis);//垂直或水平滚动
print(metrics.axisDirection);// 滚动方向是down还是up
print(metrics.extentAfter);//视口底部距离列表底部有多大
print(metrics.extentBefore);//视口顶部距离列表顶部有多大
print(metrics.extentInside);//视口范围内的列表长度
print(metrics.maxScrollExtent);//最大滚动距离，列表长度-视口长度
print(metrics.minScrollExtent);//最小滚动距离
print(metrics.viewportDimension);//视口长度
print(metrics.outOfRange);//是否越过边界

2:Stack 的使用
stack 可以把下面的View 放到上面 API 大家自行查看把

3: color 颜色问题
hexToColor('#31bd48') 一个支持颜色的方法, 代码贴一下出来吧


Color hexToColor(String s) {
  // 如果传入的十六进制颜色值不符合要求，返回默认值
  if (s == null || s.length != 7 || int.tryParse(s.substring(1, 7), radix: 16) == null) {
    s = '#999999';
  }

  return new Color(int.parse(s.substring(1, 7), radix: 16) + 0xFF000000);
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String hpCon = '';
//定义透明度
  double appBarAlpha = 0;
  @override
  void initState() 
    super.initState();
  }

/**
 * 滚动的距离
 */
  _onScroll(offset) {
    double alpha = offset / 100;
    print(offset);
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }

    setState(() {
      appBarAlpha = alpha;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // appBar: AppBar(
        //   title: NavBar(),
        //   backgroundColor: hexToColor('#31bd48'),
        // ),
        body: Stack(
      children: <Widget>[
        MediaQuery.removePadding(
          removeTop: true,
          context: context,
          child: Container(
            child: Consumer<HomeModel>(builder: (_, homeModel, __) {
              //这里是个监听,监听listview滚动
              return NotificationListener(
                onNotification: (ScrollNotification notification) {
                  if (notification is ScrollUpdateNotification &&
                      notification.depth == 0) {
                    _onScroll(notification.metrics.pixels);
                  }
                },
                child: ListView(
                  children: <Widget>[
                    Container(
                      height: ScreenUtil().setHeight(240),
                    //这里是轮播图,也是可以自己写的
                      child: HomePageSwiper(),
                    ),
                    Container(
                      height: 800,
                      child: Text(''),
                    )
                  ],
                ),
              );
            }),
          ),
        ),
        //这里是搜索框
       //这里可以自定义组件,使用自己的头,我的是项目的
        Opacity(
          opacity: appBarAlpha,//滑动offset改变透明度 
          child: Container(
              decoration: BoxDecoration(
                color: hexToColor('#31bd48'),
              ),
              height: 100,
              child: Padding(
                padding: EdgeInsets.only(top: 44),
                child: NavBar(),
              )),
        )
      ],
    ));
    // );
  }
}