【Flutter】Flutter 组件 ③ ( 组件位置设置 | 相对定位 | 绝对定位 | 位置偏移定位 | FractionallySizedBox 百分比定位 | alignment 百分比 )

参考文档 :

• Flutter 官方文档 : https://docs.flutter.dev/install/quick
• 使用出现网络问题 , 参考 在中国网络环境下使用 Flutter 文档 ;

一、相对定位

1、Align 精准对齐定位

Align 精准对齐定位 可以设置 9 种 对齐方位 :九宫格 ;

• topLeft / topCenter / topRight
• centerLeft / center / centerRight
• bottomLeft / bottomCenter / bottomRight

Align(alignment:Alignment.bottomRight,// 右下角child:Text("我在右下角"),)

Align 还能用坐标值 ( -1,1 到 1,1 ) 进行 自由定位 :

Align(alignment:Alignment(0.5,-0.5))

2、Center 居中定位

Center 居中定位 是 最简单的居中方式 , 让子组件在父容器里完全居中 ;

Center(child:Text("我在正中间"))

Center 相当于弱化版的 Align 组件 ;

3、Padding 内边距 + Margin 外边距 定位

通过给组件添加内边距或外边距 , 也可以间接地改变组件在界面上的位置 :

• Padding :控制组件内部内容与边框的距离, 或者作为父容器给子元素留出空间 ;
• Margin :通常通过 Container 的 margin 属性设置, 控制该组件与其他组件之间的距离 ;

Padding 内边距定位 就是 给组件加内边距 , 控制它在父容器里的位置 ;

Padding(padding:EdgeInsets.only(left:20,top:30),child:Text("距离左边20 , 顶部30"),)

4、Container 内边距 + 外边距 + alignment 定位

Container 可以用 margin / padding + alignment 定位 ;

Container(alignment:Alignment.center,margin:EdgeInsets.all(10),padding:EdgeInsets.symmetric(horizontal:20),child:Text("Container 定位"),)

5、Row / Column + MainAxisAlignment ( 线性主轴/交叉轴定位 )

在常规的线性布局中 , 位置是由 " 主轴 " 和 " 交叉轴 " 的对齐方式决定的 :

• Row ( 水平排列 ) :主轴是水平方向 , 交叉轴是垂直方向; 主轴 Main → 水平方向 ←→
• Column ( 垂直排列 ) :主轴是垂直方向 , 交叉轴是水平方向; 交叉轴 Cross → 垂直方向 ↑↓

定位属性 :

• mainAxisAlignment :控制主轴上的位置 ( 如居中、两端对齐、平均分布等 ); 主轴 Main → 垂直方向 ↑↓
• crossAxisAlignment :控制交叉轴上的位置 ( 如拉伸填满、居中对齐等 ); 交叉轴 Cross → 水平方向 ←→

代码示例 :

Column(// 主轴：垂直方向 → 居中mainAxisAlignment:MainAxisAlignment.center,// 交叉轴：水平方向 → 居中crossAxisAlignment:CrossAxisAlignment.center,children:[Text("我在屏幕正中间"),ElevatedButton(onPressed:(){},child:Text("按钮")),],)

二、绝对定位

1、Stack + Positioned 绝对定位

绝对定位

父组件用 Stack , 子组件用 Positioned , 可以直接设置 left / top / right / bottom 位置 , 可以是固定数值位置 , 也可以是 百分比位置 ;

Stack(children:[// 距离左30、上40 , 固定宽高Positioned(left:30,top:40,width:100,height:100,child:Container(color:Colors.red),),// 距左20、右20 → 宽度自适应填满剩余Positioned(left:20,right:20,bottom:50,child:Container(color:Colors.blue)),],)

Positioned 属于布局组件 ,但只能用在 Stack / IndexedStack 内部 ,是 Flutter 层叠布局体系的专属定位组件 ;

Stack是 " 画布 " ,Positioned就是画布上用来定点摆放元素的布局工具 ;

Positioned 组件 属于 Multi-child 配套布局控件 , 不是独立顶层布局 ,是Stack布局组件 的 子元素定位器 ;

Positioned 属性设置

在Stack布局组件中 , 通过 设置 left / right / top / bottom / width / height 属性 精准控制子组件的 绝对位置 ;

• left: 距离左侧距离
• right: 距离右侧距离
• top: 距离顶部距离
• bottom: 距离底部距离
• width/height: 固定宽高

left/right/top/bottom 属性定位规则 :距离 Stack 对应边的像素距离规则 :

• 只写left+top :左上角定点 , child 自身大小不变
• left+right :宽度 = Stack 宽 - left-right , 自动拉伸宽度
• top+bottom :高度自动拉伸

Positioned 组件 代码示例 :

Stack(children:[// 底层背景 Container(width:300, height:300, color: Colors.grey[200]), // 绝对定位:左上 Positioned(top:20, left:20, child: Text("左上角"),), // 绝对定位:右下 Positioned(bottom:20, right:20, child: Text("右下角"),),],)

Positioned 使用注意点

Positioned 使用注意点 :

• 脱离 Stack 直接使用会报错 ,Positioned的 父元素必须是Stack/IndexedStack, 该布局组件放在 Row、Column、Container 里直接运行报错 ;

• 只在层叠布局生效 , 普通线性布局 ( Row/Column ) 没有 " 层叠 " 概念 , 也就没有绝对定位 ;

• Positioned.fill函数 用于 快速填满整个 父 Stack :

Positioned.fill(child:Container(color:Colors.black12));

2、Stack + Align 绝对对齐

Stack 里用 Align , 不写坐标 , 直接定方位 ; 这种方式 只能 进行 九宫格 方位定位 ;

Stack(children:[Align(alignment:Alignment.topRight,child:Text("右上角固定"),),],)

3、LayoutBuilder + Positioned 百分比 ( 运行时动态尺寸定位 )

left = Stack 宽度 × 百分比 ;top = Stack 高度 × 百分比 ,精准按父容器比例定位 , 适配任意 Stack 尺寸 ;

自由控制坐标百分比 + 尺寸百分比 ;

LayoutBuilder(builder:(ctx,constraints){finalstackW=constraints.maxWidth;finalstackH=constraints.maxHeight;returnStack(children:[// left=20%宽 , top=30%高 , 宽占父40%、高20%Positioned(left:stackW*0.2,top:stackH*0.3,width:stackW*0.4,height:stackH*0.2,child:Container(color:Colors.orange),)]);})

三、位置偏移设置

1、Transform 平移 偏移位置

Transform.translate(offset:Offset(30,20),// 向右30 , 向下20child:Text("偏移位置"),)

2、使用 Align + FractionalOffset 按比例偏移定位

如果不仅要求尺寸是百分比 , 还要求 " 位置 " 也是基于百分比计算的 , 可以使用这种方式 ;

• 坐标系 :FractionalOffset 继承自 Alignment ,其坐标原点为矩形的左上角顶点 (0, 0) , 右下角为 (1, 1) ;
• 计算逻辑 :实际偏移 = (FractionalOffset.x * childWidth, FractionalOffset.y * childHeight); 这种方式更符合常规的前端思维 , 理解起来比较容易 ;

FractionalTranslation(translation:Offset(0,-0.5),// 向上移动「自身高度的一半」child:...)

四、FractionallySizedBox 支持 百分比尺寸 + 百分比位置

FractionallySizedBox 组件 是处理百分比布局最直接的方案 , 该组件允许子组件以父容器尺寸的倍数 ( 百分比 ) 进行渲染 ;

• 核心属性 :通过 widthFactor 和 heightFactor 定义比例; 例如 , 设置 widthFactor: 0.7 表示占据父容器宽度的 70% ;
• 配合对齐 :结合 alignment 属性可以控制该百分比容器的重心位置; 例如 , 使用 Alignment.centerLeft 可以让这个占宽 70% 的盒子紧贴左侧 ( 常用于进度条 ) ;

使用 widthFactor/heightFactor 设置 百分比大小 , 使用 alignment 设置 百分比位置 ;

FractionallySizedBox(// 1.百分比宽 : 父宽度 * 系数 , null=自适应子自身宽度widthFactor:0.6,// 2.百分比高 : 父高度 * 系数 , null=自适应子自身高度heightFactor:0.4,// 3.百分比位置 : 控制这个百分比大小的盒子在父容器哪个位置alignment:Alignment(0.5,-0.6),// x=0.5(横向75%位置) , y=-0.6(纵向20%位置)child:Container(color:Colors.blue),)

• widthFactor、heightFactor :控制尺寸 ( 占父百分比 ) : 0~1 , 1=填满100%父容器 , >1 会溢出
• alignment :控制位置 ( 百分比坐标 ) : Alignment(x,y) 取值范围 [-1 ~ +1] , 对应父容器坐标系
  • x=-1 :最左 ; x=0 : 水平居中 ; x=1 : 最右 ;
  • y=-1 :最上 ; y=0 : 竖直居中 ; y=1 : 最下 ;
• 常用预设 alignment 简写 :

Alignment.topLeft//(-1,-1)左上Alignment.topCenter//(0,-1)上中Alignment.topRight//(1,-1)右上Alignment.centerLeft//(-1,0)左中Alignment.center//(0,0)正中(默认值)Alignment.centerRight//(1,0)右中Alignment.bottomLeft//(-1,1)左下Alignment.bottomCenter//(0,1)下中Alignment.bottomRight//(1,1)右下

五、alignment: Alignment(x,y) 属性 设置 百分比位置

只要组件拥有 alignment: Alignment(x,y) 这个属性 , 就一定可以做「百分比位置布局」 , 下面的组件 的 Alignment (x,y) 坐标规则 相同 ;

• Container :默认 alignment 属性为 null , 子组件铺满容器、alignment 不生效 ; 必须给 Container 固定宽高 / 无限大 , alignment 才生效 ;

Container(width:300,height:300,alignment:Alignment(0.3,-0.2),// 子组件在容器内任意坐标child:Text(""),)

• Align :alignment 属性 默认 值 Alignment.center, 可搭配宽高系数做百分比布局 Flutter ;

Align(alignment:Alignment(-0.4,-0.46),// 百分比位置child:Text("我在百分比位置"),)

• FractionallySizedBox :alignment 属性 默认 Alignment.center ,同时控制百分比尺寸 + 百分比位置 ;

FractionallySizedBox(alignment:Alignment(-0.4,-0.46),// 还是一样！widthFactor:0.5,child:Text("百分比大小+位置"),)

• Stack :alignment 属性 默认值 Alignment.topStart ;

Stack(alignment:Alignment(-0.4,-0.46),// 完全一样！children:[Text("Stack 百分比")],)

• UnconstrainedBox :解除父约束 + 内部对齐 ;

UnconstrainedBox(alignment:Alignment.bottomCenter,child:Container(width:200,height:50,color:Colors.blue))

• SliverFillRemaining :填充剩余滚动空间 , 自带 alignment ;

SliverFillRemaining(alignment:Alignment.bottomRight,child:Text("占满剩余区域 , 子组件右下摆放"))

只要 父容器 尺寸 大于 子组件 , 就可以使用该 百分比位置 设置 ;

百分比坐标公式 :

Alignment(横向百分比*2-1,// x纵向百分比*2-1// y)

• 左侧 30% = x = 0.3*2-1 = -0.4
• 顶部 27% = y = 0.27*2-1 = -0.46