企业官网建设流程全解析

作者：马振显（YM52e）
仓库地址：https://gitcode.com/feng8403000/FlutterfromBeginnertoAdvancedForHarmonyOS.git
联系邮箱：372699828@qq.com

引言

在Flutter开发中，Positioned是一个非常重要的布局组件，它专门用于在Stack中精确定位子组件。与Stack的alignment属性相比，Positioned提供了更精确的定位控制，可以指定子组件相对于Stack边界的具体距离。

对于待办事项应用来说，Positioned尤为重要。它可以用来实现各种复杂的UI效果，如浮动按钮、徽章标记、图片上的文字叠加等。掌握Positioned的使用是构建精美UI的关键。

本文将深入探讨Positioned的各种用法，包括基本属性、四个方向定位、Positioned.fill、实际应用场景，并结合待办事项应用的实际场景进行讲解。

一、Positioned基本概念

1.1 Positioned的作用

Positioned组件用于在Stack中精确定位子组件。它必须作为Stack的直接子组件使用，可以指定子组件相对于Stack边界的具体距离。

Stack(children:[Container(width:300,height:200,color:Colors.grey[200]),Positioned(top:20,left:20,child:Container(width:50,height:50,color:Colors.red),),],)

在这个例子中，红色容器被精确定位在距离顶部20像素、距离左侧20像素的位置。

1.2 Positioned的工作原理

Positioned的工作原理基于相对定位：

1. Positioned必须作为Stack的直接子组件
2. Positioned通过left、top、right、bottom属性指定子组件相对于Stack边界的距离
3. 如果同时设置了left和right，子组件的宽度由这两个值决定
4. 如果同时设置了top和bottom，子组件的高度由这两个值决定

1.3 Positioned的应用场景

Positioned适用于以下场景：

• 浮动按钮（FloatingActionButton）
• 徽章标记（Badge）
• 图片上的文字叠加
• 自定义对话框
• 多层级卡片效果

二、Positioned核心属性

2.1 left属性

left属性用于指定子组件距离Stack左边界的距离：

Positioned(left:20,child:Container(width:50,height:50,color:Colors.red),)

2.2 top属性

top属性用于指定子组件距离Stack上边界的距离：

Positioned(top:20,child:Container(width:50,height:50,color:Colors.red),)

2.3 right属性

right属性用于指定子组件距离Stack右边界的距离：

Positioned(right:20,child:Container(width:50,height:50,color:Colors.red),)

2.4 bottom属性

bottom属性用于指定子组件距离Stack下边界的距离：

Positioned(bottom:20,child:Container(width:50,height:50,color:Colors.red),)

2.5 width属性

width属性用于指定子组件的宽度：

Positioned(left:20,top:20,width:100,child:Container(height:50,color:Colors.red),)

2.6 height属性

height属性用于指定子组件的高度：

Positioned(left:20,top:20,height:100,child:Container(width:50,color:Colors.red),)

三、四个方向定位

3.1 同时设置四个方向

Stack(children:[Container(width:300,height:200,color:Colors.grey[200]),Positioned(top:10,left:10,right:10,bottom:10,child:Container(color:Colors.blue,child:constCenter(child:Text('填满内部'))),),],)

在这个例子中，蓝色容器会填满灰色容器内部，四周各留10像素的边距。

3.2 设置左右和高度

Stack(children:[Container(width:300,height:200,color:Colors.grey[200]),Positioned(left:20,right:20,height:50,child:Container(color:Colors.blue),),],)

3.3 设置上下和宽度

Stack(children:[Container(width:300,height:200,color:Colors.grey[200]),Positioned(top:20,bottom:20,width:50,child:Container(color:Colors.blue),),],)

四、Positioned.fill

4.1 Positioned.fill的作用

Positioned.fill()是一个便捷构造函数，用于创建一个填满整个Stack的Positioned组件。它等同于同时设置left: 0, top: 0, right: 0, bottom: 0。

Stack(children:[Container(width:300,height:200,color:Colors.grey[200]),Positioned.fill(child:Container(color:Colors.blue.withOpacity(0.5)),),constCenter(child:Text('Positioned.fill')),],)

4.2 Positioned.fill与StackFit.expand对比

// 使用Positioned.fillStack(children:[Positioned.fill(child:Container(color:Colors.blue)),],)// 使用StackFit.expandStack(fit:StackFit.expand,children:[Container(color:Colors.blue),],)

两者的效果类似，但Positioned.fill更加灵活，可以只对特定子组件生效。

4.3 Positioned.fill的实际应用

Stack(children:[Container(width:double.infinity,height:200,decoration:BoxDecoration(image:DecorationImage(image:NetworkImage('https://picsum.photos/400/200'),fit:BoxFit.cover,),),),Positioned.fill(child:Container(color:Colors.black38),),constCenter(child:Text('图片上的文字',style:TextStyle(color:Colors.white,fontSize:24))),],)

五、实际应用：待办事项界面

5.1 浮动按钮布局

Container(height:200,color:Colors.grey[100],child:Stack(children:[constCenter(child:Text('列表内容区域')),Positioned(bottom:20,right:20,child:FloatingActionButton(onPressed:(){},child:constIcon(Icons.add),),),],),)

5.2 徽章标记布局

