Flutter顶部滑动渐变
发布日期:2021-10-10 05:30:59 浏览次数:9 分类:技术文章

本文共 2538 字,大约阅读时间需要 8 分钟。

顶部滑动渐变   和  顶部导航 ```pythonimport 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';const APPBAR_SCORLL_OFFSET =100;class HomePage extends StatefulWidget {  @override  _HomePageState createState() => _HomePageState();}class _HomePageState extends State
   
     {  List _imageUrls = [
    
'https://qnwww2.autoimg.cn/newsdfs/g26/M09/39/1A/autohomecar__ChsEnF3LyfyAPLEOAAPPcEtAcsc635.jpg',
'https://img2.autoimg.cn/admdfs/g1/M04/0C/D7/ChsEmV236AWAeVxxAADNmEFdNug314.jpg',
'https://qnwww2.autoimg.cn/newsdfs/g25/M03/94/0C/autohomecar__ChsEel3Lcj6Ab6fcAAXx3D2fNSg287.jpg',
'https://qnwww2.autoimg.cn/newsdfs/g1/M09/4F/91/autohomecar__ChsEj13LyA6AVsDHAAexjI07sWo824.jpg'  ];  // 定义透明度的变量  double appBarAlpha = 0;
_onScroll(offset) {
double alpha = offset/APPBAR_SCORLL_OFFSET;
if(alpha<0){
  alpha = 0;
}else if(alpha > 1){
  alpha = 1;
}
setState(() {
  appBarAlpha = alpha;
});
  }  @override  Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);
return Scaffold(
body: Stack(
  children:  [
MediaQuery.removePadding(
removeTop: true,
context: context,
child: NotificationListener(
  onNotification: (scrollNotification) {
if (scrollNotification is ScrollUpdateNotification &&
scrollNotification.depth == 0) {
  // 滚动且列表滚动的时候
  _onScroll(scrollNotification.metrics.pixels);
}
  },
  child: ListView(
children:  [
  Container(
/**
 * 在需要的页面使用 屏幕适配
 */
width: ScreenUtil().setWidth(750),
height: ScreenUtil().setHeight(400),
child: Swiper(
  itemCount: _imageUrls.length,
  autoplay: true,
  itemBuilder: (BuildContext context, int index) {
return Image.network(
  _imageUrls[index],
  fit: BoxFit.cover,
);
  },
  pagination: SwiperPagination(),
),
  ),
  Container(
height: 800.0,
child: ListTile(
  title: Text('哈哈'),
),
  )
],
  ),
)),
Opacity(
  opacity:appBarAlpha,
  child: Container(
height: 60,
decoration: BoxDecoration(
  color: Colors.white
),
child: Center(
  child: Padding(
padding: EdgeInsets.only(top:20),
child: Text('首页'),
  ),
),
  ),
)
  ],
));  }}

 

转载地址:https://blog.csdn.net/qq_22049619/article/details/103160189 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Flutter ListView长列表布局
下一篇:flutter 分享两种网络请求解析的数据的方式

发表评论

最新留言

感谢大佬
[***.191.171.38]2022年12月07日 11时54分51秒