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

最新推荐文章于 2024-07-04 18:23:55 发布
最新推荐文章于 2024-07-04 18:23:55 发布
阅读量2.4k 收藏 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实现滚动渐变
01-22
Flutter 自定义AppBar实现滚动渐变
Flutter: 自定义AppBar
chuidan0436的博客
06-06 414
Flutter: 自定义AppBar 这是一个可以指定SafeArea或者说StatusBar背景色的AppBar 先上代码： import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; ...
flutter 自定义 Appbar
ren1027538427的博客
02-21 3676
最近用的很好的Appbar工具类分享一下 下面是方法名意思 1.backAppbar 仅含 左侧返回按钮 及中间标题 2.baseNoBackAppbar 仅含 及中间标题 3.baseRTextAppbar backAppbar 仅含 左侧返回按钮 及中间标题 右边是文字比如（确定按钮） 4.baseRImageAppbar仅含 左侧返回按钮 及中间标题 右边是图片比如（确定按钮） 5.baseRWidgetAppbar 仅含 左侧返回按钮 及中间标题 右边自定义view
Flutter系列（五）用-Flutter-实现-PageView-指示器
2401_85384175的博客
07-04 455
以上代码会得出这样一个界面。稍微解释一下代码：/// 指定一个控制器，用来控制PageView的滑动，以及初始位置在第200页/// 主要为了实现“无限循环”/// 一个固定大小的容器，这里指定了他的高为250/// 一个容器，用来设定背景颜色为灰色/// 主角PageView,文字居中显示当前的索引。
Flutter实战项目-第五篇 自定义AppBar
Javon_huang的博客
05-08 1648
自定义AppBar AppBar笼罩层
Flutter 自定义TabBar指示器(indicator)实现秒杀UI样式
上辈子作恶多端，这辈子写前端。
03-02 7225
一、话不多说，先来看下实现的交互效果，源码在文末 二、首先分解一下需求 自定义Tab指示器与Tab 当秒杀节点小于5个的时候，每一个Tab的宽度为平分屏幕宽度 当大于等于5个的时候，每一个Tab的宽度为固定宽度 1、先来看下最简单的TabBar与TabBarView需要如何实现 /// 省略若干代码... @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Flutter | 自定义 AppBar
无夜之星辰的博客
11-03 4096
对于简单的自定义 AppBar，使用系统提供的 AppBar，给 title 赋值 widget 就够用了: class _ScaffoldDemoPage3State extends State<ScaffoldDemoPage3> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // title是个widget，一般的自定义appba
Flutter 滚动监听及实战appBar滚动渐变的实现
01-04
在 Flutter 中滚动监听一般可以采用两种方式来实现，分别是ScrollController和NotificationListener这两种方式。 ScrollController介绍 ScrollController 介绍一下ScrollController常用的属性和方法： offset：可...
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
Flutter之自定义Dialog实现版本更新弹窗功能的实现 Flutter是一款跨平台的移动应用开发框架，它提供了非常多的组件和功能，使得开发者可以快速构建高质量的应用程序。在实际开发中，我们经常需要实现一些自定义的...
flutter系列之:如丝般顺滑的SliverAppBar
程序那些事
12-12 1066
对于一个APP来说，肯定会有一个AppBar，这个AppBar一般包含了APP的导航信息等。虽然我们可以用一个固定的组件来做为AppBar，但是这样就会丢失很多特效，比如将AppBar固定在顶部，AppBar可以在滑动的过程中进行大小变换等。当然这一切都不需要自己来实现，flutter已经为我们提供了一个非常强大的AppBar组件，这个组件叫做SliverAppBar。简单点说，SliverAppBar就是一个在滑动中可变大小的AppBar,我们可以通过设置不同的参数来实现不同的效果。
Flutter之自定义AppBar及顶部导航切换
一花一世界 一叶一菩提
02-28 3239
AppBar常用属性 属性 描述 leading 在标题前面显示的一个控件，在首页通常显示应用的logo；在其他界面通常显示为返回按钮 title 标题，通常显示为当前页面的标题，是一个widget actions 通常使用IconButton来表示，可以放按钮组 bottom 通常放tabBar，标题下面显示一个Tab导航栏 backgroun...
flutter自定义appbar
徐代龙的技术专栏
08-18 2892
场景描述： 因为写很多页面，每个顶部都搞一个返回键、分享，中间标题这种东东，弄的比较繁琐，索性就把这个appbar给单独抽离出来，重新定义成一个widget这个内容。 效果图大致是这样子的： 源码： 直接上代码： import 'package:flutter/material.dart'; import 'package:/common_utils/common_utils.dart'; ...
Flutter 基于AppBar自定义导航栏基类
wahkim的博客
11-22 955
Flutter 基于AppBar自定义导航栏基类
Flutter APPbar 自定义icon
weixin_43476229的博客
12-20 3257
Flutter APPbar 自定义icon appBar: AppBar(title: Text("Home"), leading: Builder ( builder: (BuildContext context) { return Icon...
Flutter--自定义AppBar
weixin_41735943的博客
11-26 2340
class CustomAppBar extends StatefulWidget implements PreferredSizeWidget { final Widget child; CustomAppBar(this.child); @override State<StatefulWidget> createState() => _CustomAppBarState(); @override Size get preferredSize =&gt..
Flutter自定义Appbar搜索框，34岁程序员年薪50w
m0_61408772的博客
09-03 283
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开发七、实现App底部tab切换和AppBar中自定义顶部导航
瑶山的博客
06-08 1941
需要用到的知识点 StatefulWidget bottomNavigationBar 等组件
flutter 导航组件 AppBar （含顶部选项卡TabBar，抽屉菜单 drawer ，自定义导航图标）
朝阳39的博客
05-06 2221
AppBar 组件的结构 AppBar 组件的代码 AppBar( leading: Icon(Icons.home), // 导航图标 title: Text('AppBar Title'), // 页面标题 actions: <Widget>[ // 顶部菜单 IconButton( onPressed: () {}, icon: Icon(Icons.build), ), IconButton.
Flutter自定义SliverAppBar
欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN
05-31 936
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、付费专栏及课程。

余额充值