Flutter之自定义AppBar并实现滑动渐变

最新推荐文章于 2024-10-08 12:07:29 发布
最新推荐文章于 2024-10-08 12:07:29 发布
阅读量2.5k 收藏 6
点赞数 4
分类专栏： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013600907/article/details/101456290
版权 
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
//滚动最大距离
const APPBAR_SCROLL_OFFSET = 100;
class HomePage extends StatefulWidget {

  @override
  _TabNavigatorState createState() =>_TabNavigatorState();
}

class _TabNavigatorState extends State<HomePage> {
  List _imageUrl =[
    'https://dimg04.c-ctrip.com/images/zg0o180000014yl20DEA4.jpg',
    'https://dimg04.c-ctrip.com/images/zg0f180000014vrut370F.jpg',
    'https://dimg04.c-ctrip.com/images/zg0n18000001528jhD6B2.jpg'];
  double appBarAlpha = 0;
  __onScroll(offset){
    double alpha = offset/APPBAR_SCROLL_OFFSET;
    if(alpha<0){
      alpha = 0;
    }else if(alpha>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
id-whc
关注
专栏目录
订阅专栏
flutter 自定义 Appbar
ren1027538427的博客
02-21 3700
最近用的很好的Appbar工具类分享一下 下面是方法名意思 1.backAppbar 仅含 左侧返回按钮 及中间标题 2.baseNoBackAppbar 仅含 及中间标题 3.baseRTextAppbar backAppbar 仅含 左侧返回按钮 及中间标题 右边是文字比如（确定按钮） 4.baseRImageAppbar仅含 左侧返回按钮 及中间标题 右边是图片比如（确定按钮） 5.baseRWidgetAppbar 仅含 左侧返回按钮 及中间标题 右边自定义view
Flutter开发(十九)：Flutter自定义AppBar滚动渐变
wuqingsen1的博客
11-01 967
将 ListView 中的 padding 移除。 在ListView 中，即使控件在最上面，距离上面也有一部分距离，为了移除上面的距离，使用 MediaQuery.removePadding 来操作。 具体代码如下： @override Widget build(BuildContext context) { return Scaffold( body: MediaQuery.removePadding( removeTop: true, ...
flutter SliverAppBar 随内容一起滑动的头部 - 滞留头部
10-26
flutter SliverAppBar 随内容一起滑动的头部 - 滞留头部
Flutter: 自定义AppBar
chuidan0436的博客
06-06 427
Flutter: 自定义AppBar 这是一个可以指定SafeArea或者说StatusBar背景色的AppBar 先上代码： import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; ...
Flutter全局统一自定义导航栏返回按钮
最新发布
smileKH的博客
10-08 694
首先，我们可以通过自定义leading属性来创建一个返回按钮。leading属性定义了AppBar的前置部分，通常用于放置返回按钮。AppBar(},),title: Text('自定义返回按钮'),),为了在全局范围内统一自定义返回按钮，我们可以创建一个自定义的Widget，然后在每个需要的Scaffold中使用它。actions;Key?key,@override},),@override然后，在每个页面中使用Scaffold(
Flutter自定义Appbar搜索框，34岁程序员年薪50w
m0_61408772的博客
09-03 294
import ‘package:flutter_demo_001/ui.theme/theme.dart’; import ‘package:flutter_demo_001/utils/padding.dart’; class SearchAppBar extends StatefulWidget { SearchAppBar({Key? key, required this.hintLabel}) : super(key: key); final String hintLabel; @override
flutter系列之:如丝般顺滑的SliverAppBar
程序那些事
12-12 1114
对于一个APP来说，肯定会有一个AppBar，这个AppBar一般包含了APP的导航信息等。虽然我们可以用一个固定的组件来做为AppBar，但是这样就会丢失很多特效，比如将AppBar固定在顶部，AppBar可以在滑动的过程中进行大小变换等。当然这一切都不需要自己来实现，flutter已经为我们提供了一个非常强大的AppBar组件，这个组件叫做SliverAppBar。简单点说，SliverAppBar就是一个在滑动中可变大小的AppBar,我们可以通过设置不同的参数来实现不同的效果。
Flutter 滚动监听及实战appBar滚动渐变的实现
01-04
在 Flutter 中滚动监听一般可以采用两种方式来实现，分别是ScrollController和NotificationListener这两种方式。 ScrollController介绍 ScrollController 介绍一下ScrollController常用的属性和方法： offset：可...
Flutter 滚动监听及实战appBar滚动渐变
weixin_45365889的博客
09-29 1615
介绍 在 Flutter 中滚动监听一般可以采用两种方式来实现，分别是 ScrollController 和 NotificationListener 这两种方式。 ScrollController介绍 ScrollController 介绍一下ScrollController常用的属性和方法： offset：可滚动组件当前的滚动位置。 jumpTo(double offset) 跳转...
Flutter之实现顶部导航栏颜色渐变
万小凡的专栏
08-31 2504
首先看效果 一、用到的组件及作用 Stack（实现堆叠效果）、MediaQuery（移除状态栏顶部内填充）、NotificationListener（监听滑动）、Opacity（透明度渐变控件） 二、实现 1、首先因为appbar是盖在内容上的，所以根布局就是Stack布局 2、因为要移除内容的padding实现侵入式效果，所以需要使用 MediaQuery.removePadding 且设置removeTop为true 3、因为要监听...
Flutter——自定义AppBar
NNadn的博客
03-21 3518
状态栏处理：https://blog.csdn.net/JustBeauty/article/details/82110743
Flutter AppBar 工具栏、导航栏
10-06
Flutter AppBar组件是应用的工具栏，是由多个组件组成。下面详细介绍appBar使用方法、TabBar使用方法、去掉头部的appBar、仿美团发现AppBar(可滚动TabBar)
Flutter--自定义AppBar
weixin_41735943的博客
11-26 2362
class CustomAppBar extends StatefulWidget implements PreferredSizeWidget { final Widget child; CustomAppBar(this.child); @override State<StatefulWidget> createState() => _CustomAppBarState(); @override Size get preferredSize =&gt..
Flutter | 自定义 AppBar
无夜之星辰的博客
11-03 4197
对于简单的自定义 AppBar，使用系统提供的 AppBar，给 title 赋值 widget 就够用了: class _ScaffoldDemoPage3State extends State<ScaffoldDemoPage3> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // title是个widget，一般的自定义appba
flutter自定义appbar
徐代龙的技术专栏
08-18 2907
场景描述： 因为写很多页面，每个顶部都搞一个返回键、分享，中间标题这种东东，弄的比较繁琐，索性就把这个appbar给单独抽离出来，重新定义成一个widget这个内容。 效果图大致是这样子的： 源码： 直接上代码： import 'package:flutter/material.dart'; import 'package:/common_utils/common_utils.dart'; ...
Flutter APPbar 自定义icon
weixin_43476229的博客
12-20 3269
Flutter APPbar 自定义icon appBar: AppBar(title: Text("Home"), leading: Builder ( builder: (BuildContext context) { return Icon...
Flutter自定义Appbar搜索框(1)
2401_84149845的博客
05-13 589
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Flutter自定义SliverAppBar
欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN
05-31 951
SliverAppBar一般用于CustomScrollView中，有些时候想自定义如下： class CommonSliverAppBarWidget extends StatelessWidget { const CommonSliverAppBarWidget({this.title = '', this.onPressed}); final Function onPressed; final String title; @override Widget build(BuildC
flutter中appbar的backgroundColor实现滚动渐变完整代码
09-07
在Flutter中，要实现AppBar背景颜色的滚动渐变效果，通常需要自定义` AppBar `并使用动画插件如` AnimatedContainer `或者直接操作` Paint `对象。这里是一个简单的示例，展示如何使用` AnimatedContainer `配合` Alignment `实现滚动渐变： ```dart import 'package:flutter/material.dart'; import 'package:flutter_colorpicker/flutter_colorpicker.dart'; class GradientAppBar extends StatefulWidget { final Color startColor; final Color endColor; GradientAppBar({required this.startColor, required this.endColor}); @override _GradientAppBarState createState() => _GradientAppBarState(); } class _GradientAppBarState extends State<GradientAppBar> with SingleTickerProviderStateMixin { Animation<double> appBarAnimation = CurvedAnimation(parent: this); AnimationController controller; @override void initState() { super.initState(); controller = AnimationController( vsync: this, duration: Duration(milliseconds: 500), // 设置动画持续时间 ); controller.forward(); // 开始动画 } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return AppBar( elevation: 0.0, // 降低阴影以便于观察渐变 backgroundColor: Container( height: 64, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [widget.startColor, widget.endColor], stops: List.generate(2, (index) => index.toDouble()), ), borderRadius: BorderRadius.circular(8), ), child: AnimatedContainer( duration: Duration(milliseconds: 500), width: double.infinity, alignment: Alignment.center, margin: EdgeInsets.zero, child: Text('标题', style: TextStyle(fontSize: 18)), animation: AlignmentTween(begin: Alignment.topCenter, end: Alignment.bottomCenter).animate(appBarAnimation), ), ), actions: <Widget>[ IconButton( icon: Icon(Icons.menu), onPressed: () {}, ) ], ); } } // 如果需要用户选择颜色，可以添加一个颜色选择器 // 示例： // ElevatedButton( // onPressed: () async { // var pickedColor = await showColorPicker( // pickerBuilder: (context) => MaterialColorPicker(), // ); // setState(() { // if (pickedColor != null) { // // 更新startColor和endColor // widget.startColor = pickedColor ?? Colors.blue; // widget.endColor = pickedColor ?? Colors.blueAccent; // } // }); // }, // child: Text('选择颜色'), // ), ``` 这个例子中，我们创建了一个名为`GradientAppBar`的自定义组件，它会根据滚动方向实时改变颜色渐变的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值