目标· 理解 Flutter 布局核心口诀父传约束子定尺寸父定位置。· 分清 Row / Column 的主轴与交叉轴掌握 mainAxisAlignment 和 crossAxisAlignment。· 掌握 Container、Padding、SizedBox、Expanded、Spacer 的用途。· 能组合实现个人信息行、上中下布局、商品卡片、音乐播放器。· 能识别并修复 RenderFlex overflowed 溢出错误。· 通过“题目要求 → 答案 → 答案解读”的多元化习题完成练中学。一、本课核心概念速览Flutter 布局口诀父传约束子定尺寸父定位置。常用布局 WidgetWidget 作用Row 水平排列Column 垂直排列Container 盒子尺寸、颜色、边距、圆角、对齐Padding 内边距Margin 外边距通常用 Container 的 marginExpanded 按比例占满剩余空间Flexible 灵活占空间可松可紧Spacer 占剩余空间做间隔SizedBox 固定宽高或间距Align / Center 对齐 / 居中MainAxisAlignment 主轴对齐CrossAxisAlignment 交叉轴对齐Row 的主轴是水平交叉轴是垂直。Column 的主轴是垂直交叉轴是水平。二、最小可运行示例把 lib/main.dart 改成importpackage:flutter/material.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(body:Center(child:Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:const[Text(左),Text(中),Text(右),],),),),);}}按 r 热重载把 spaceEvenly 改成 spaceBetween、center、end观察变化。三、多元化习题练习0热重载体验布局题目要求运行上面的 Row 示例依次把 mainAxisAlignment 改成· MainAxisAlignment.start· MainAxisAlignment.center· MainAxisAlignment.end· MainAxisAlignment.spaceBetween· MainAxisAlignment.spaceAround· MainAxisAlignment.spaceEvenly记录每个值的效果。答案Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:const[Text(左),Text(中),Text(右),],)各值效果· start靠左。· center整体居中。· end靠右。· spaceBetween两端贴边中间等距。· spaceAround每个子项两侧等距。· spaceEvenly所有间隔完全相等包括两端。答案解读mainAxisAlignment 控制主轴方向的对齐。Row 的主轴是水平所以这些值控制水平分布。Column 的主轴是垂直同样的值会控制垂直分布。热重载可以立刻看到差异是练布局最快的方式。练习1选择题题目要求在 Column 中crossAxisAlignment 控制的是哪个方向A. 垂直方向B. 水平方向C. 文字颜色D. 内外边距答案B。答案解读Column 的主轴是垂直交叉轴是水平。所以 mainAxisAlignment 控制垂直对齐crossAxisAlignment 控制水平对齐。Row 刚好相反。练习2判断题题目要求判断对错并说明理由Expanded 必须直接放在 Row、Column 或 Flex 的子级中。Container 的 padding 是外边距margin 是内边距。Spacer 可以用在 Row 和 Column 中。SizedBox 只能用来显示文字。答案对。错。对。错。答案解读Expanded 依赖 Flex 父级分配剩余空间所以不能随便放在普通 Container 里。padding 是内边距margin 是外边距。Spacer 本质是 Expanded(child: SizedBox())可用在 Row/Column。SizedBox 是尺寸盒子常用于占位和间距不显示文字。练习3连线题题目要求将左侧 Widget 与右侧作用连线左侧 右侧mainAxisAlignment 交叉轴对齐crossAxisAlignment 主轴对齐Expanded 固定尺寸或间距Spacer 按比例占剩余空间SizedBox 占剩余空间形成间隔Padding 内边距答案· mainAxisAlignment — 主轴对齐· crossAxisAlignment — 交叉轴对齐· Expanded — 按比例占剩余空间· Spacer — 占剩余空间形成间隔· SizedBox — 固定尺寸或间距· Padding — 内边距答案解读这些是布局系统最常用的成员。先分清主轴和交叉轴再理解剩余空间怎么分配布局就不容易乱。练习4排序题题目要求实现“页面居中显示一个圆角盒子盒子里有内边距文字居中”。按从外到内的嵌套顺序排列Text、Center、Container、Padding答案Center → Container → Padding → Text答案解读Center 负责整体居中Container 负责尺寸、颜色、圆角Padding 负责文字与盒子边缘的距离Text 是最内层内容。实际开发中Container 自带 padding也可以省掉单独的 Padding。练习5填空题题目要求补全代码让三个文字“左、中、右”分别贴在两端和中间Row(mainAxisAlignment:______,children:const[Text(左),Text(中),Text(右),],)答案Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:const[Text(左),Text(中),Text(右),],)答案解读spaceBetween 会把第一个和最后一个推到两端中间的子项等距分布。做顶部栏、底部栏、左右分布时非常常用。练习6代码预测题题目要求阅读代码预测屏幕显示效果body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:const[Text(上),SizedBox(height:20),Text(下),],),)答案“上”和“下”垂直排列整体在屏幕中间两者之间有 20 像素间距。答案解读Center 让 Column 在页面居中。Column 的 mainAxisAlignment.center 让子项在垂直方向整体居中。SizedBox(height: 20) 提供固定垂直间距。练习7改错题题目要求下面代码会导致布局溢出找出来并修正Row(children:const[Text(这是一段非常非常长的文字可能会撑爆屏幕),Text(这也是一段非常非常长的文字也可能撑爆屏幕),],)答案修正方式之一Row(children:const[Expanded(child:Text(这是一段非常非常长的文字可能会撑爆屏幕,overflow:TextOverflow.ellipsis,),),Expanded(child:Text(这也是一段非常非常长的文字也可能撑爆屏幕,overflow:TextOverflow.ellipsis,),),],)答案解读Row 主轴方向给子项无限宽度约束长文字会按自身宽度撑开超出屏幕就报 RenderFlex overflowed。用 Expanded 让文字按剩余空间分配宽度再用 overflow: TextOverflow.ellipsis 显示省略号。这是实际开发中最常见的布局修复之一。练习8补全代码题题目要求补全代码做一个 120×60 的蓝色圆角盒子内部有 12 内边距外边距 8文字白色居中Container(width:120,height:60,padding:constEdgeInsets.all(______),margin:constEdgeInsets.all(______),decoration:BoxDecoration(color:Colors.blue,borderRadius:BorderRadius.circular(______),),alignment:Alignment.______,child:constText(按钮,style:TextStyle(color:Colors.white),),)答案Container(width:120,height:60,padding:constEdgeInsets.all(12),margin:constEdgeInsets.all(8),decoration:BoxDecoration(color:Colors.blue,borderRadius:BorderRadius.circular(12),),alignment:Alignment.center,child:constText(按钮,style:TextStyle(color:Colors.white),),)答案解读padding 是盒子内部留白margin 是盒子外部留白。BoxDecoration 用来设置背景色和圆角。alignment: Alignment.center 让 child 在盒子内居中。注意使用 decoration 时颜色要写在 BoxDecoration 里不能同时写 color。练习9动手编码题个人信息行题目要求用 Row 做一行个人信息左边一个圆形头像中间显示姓名和职业右边一个按钮。要求中间区域用 Expanded 包裹防止文字太长溢出。答案body:Center(child:Padding(padding:constEdgeInsets.all(16),child:Row(children:[Container(width:56,height:56,decoration:constBoxDecoration(color:Colors.blue,shape:BoxShape.circle,),alignment:Alignment.center,child:constText(张,style:TextStyle(color:Colors.white,fontSize:20),),),constSizedBox(width:12),constExpanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,mainAxisSize:MainAxisSize.min,children:[Text(张三,style:TextStyle(fontSize:18,fontWeight:FontWeight.bold),),SizedBox(height:4),Text(Flutter 开发者),],),),constSizedBox(width:12),ElevatedButton(onPressed:(){},child:constText(关注),),],),),)答案解读Row 水平排列头像、信息、按钮。中间用 Expanded 占剩余宽度避免长文字溢出。Column 的 crossAxisAlignment.start 让姓名和职业左对齐。mainAxisSize: MainAxisSize.min 让 Column 高度尽量小。圆形头像用 BoxShape.circle。练习10动手编码题上中下布局题目要求用 Column 和 Expanded 做上中下布局顶部固定高度 60中间占满剩余空间底部固定高度 60。三个区域用不同颜色区分。答案body:Column(children:[Container(height:60,color:Colors.blue,alignment:Alignment.center,child:constText(顶部,style:TextStyle(color:Colors.white)),),Expanded(child:Container(color:Colors.grey.shade200,alignment:Alignment.center,child:constText(中间占满剩余空间),),),Container(height:60,color:Colors.green,alignment:Alignment.center,child:constText(底部,style:TextStyle(color:Colors.white)),),],)答案解读Column 垂直排列。顶部和底部用固定高度中间用 Expanded 吃掉剩余高度。这是 App 页面最经典的骨架顶部栏 内容区 底部栏。练习11综合挑战商品卡片题目要求做一个商品卡片外层圆角阴影内部有内边距。左边一个商品图标中间显示商品名和描述右边显示价格和购买按钮。要求使用 Container、Padding、Row、Column、Expanded、SizedBox。答案body:Center(child:Container(margin:constEdgeInsets.all(16),padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(16),boxShadow:[BoxShadow(color:Colors.black.withOpacity(0.1),blurRadius:8,offset:constOffset(0,4),),],),child:Row(children:[Container(width:64,height:64,decoration:BoxDecoration(color:Colors.orange.shade100,borderRadius:BorderRadius.circular(12),),alignment:Alignment.center,child:constIcon(Icons.shopping_bag,color:Colors.orange,size:32),),constSizedBox(width:12),constExpanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,mainAxisSize:MainAxisSize.min,children:[Text(Flutter 实战课,style:TextStyle(fontSize:18,fontWeight:FontWeight.bold),),SizedBox(height:6),Text(从零开始练中学布局系统,style:TextStyle(color:Colors.grey),),],),),constSizedBox(width:12),Column(mainAxisSize:MainAxisSize.min,children:[constText(¥99,style:TextStyle(fontSize:18,color:Colors.red,fontWeight:FontWeight.bold,),),constSizedBox(height:8),ElevatedButton(onPressed:(){},child:constText(购买),),],),],),),)答案解读外层 Container 负责卡片边距、圆角、阴影。内部 Row 分三列图标、信息、价格按钮。中间信息列用 Expanded 占剩余宽度。右侧价格按钮用 Column 垂直排列。这个练习把本课大部分布局知识综合了起来。练习12开放式挑战音乐播放器界面题目要求用 Column、Expanded、Row、Container、Icon 设计一个简单的音乐播放器界面。要求· 顶部显示歌曲名· 中间 Expanded 区域显示专辑封面占位· 底部一排控制按钮上一首、播放、下一首。答案示例body:SafeArea(child:Column(children:[constPadding(padding:EdgeInsets.all(16),child:Text(正在播放练中学,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold),),),Expanded(child:Container(margin:constEdgeInsets.all(24),decoration:BoxDecoration(color:Colors.deepPurple.shade100,borderRadius:BorderRadius.circular(24),),alignment:Alignment.center,child:constIcon(Icons.music_note,size:80,color:Colors.deepPurple,),),),Padding(padding:constEdgeInsets.all(16),child:Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[IconButton(onPressed:(){},icon:constIcon(Icons.skip_previous,size:36),),IconButton(onPressed:(){},icon:constIcon(Icons.play_circle_fill,size:64),),IconButton(onPressed:(){},icon:constIcon(Icons.skip_next,size:36),),],),),],),)答案解读整体用 Column顶部标题、中间 Expanded 封面、底部控制栏。中间 Expanded 占满剩余空间。底部 Row 用 spaceEvenly 均匀排列按钮。开放题没有唯一答案重点是布局结构清晰、能运行、能热重载修改。练习13错误观察挑战题目要求故意制造一次 RenderFlex overflowed 错误在 Row 中放两个很长的 Text不要用 Expanded。运行后观察控制台错误记录关键错误词。答案示例错误代码Row(children:const[Text(这是一段非常非常非常非常非常非常非常长的文字),Text(这也是一段非常非常非常非常非常非常非常长的文字),],)控制台常见错误A RenderFlex overflowed by 123 pixels on the right.答案解读RenderFlex 是 Row/Column 的渲染对象。当子项总宽度超过可用宽度时就会溢出。右侧溢出会提示 on the rightColumn 溢出会提示 on the bottom。解决方法用 Expanded、Flexible、SingleChildScrollView 或 TextOverflow.ellipsis。学会看这个错误布局能力会提升很快。四、本课小结这一课你练了Row 和 Column 的主轴、交叉轴mainAxisAlignment 和 crossAxisAlignmentContainer、Padding、Margin、SizedBoxExpanded、Spacer 分配剩余空间用 Row/Column 组合出个人信息行、上中下布局、商品卡片、音乐播放器通过故意制造溢出学会看 RenderFlex overflowed 错误。下一课可以进入 滚动与列表ListView、SingleChildScrollView、GridView继续用“练中学”的方式做可滚动页面。