文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android Flutter如何实现有趣的页面滚动效果

2023-07-02 10:06

关注

本文小编为大家详细介绍“Android Flutter如何实现有趣的页面滚动效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“Android Flutter如何实现有趣的页面滚动效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

在Flutter 高仿一个某支付价值几个亿的页面这一篇中,我们使用了 ListView 将几个 GridView 组合在一起实现了不同可滑动组件的粘合,但是这里必须要设置禁止 GridView 的滑动,防止多个滑动组件的冲突。这种方式写起来不太方便,事实上 Flutter 提供了 CustomScrollView 来粘合多个滑动组件,并且可以实现更有趣的滑动效果。

Android Flutter如何实现有趣的页面滚动效果

CustomScrollView 简介

CustomScrollView的常用属性如下:

改造原代码

页面结构需要重新调整,将原先的 GridView 改成 SliverGrid,然后顶部区域需要使用 SliverToBoxAdapter进行包裹。每个区域的栏也需要单独使用SliverToBoxAdapter 包裹起来。SliverToBoxAdapter使用很简单,只需要将原有的组件设置为其 child 属性即可。

Widget _headerGridButtons() {  double height = 144;  List<Map<String, String>> buttons = GridMockData.headerGrids();  return SliverToBoxAdapter(    child: Container(      height: height,      margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),      decoration: BoxDecoration(        borderRadius: BorderRadius.circular(4.0),        gradient: LinearGradient(            begin: Alignment.topCenter,            end: Alignment.bottomCenter,            colors: [              Color(0xFF56AF6D),              Color(0xFF56AA6D),            ]),      ),      child: Center(        child: Row(            mainAxisAlignment: MainAxisAlignment.spaceEvenly,            children: buttons                .map((item) => _getMenus(item['icon'], item['name'],                    color: Colors.white))                .toList()),      ),    ),  );}Widget _getMenuTitle(String title) {  return SliverToBoxAdapter(    child: Container(      margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),      padding: EdgeInsets.all(MARGIN),      decoration: BoxDecoration(        borderRadius: BorderRadius.circular(4.0),        color: Colors.white,      ),      child: Text(        title,        style: TextStyle(color: Colors.grey[700]),      ),    ),  );}

GridView 我们之前使用的是 Grid.count() 方法,这里只需要更换为 SliverGrid.count()即可,参数基本相同,只是我们可以将之前禁止滑动的代码删除了。

//在 SliverGrid 中无需下面两行代码禁止滑动shrinkWrap: true,physics: NeverScrollableScrollPhysics(),

让导航栏更有趣

在 Flutter 中提供了一个 SliverAppBar专门用于 CustomScrollView,该导航栏基本属性和 AppBar 类似,但有些其他的属性:

SliverAppBar _getAppBar(String title) {  return SliverAppBar(    pinned: true,    expandedHeight: 200,    brightness: Brightness.dark,    flexibleSpace: FlexibleSpaceBar(      title: Text(title),      background: Image.network(        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=688497718,308119011&fm=26&gp=0.jpg',        fit: BoxFit.cover,      ),    ),  );}

改造后的代码

改造后需要使用 Container 包裹,以设置背景颜色,多个 Sliver 组件依次排列就可以完成拼接后一起滚动,相比使用 ListView 来说会更简便,且效果更好。

@override  Widget build(BuildContext context) {    return Container(      color: Colors.white,      child: CustomScrollView(        slivers: [          _getAppBar('个人中心'),          _headerGridButtons(),          _getMenuTitle('金融理财'),          _gridButtons(GridMockData.financeGrids()),          _getMenuTitle('生活服务'),          _gridButtons(GridMockData.serviceGrids()),          _getMenuTitle('购物消费'),          _gridButtons(GridMockData.thirdpartyGrids()),        ],      ),    );  }

读到这里,这篇“Android Flutter如何实现有趣的页面滚动效果”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