文章 2023-12-07 来自:开发者社区

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套在 Flutter 中,ListView 和 PageView 是两个常用的控件,它们可以用于滑动展示大量内容的场景,且支持各种嵌套方式,本文将介绍其中的一些花式嵌套方式。ListView 嵌套 ListView在某些场景下,我们需要在 ListView 中展示另一个 ListView,比如在一个订单列表中,每个订单....

文章 2022-06-13 来自:开发者社区

Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换

效果图:https://ucc.alicdn.com/images/user-upload-01/20190506121127408.gifBottomNavigationBar:class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePag...

文章 2022-05-14 来自:开发者社区

Flutter入门:组件Card、SafeArea、PageView、GridView

CardCard对应Material Design中的CardView,使用很简单Card的两个特点就是阴影和圆角。阴影:elevation: 5, 复制代码圆角:圆角需要通过shape实现,相对于android要麻烦一些shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)), 复制代码这里我们将四个角都设置成半....

文章 2022-01-30 来自:开发者社区

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)

2、四个切换页面页面 1 :import 'package:flutter/material.dart'; /// 应用主界面 class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState exten...

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
文章 2022-01-30 来自:开发者社区

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)

文章目录一、BottomNavigationBar 底部导航栏二、PageView 滑动页面三、BottomNavigationBar 与 PageView 关联四、完整代码示例1、核心导航组件2、四个切换页面3、应用启动主界面4、运行效果五、相关资源一、BottomNavigationBar 底部导航栏在 Scaffold 的 bottomNavigationBar 属性设置底部导航栏 ;设置....

文章 2022-01-29 来自:开发者社区

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )(二)

三、完整代码示例完整代码示例 :import 'package:flutter/material.dart'; /// 侧拉导航栏示例 void main() { runApp( DrawerWidget() ); } class DrawerWidget extends StatefulWidget { @override _DrawerWidgetState cr...

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )(二)
文章 2022-01-29 来自:开发者社区

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )(一)

文章目录一、Drawer 组件二、PageView 组件三、完整代码示例四、相关资源一、Drawer 组件Scaffold 组件中的 drawer 参数 , 就是设置侧拉导航栏菜单的 , 为其赋值一个 Drawer 组件 ;Drawer 组件就是侧拉菜单 , 该组件的 child 设置一个 ListView 组件 , 在列表中设置 DrawerHeader , ListTile 等子组件 ;cl....

文章 2022-01-29 来自:开发者社区

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(二)

六、完整代码示例完整代码示例 :import 'package:flutter/material.dart'; /// 底部导航栏示例 void main() { runApp( BottomNavigatorWidget() ); } class BottomNavigatorWidget extends StatefulWidget { @override _Bo...

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(二)
文章 2022-01-29 来自:开发者社区

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(一)

文章目录一、Scaffold 组件二、底部导航栏整体架构三、BottomNavigationBar 底部导航栏四、BottomNavigationBarItem 导航栏条目五、PageView 组件六、完整代码示例七、相关资源一、Scaffold 组件Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;Scaffold 提供....

文章 2021-01-01 来自:开发者社区

Flutter 108: 图解 PageView 滑动页面预览小尝试

      PageView 滑动页面预览应用在很多场景中,小菜之前只用过最基本的用法,今天小菜尝试系统性的学习一下 PageView 的基本应用;       PageView 一般用户少量需要滑动页面切换的场景,但整体使用很灵活,常用作切换 Tab 页或活动 Banner 等...

Flutter 108: 图解 PageView 滑动页面预览小尝试

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注