文章目录一、固定大小1、固定大小 推荐用法2、其它设置 固定大小 的组件3、固定大小用法总结二、自适应大小三、充满父容器四、百分比宽高参考文档 :Flutter 官方文档 : https://docs.flutter.dev/install/quick使用出现网络问题 , 参考 在中国网络环境下使用 Flutter 文档 ;Flutter 里 3 种最常用的尺寸设置 :固定大小 :写死宽高 ;自适应大小 :根据子组件内容自动撑开 ;填充父容器 :占满父容器宽度 / 高度 / 全屏 ;一、固定大小1、固定大小 推荐用法固定大小 :强制组件变成 固定的宽度和高度 ,不随父容器、子组件变化 ;最常用 :SizedBox、ConstrainedBox最轻量 :SizedBox , 推荐用法 ;最灵活 :ConstrainedBox推荐用法 :Flutter 官方 推荐 使用Container(width, height)或SizedBox(width, height)设置固定大小 ;如果只需要设置固定大小 ,首选 SizedBox 组件 ;SizedBox :只负责大小 / 间距 ( 最轻量 )Container :全能容器 ( 大小 背景 边距 对齐 装饰 边框 )// 方法1 : ContainerContainer(width:200,height:100,child:Text(固定大小),)// 方法2 : SizedBox ( 更轻量 )SizedBox(width:200,height:100,child:Text(固定大小),)2、其它设置 固定大小 的组件其它设置 固定大小 的组件 :ConstrainedBox 组件 强制固定大小 :给子组件设置固定 / 最大 / 最小宽高 ,该用法 等同于固定宽高 ,比 SizedBox 更灵活 ;ConstrainedBox(constraints:BoxConstraints(minWidth:100,maxWidth:100,minHeight:50,maxHeight:50,),child:Text(固定大小 100x50),)LimitedBox 组件 设置 受限固定大小 :在无约束环境 ( 如 ListView、Row ) 中设置固定大小 ;LimitedBox(maxWidth:100,maxHeight:50,child:Text(固定大小),)FractionallySizedBox 组件 设置 固定大小 :该组件是百分比布局组件 , 但配合父容器可以实现固定尺寸效果 ;Padding 间接设置固定大小 :Padding(padding:EdgeInsets.symmetric(horizontal:20),child:SizedBox(width:60),// 总宽度 60 20 20 100)Transform 变换组件 设置 固定大小 :Transform.scale(child:SizedBox(width:100,height:50,child:Text(固定大小),),)Align 组件 设置 固定大小 ;Align(widthFactor:1,heightFactor:1,child:SizedBox(width:100,height:50),)3、固定大小用法总结最推荐 : SizedBox 轻量版→ SizedBox.shrink () , 这是Flutter 官方推荐 固定大小组件 , 最轻量 ;SizedBox(width:100,height:50,child:Text(固定大小),)自定义固定大小 , 不推荐 , 操作很繁琐 ;classFixedSizeWidgetextendsStatelessWidget{finalWidgetchild;constFixedSizeWidget({requiredthis.child});overrideWidgetbuild(BuildContextcontext){returnUnconstrainedBox(child:SizedBox(width:100,height:50,child:child),);}}二、自适应大小自适应大小 :组件不设置宽高 , 自动被子组件内容撑开 ;不给父容器设置 width / height 即可 ;所有组件适用 :Container、Row、Column、Stack、Padding 几乎所有组件 都适用 该理论 ;Container(// 不写宽高自适应child:Text(我会自动撑开父容器),)SizedBox(// 不写宽高自适应child:Text(我自适应),)只设置 宽高 的 一边 , 另一边自适应 :Container(width:200,// 固定宽度// 不写 height → 高度自适应child:Text(高度会自动撑开),)Row / Column 主轴默认自适应 :Row(children:[Text(短文字),Text(长一点的文字),],)CrossAxisAlignment.stretch 让交叉轴填满 , 但主轴依然自适应 :Row(crossAxisAlignment:CrossAxisAlignment.stretch,children:[Text(我高度被撑开了)],)Wrap → 自带自适应 自动换行 :Wrap(children:[Chip(label:Text(标签1)),Chip(label:Text(标签2)),],)UnconstrainedBox → 取消父约束 , 让子组件自适应 :UnconstrainedBox(child:Text(我不受父容器限制 , 自适应大小),)IntrinsicWidth / IntrinsicHeight → 精准自适应内容固有尺寸 :IntrinsicWidth(child:Column(children:[Text(短),Text(比较长一点),],),)三、充满父容器宽高填充父容器 就是 让子组件 宽度 / 高度 / 全部 占满父容器 ;宽高设置 double.infinity ( 推荐用法 ) :Container自己 填充满 Container 的父容器 ;Container(width:double.infinity,// 宽度填满父容器height:double.infinity,// 高度填满父容器child:Text(填满父容器),)使用 FractionallySizedBox 百分比填充 组件 :设置 FractionallySizedBox 组件 填充满 FractionallySizedBox 的 父容器的宽高的 50% ;FractionallySizedBox(widthFactor:0.5,// 直接 父容器 50% 宽heightFactor:0.5,// 直接 父容器 50% 高child:Container(color:Colors.blue),)使用 Expanded / Flexible 组件 :用来 占满剩余空间 , 该用法只能在 Row/Column 中使用 ;Column(children:[Expanded(child:Container(child:Text(占满剩余空间)),),],)// 灵活填充Flexible(fit:FlexFit.tight,// 填充满child:Container(),)使用 Align widthFactor /heightFactor 组件 :子容器大小固定了 , 设置父容器的大小 子容器大小 ;Align(widthFactor:1,heightFactor:1,child:Container(),)四、百分比宽高Flutter 中 使用如下三种方法 设置 百分比宽高 :FractionallySizedBox 组件 ( 推荐用法 ) :通过 widthFactor 和 heightFactor 属性 设置相对父容器百分比 ,子组件宽高 父容器宽高 × 系数 ( 0~1 ) ;不设 factor → 撑满父容器 ( 等价于 1.0 )factor 1 → 超出父容器 ( 可用于溢出效果 )Container(width:300,height:200,color:Colors.grey[200],child:FractionallySizedBox(widthFactor:0.8,// 父宽的80%heightFactor:0.5,// 父高的50%child:Container(color:Colors.red),),)// 占满父容器FractionallySizedBox(widthFactor:1,heightFactor:1,child:xxx,)MediaQuery 获取屏幕宽高 :设置 相对屏幕百分比, 宽高 屏幕宽高 × 百分比 , 下面的代码是 屏幕宽 50% , 屏幕高 30% ;Widgetbuild(BuildContextcontext){finalscreenMediaQuery.of(context).size;returnContainer(width:screen.width*0.5,// 屏幕宽50%height:screen.height*0.3,// 屏幕高30%color:Colors.blue,);}// 屏幕宽度 100%Container(width:MediaQuery.of(context).size.width,child:xxx,)LayoutBuilder 设置 相对父容器约束百分比 :拿到父容器 约束 ( maxWidth/maxHeight ) 后计算百分比 , 适合 父容器动态宽高 , 又要精确百分比 ;Container(width:300,height:200,color:Colors.grey[200],child:LayoutBuilder(builder:(context,constraints){returnContainer(width:constraints.maxWidth*0.9,height:constraints.maxHeight*0.4,color:Colors.green,);},),)// 父容器 50%LayoutBuilder(builder:(_,c)Container(width:c.maxWidth*0.5,height:120,),)