随笔分类 - Flutter / Flutter学习
摘要:TabBarView 是 Material 组件库中提供了 Tab 布局组件,通常和 TabBar 配合使用。 一、TabBarView TabBarView 封装了 PageView,它的构造方法很简单 TabBarView({ Key? key, required this.children,
阅读全文
摘要:本节将介绍可滚动组件中缓存指定子项的通用方案。 首先回想一下,在介绍 ListView 时,有一个addAutomaticKeepAlives 属性我们并没有介绍,如果addAutomaticKeepAlives 为 true,则 ListView 会为每一个列表项添加一个 AutomaticKee
阅读全文
摘要:一、PageView 如果要实现页面切换和 Tab 布局,我们可以使用 PageView 组件。需要注意,PageView 是一个非常重要的组件,因为在移动端开发中很常用,比如大多数 App 都包含 Tab 换页效果、图片轮动以及抖音上下滑页切换视频功能等等,这些都可以通过 PageView 轻松实
阅读全文
摘要:前一篇博客:Flutter可滚动组件(2):ListView基本使用 介绍了 ListView 的基本使用,下面通过一个示例介绍一下 ListView 的各种进阶用法。 一、实现复杂自定义ListView 先看下效果图: 1.1 完成条目的封装 // ignore_for_file: prefer_
阅读全文
摘要:在 Flutter 中,GridView 是一个展示数据网格的滚动小部件,类似于表格视图,其中子控件被组织成行和列。它非常适合于展示图像网格、小部件集合等。GridView 同样支持懒加载,这意味着只有当内容进入视口时才会被构建。 一、基本用法 GridView 最基本的用法是包裹一个网格项的集合:
阅读全文
摘要:一、常见滚定组件 Flutter 提供了多种滚动组件,可以用于处理各种滚动效果。 Sliver 的子组件都能滚动,但并不是所有能滚动的组件都是Sliver子组件。比如,ListView和Grid就不是Sliver子组件。 重要说3遍 ListView和Grid就 不是 Sliver子组件。 List
阅读全文
摘要:ListView 是一个滚动列表组件,可以在垂直方向上(或水平方向,默认是垂直方向)展示一系列的子组件。一种最简单的使用方式是直接将所有需要排列的子 Widget 放在 ListView 的 children 属性中即可。 一、ListView的构造方法 ListView 有下面三种构造方法: 常规
阅读全文
摘要:Material 组件库提供了丰富多样的组件,这里介绍一下最常用的 Scaffold 组件,其余的读者可以自行查看文档或 Flutter Gallery 中 Material 组件部分的示例。 注意:Flutter Gallery 是 Flutter 官方提供的 Flutter Demo,源码位于
阅读全文
摘要:一、Transform的作用 使用 Transform,你可以实现如下功能: 平移:让部件在 x、y 轴上移动指定的距离。平移可以用于创建滑动效果、拖拽操作等。 旋转:让部件进行旋转,旋转角度可以自由设置。旋转可以用于创建旋转动画、改变部件的方向等。 缩放:让部件在 x、y 轴上进行缩放,缩放比例可
阅读全文
摘要:一、Flutter 的 Clip 类:裁剪部件的使用 在 Flutter 中,Clip 类提供了一种方便的方式来裁剪部件,以实现各种独特的界面效果。Clip 类包含多个子类,如 ClipOval、ClipRect ClipRRect、和 ClipPath,每个子类都提供了不同的裁剪方式和参数。本篇博
阅读全文
摘要:在 Flutter 中,Container(容器)是一个非常基础且功能丰富的小部件,用于定义一个矩形区域,它可以包含其他小部件。Container 提供了多种定制化选项,如颜色、边距、边框、尺寸等,同时还可以对子部件进行对齐、填充和变换等操作。 如果你需要一个视图,有一个背景颜色、图像、有固定的尺寸
阅读全文
摘要:一、DecoratedBox简介 装饰盒子?? 在 Flutter 中,DecoratedBox小部件可以在其子部件绘制前或绘制后绘制一个装饰。这使得您可以创建各种复杂的背景、边框、渐变等效果。DecoratedBox接收一个decoration参数,常用的decoration有BoxDecorat
阅读全文
摘要:一、Padding简介 在界面设计中,我们经常需要设置元素之间的空隙,或者是元素与其容器之间的空隙。这就是Padding发挥作用的地方。Padding是一个用于封装其子元素,并围绕子元素创建空白空间的小部件。 Padding( padding: EdgeInsets.all(8.0), child:
阅读全文
摘要:在 Flutter 中,布局是构建用户界面的重要组成部分。Align 和 Center 是两个常用的布局组件,它们都用于在父组件中对子组件进行对齐和居中。本篇博客将详细介绍 Align 和 Center 的用法、属性和适用场景,帮助你更好地理解和运用它们。 一、Align:精准对齐,掌握位置 Ali
阅读全文
摘要:层叠布局和 Web 中的绝对定位、Android 中的 Frame 布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置。层叠布局允许子组件按照代码中声明的顺序堆叠起来。Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠,而Posi
阅读全文
摘要:一、简介 在 Flutter 中,流式布局是一种常用的布局方式,用于实现动态调整子组件位置和尺寸的需求。 Flutter 提供了两个流式布局的组件:Wrap和Flow。 其实,Flow 用的实在不多呀。 二、Wrap组件 Wrap 组件是一种流式布局,它会自动调整和换行子组件,以适应可用空间。 属性
阅读全文
摘要:一、什么是弹性布局(Flex) 什么是弹性布局(Flex)? 弹性布局(Flex)是一种基于弹性盒子模型的布局方式,类似于 Web 开发中的 Flexbox。在 Flutter 中,Flex 组件是用于实现弹性布局的关键组件之一。Flex 布局是一种简洁且强大的方式,可用于构建水平或垂直方向的弹性布
阅读全文
摘要:所谓线性布局,即指沿水平或垂直方向排列子组件。Flutter 中通过Row和Column来实现线性布局。 主轴和纵轴 对于线性布局,有主轴和纵轴之分,如果布局是沿水平方向,那么主轴就是指水平方向,而纵轴即垂直方向;如果布局沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向。 一、Row组件 1.
阅读全文
摘要:Radio是一种常用的选择控件,用于提供一组单选按钮,用户只能从这些按钮中选择一个。Radio 适用于需要用户从有限选项中选择的场景,如性别选择、偏好设置等。 一、属性 Radio小部件的主要属性包括: title: 显示在 Radio 按钮旁边的文本。 value: Radio 按钮的值,用于标识
阅读全文
摘要:Flutter 提供了多种方式来展示图标,其中Icon是最常用的小部件之一。它不仅用于展示简单的图标,还可以与文本、按钮和其他小部件组合使用,以增强用户界面的交互性。 Icon 是 Flutter 中用于展示图标的小部件。它通常与图标数据(如[字体图标)一起使用,可以很容易地集成到各种用户界面元素中
阅读全文