首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Flutter 基础
梦喂马
创建于2023-06-27
订阅专栏
Flutter 基础看一次,进阶一次...
等 5 人订阅
共60篇文章
创建于2023-06-27
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
TabBarView
构造方法 TabController 用于监听和控制 TabBarView 的页面切换,通常和 TabBar 联动。如果没有指定,则会在组件树中向上查找并使用最近的一个 DefaultTabContr
GridView
网格布局是一种常见的布局类型,GridView 组件正是实现了网格布局的组件。 1 默认构造函数 gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridVie
Flutter 父组件对子组件滚动监听
Flutter Widget树中子Widget可以通过发送通知(Notification)与父(包括祖先)Widget通信。父级组件可以通过NotificationListener组件来监听自己关注的
Flutter ScrollController控制原理
ScrollController 另外三个方法: ``` ScrollPosition createScrollPosition( ScrollPhysics physics, ScrollConte
可滚动组件的滚动监听及控制
ScrollController ScrollController构造函数: ScrollController常用的属性和方法: offset:可滚动组件当前的滚动位置。 jumpTo(double
SingleChildScrollView 优缺点
SingleChildScrollView SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子组件 SingleChildScrollView不支
IntrinsicHeight 使用详解
IntrinsicHeight 是一个小部件,它可以根据其子元素的大小来确定自身的高度。它对于需要将多个子元素视为相同高度的情况非常有用 以下是使用 IntrinsicHeight 将三个子元素的高度
Sliver 按需加载列表布局
两种布局模型: 基于 RenderBox 的盒模型布局。 基于 Sliver ( RenderSliver ) 按需加载列表布局。 通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大;如果要一
Scaffold 是一个路由页的骨架
1. Scaffold 实现一个页面包含: 一个导航栏 导航栏右边有一个分享按钮 有一个抽屉菜单 有一个底部导航 右下角有一个悬浮的动作按钮 代码中用到了如下组件: 2. AppBar AppBar是
Flutter 空间适配(FittedBox)适配原理
1. FittedBox 子组件大小超出了父组件大小时,如果不经过处理的话 Flutter 中就会显示一个溢出警告并在控制台打印错误日志,比如下面代码会导致溢出: 如图: 可以看到右边溢出了 上面只是
Flutter 剪裁(Clip)详解
1 剪裁类组件 Flutter中提供了一些剪裁组件,用于对组件进行剪裁。 运行效果如图: 示例代码注释比较详细,但值得一提的是最后的两个Row!它们通过Align设置widthFactor为0.5后,
变换(Transform)详解
Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵,通过它我们可以实现各种矩阵操作,下面是一个例子: 运行如图: 1. 平移 Transform.t
装饰容器(DecoratedBox)详解
1. DecoratedBox DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰(Decoration),如背景、边框、渐变等。DecoratedBox定义如下: decoration
Padding 填充
Padding用来为子元素添加填充,也就是指定子元素与容器边界的距离,作用基本上与Android中ViewGroup的padding属性相同。 一般使用EdgeInsets类,它是EdgeInsets
Flutter LayoutBuilder、AfterLayout
1.1 LayoutBuilder 通过 LayoutBuilder,可以在布局过程中拿到父组件传递的约束信息,然后可以根据约束信息动态的构建不同的布局。 比如实现一个响应式的 Column 组件 R
Flutter 层叠布局(Stack、Positioned)
层叠布局和 Web 中的绝对定位、Android 中的 Frame 布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置。层叠布局允许子组件按照代码中声明的顺序堆叠起来。Flutter中使
Flutter 线性布局(Row和Column)
线性布局,即指沿水平或垂直方向排列子组件。Flutter 中通过Row和Column来实现线性布局,类似于Android 中的LinearLayout控件。Row和Column都继承自Flex 1.1
Flutter 弹性布局(Flex)
弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其他UI系统中也都存在,如 H5 中的弹性盒子布局,Android中 的FlexboxLayout等。Flutter 中的弹性布局主要通
Flutter 流式布局(Wrap、Flow)
如果子 widget 超出屏幕范围,则会报溢出错误,如: 运行结果如图: 可以看到,右边溢出部分报错。这是因为Row默认只有一行,如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布
Flutter 布局原理与约束
布局组件分类 1.ConstrainedBox ConstrainedBox用于对子组件添加额外的约束。如果想让子组件的最小高度是80像素,你可以使用const BoxConstraints(minH