Stack(children:[Icon(Icons.favorite,size:48,color:Colors.red),Positioned(top:-4,right:-4,child:Container(width:24,height:24,decoration:BoxDecoration(color:Colors.yellow,borderRadius:BorderRadius.circular(12),border:Border.all(color:Colors.white,width:2),),child:constCenter(child:Text('5',style:TextStyle(fontSize:12,fontWeight:FontWeight.bold))),),),],)

5.3 图片卡片布局

Stack(children:[Container(width:double.infinity,height:150,decoration:BoxDecoration(borderRadius:BorderRadius.circular(8),image:constDecorationImage(image:NetworkImage('https://picsum.photos/400/200'),fit:BoxFit.cover,),),),Positioned(top:8,left:8,child:Container(padding:EdgeInsets.symmetric(horizontal:8,vertical:4),decoration:BoxDecoration(color:Colors.blue,borderRadius:BorderRadius.circular(4),),child:constText('热门',style:TextStyle(color:Colors.white,fontSize:12)),),),Positioned(bottom:0,left:0,right:0,child:Container(padding:EdgeInsets.all(12),decoration:BoxDecoration(color:Colors.black54,borderRadius:BorderRadius.only(bottomLeft:Radius.circular(8),bottomRight:Radius.circular(8)),),child:constText('待办事项标题',style:TextStyle(color:Colors.white,fontSize:16)),),),],)

5.4 待办卡片布局

Stack(children:[Container(margin:EdgeInsets.all(16),padding:EdgeInsets.all(16),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(12),boxShadow:[BoxShadow(color:Colors.black12,offset:Offset(0,4),blurRadius:8,),],),child:Column(children:[Row(children:[Checkbox(value:false,onChanged:null),SizedBox(width:12),Expanded(child:Text("学习Flutter布局")),],),SizedBox(height:8),Text("掌握Positioned组件的使用",style:TextStyle(color:Colors.grey)),],),),Positioned(top:20,right:20,child:Container(width:8,height:8,decoration:BoxDecoration(color:Colors.red,borderRadius:BorderRadius.circular(4),),),),],)

六、Positioned与其他组件对比

6.1 Positioned vs Align

6.2 Positioned vs Container的alignment

七、常见问题与解决方案

7.1 问题1：Positioned报错

问题描述：使用Positioned后出现编译错误。

解决方案：确保Positioned在Stack中使用：

// 错误：Positioned不在Stack中Container(child:Positioned(child:Text("内容")),)// 正确：Positioned在Stack中Stack(children:[Positioned(child:Text("内容")),],)

7.2 问题2：Positioned位置不对

问题描述：Positioned的位置不符合预期。

解决方案：检查定位属性的设置：

// 确保设置了正确的定位属性Positioned(top:20,// 上边距left:20,// 左边距// right: 20, // 右边距（可选）// bottom: 20, // 下边距（可选）child:Container(width:50,height:50,color:Colors.red),)

7.3 问题3：Positioned尺寸不符合预期

问题描述：Positioned的尺寸不是预期的大小。

解决方案：检查是否设置了width/height属性或同时设置了左右/上下：

// 方案1：设置width和heightPositioned(top:20,left:20,width:100,height:50,child:Container(color:Colors.red),)// 方案2：同时设置左右（自动计算宽度）Positioned(top:20,left:20,right:20,height:50,child:Container(color:Colors.red),)

7.4 问题4：Positioned超出Stack边界

问题描述：Positioned超出Stack边界被裁剪。

解决方案：设置Stack的overflow为Overflow.visible：

Stack(overflow:Overflow.visible,children:[Container(width:200,height:200,color:Colors.grey[200]),Positioned(top:-20,right:-20,child:Container(width:50,height:50,color:Colors.red),),],)

八、性能优化建议

8.1 使用const构造函数

constPositioned(top:20,left:20,child:constContainer(color:Colors.red),)

8.2 避免不必要的Positioned嵌套

// 不推荐：多余的嵌套Positioned(top:20,child:Positioned(left:20,child:Container(color:Colors.red)),)// 推荐：合并为一个PositionedPositioned(top:20,left:20,child:Container(color:Colors.red),)

8.3 合理使用Positioned.fill

当需要填满整个Stack时，优先使用Positioned.fill：

// 推荐：使用Positioned.fillPositioned.fill(child:Container(color:Colors.blue))// 不推荐：手动设置四个方向Positioned(top:0,left:0,right:0,bottom:0,child:Container(color:Colors.blue),)

九、总结

通过本文的学习，我们掌握了以下核心知识点：

1. Positioned用于在Stack中精确定位子组件，必须作为Stack的直接子组件
2. Positioned提供了left、top、right、bottom属性，用于指定子组件相对于Stack边界的距离
3. Positioned提供了width和height属性，用于指定子组件的尺寸
4. 同时设置left和right会自动计算宽度，同时设置top和bottom会自动计算高度
5. Positioned.fill是一个便捷构造函数，用于创建填满整个Stack的Positioned组件
6. Positioned与Stack配合使用，可以实现各种复杂的UI效果

Positioned是Flutter开发中非常重要的组件，掌握它的使用是构建精美UI的关键。在实际开发中，它常与Stack、Container等组件配合使用，构建出各种复杂的布局效果。

参考资料

1. Flutter官方文档：https://docs.flutter.dev/
2. Positioned组件API文档：https://api.flutter.dev/flutter/widgets/Positioned-class.html
3. Stack组件API文档：https://api.flutter.dev/flutter/widgets/Stack-class.html