Flutter项目开发实战（AI助学）课件 3Flutter组件与布局

Flutter组件与布局Flutter项目开发实战（AI助学）03Flutter+AI目录02基础组件03基础布局组件01组件概念05尺寸和位置组件04排版组件在Flutter中，组件（Widget）是构建用户界面的基本单元，是可复用的代码块。它将界面的外观、行为和逻辑封装在一起，具有高度独立性和可组合性。组件可以是简单的文本、按钮，也可以是复杂的列表、导航栏‍等。通过组合不同的组件，开发者能够快速搭建出丰富多样、功能强大的用户界面。组件分为有状态组件（StatefulWidget）和无状态组件（StatelessWidget），前者可以动态改变状态以更新界面，后者创建后状态保持不变。此外，Flutter提供了大量内置组件，开发者也可以自定义组件来满足特定需‍求。3.1组件概念3.1.1有状态组件有状态组件是指在运行过程中可以改变自身状态的组件。当组件的状态发生变化时，Flutter会自动重新构建该组件，以更新界面显示。在Dart代码中，有状态组件通常继承自StatefulWidget类，并且需要创建一个对应的State类来管理自身状‍态。例如，一个计数器组件，每次点击按钮时计数器的值会增加，该组件就需要使用有状态组件来实现，代码如‍下。import'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'有状态组件,theme:ThemeData(colorScheme:ColorScheme.fromSeed(seedColor:Colors.deepPurple),),home:constMyHomePage(title:'有状态组件示例'),);}}classMyHomePageextendsStatefulWidget{constMyHomePage({super.key,requiredthis.title});finalStringtitle;@overrideState<MyHomePage>createState()=>_MyHomePageState();}3.1.1有状态组件class_MyHomePageStateextendsState<MyHomePage>{int_counter=0;void_incrementCounter(){setState((){_counter++;});}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(backgroundColor:Theme.of(context).colorScheme.inversePrimary,title:Text(widget.title),),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:<Widget>[constText('Youhavepushedthebuttonthismanytimes:'),Text('$_counter',style:Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton:FloatingActionButton(onPressed:_incrementCounter,tooltip:'Increment',child:constIcon(Icons.add),),);}}图有状态组件的初始效果图有状态组件点击按钮后的效果3.1.2无状态组件无状态组件是指一旦创建后，其状态就不会再发生变化的组件。它的属性是不可变的，当界面需要更新时，通常会创建一个新的无状态组件实例来替换旧的实例。无状态组件继承自StatelessWidget类，常用于展示静态内‍容。例如，创建一个简单的文本展示组件，该组件显示一个包含“Hello,Flutter!”文本的卡片，代码如‍下。import'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(appBar:AppBar(title:constText('无状态组件示例')),body:constCenter(child:MyCard()),),);}}3.1.2无状态组件classMyCardextendsStatelessWidget{constMyCard({super.key});@overrideWidgetbuild(BuildContextcontext){returnCard(child:Padding(padding:constEdgeInsets.all(16.0),child:Text('Hello,Flutter!',style:Theme.of(context).textTheme.headlineMedium,),),);}}图无状态组件示例效果3.1.3组件的3种定义方式01基于函数的组件基于函数的组件也叫无状态函数组件（函数式组件），本质是一个返回Widget的函数。它适用于那些不需要维护状态，仅用于展示固定用户界面的场景。由于不需要状态管理，这类组件通常具有代码简洁、易于理解和维护的特‍点。例如，定义一个函数式组件，并在页面中显示“这是一个函数式组件”文本，代码如‍下。import'package:flutter/material.dart';//定义一个函数式组件WidgetmyTextWidget(){returnText('这是一个函数式组件',style:TextStyle(fontSize:20));}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext)=>MaterialApp(

home:Scaffold(appBar:AppBar(title:Text('函数式组件示例')),body:Center(child:myTextWidget()),),);}voidmain(){runApp(constMyApp());}图函数式组件示例效果3.1.3组件的3种定义方式02基于类的组件通过创建一个继承自StatelessWidget或StatefulWidget类的类来定义组件，如3.1.1小节的有状态组件和3.1.2小节的无状态组件的示例都属于基于类定义组件的方式。这种方式适用于创建复杂的、可复用的组‍件。03使用匿名函数定义组件在Flutter中，匿名函数是指没有函数名的函数表达式，也称为lambda表达式或闭包。其定义方式是使用“()”表示参数列表、“{}”包含函数体。当函数体只有一行代码时，可以使用箭头（=>）替代大括‍号。匿名函数通常用于需要临时定义简单函数且不需要为其命名的场景，如作为回调函数传递给其他函数或方‍法。3.1.3组件的3种定义方式图匿名函数组件示例效果import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('匿名函数组件示例')),body:Center(child:Text('这是一个匿名函数组件',style:TextStyle(fontSize:20))),),),);}例如，定义一个匿名函数组件，并在页面中显示“这是一个匿名函数组件”文本，代码如‍下。3.1.4组件的生命周期在Flutter中，组件的生命周期至关重要，它涵盖了组件从创建、使用到销毁的整个过程，理解Flutter组件的生命周期，有助于开发者合理管理组件的状态和资源，避免内存泄漏和不必要的性能开‍销。无状态组件的生命周期相对简单，主要围绕build()方法展开，因为该组件创建后状态不会发生变‍化。build()方法：无状态组件的核心方法。当需要构建组件UI时，该方法会被调用。它接收一个BuildContext参数，返回一个用于描述组件页面结构的Widget对象。当父组件重建或Flutter框架判定需要更新该组件时，build()方法会被重新调用。无状态组件的生命周期01有状态组件的生命周期较为复杂，涉及多个关键方法，可细分为创建、更新和销毁3个阶段，每个阶段调用的方法不‍同。有状态组件的生命周期023.1.4组件的生命周期（1）创建阶段createState()方法：在StatefulWidget类中定义，用于创建并返回一个State对象。该方法仅在组件初始化时调用一次。initState()方法：State类的一个重要生命周期方法。didChangeDependencies()方法：在initState()方法之后调用，当组件依赖的继承组件（InheritedWidget）发生变化时也会触发调用。（2）更新阶段build()方法：和无状态组件的build()方法类似，用于构建组件的UI。当状态发生变化、父组件重建或者依赖的InheritedWidget改变时，该方法会被调‍用。didUpdateWidget()方法：当StatefulWidget的配置发生变化时调用，如父组件传入的参数改变。（3）销毁阶段deactivate()方法：当State对象从Widget树（WidgetTree）中暂时移除时调用。该方法适用于执行临时性资源释放或状态保存操作，组件的状态仍可恢‍复。dispose()方法：当State对象被永久从Widget树中移除时调用，常用于释放资源，如取消定时器、移除监听器等。3.1.5组件的特点组件是Flutter框架中用于构建UI的可复用元素，可以是按钮、文本框、图像等。它们可以自由组合在一起，形成丰富多样的用户界面。Flutter提供了丰富的预定义组件，同时也支持自定义组件的开发，每个组件都有自己的属性和状态，并且可以对用户的输入做出响应，组件具有以下特‍点。可组合性组件可通过层级嵌套和模块化的方式组合，使小型、简单的组件构建为功能复杂的大型组‍件。010203可复用性组件可以在不同的地方重复使用，提高了代码的可维护性和重用‍性。独立性组件一般具有单一且明确的功能，就像汽车的各个零部件，每个组件只负责自己特定的任‍务。目录02基础组件03基础布局组件01组件概念05尺寸和位置组件04排版组件Flutter内置了一些基础组件，它们是构建丰富多样、高性能移动应用的基础。这些组件涵盖了多种类型。例如，Text组件用于显示文本内容，支持丰富的样式设置；Image组件能轻松加载本地或网络图片；Button系列组件提供了不同外观和交互效果的按钮，等等。3.2基础组件3.2.1文本组件（Text）图Text组件效果import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(body:Center(child:Text('Hello,Flutter!',style:TextStyle(fontSize:24,color:Colors.blue,fontWeight:FontWeight.bold,),),),),));}Text组件用于在页面上显示文本内容，可以设置文本的样式，如字体大小、颜色、样式‍等。例如，显示一段文本“Hello,Flutter!”，并将字体大小设置为“24”、颜色设置为蓝色，同时将字体设置为加粗，代码如‍下。3.2.2图片组件（Image）对于本地图片，需在pubspec.yaml文件中进行配置。将本地图片所在的路径配置好，Flutter才能正确找到本地的图片；之后可调用Image.asset()构造函数实现图片加载，第1个参数为图片路径，后面的参数可传入图片的属性，如宽度、高度‍等。例如，加载一张本地图片，同时设置图片的宽度为400像素、高度为400像素，代码如‍下。加载本地图片01import'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(appBar:AppBar(title:constText('Image组件示例')),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[//加载本地图片Image.asset('images/sample.jpg',width:400,height:400),],),),),);}}图Image组件加载本地图片效果3.2.2图片组件（Image）import'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(appBar:AppBar(title:constText('Image组件示例')),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,加载网络图片时，使用Iwork()构造函数，第1个参数为图片URL，第2个参数和第3个参数可设置图片的宽、高等属性；同时需要考虑网络状况和图片加载失败的情况，可通过errorBuilder()函数返回图片加载失败时显示的内‍容。例如，加载一张网络图片，同时设置图片的宽度为400像素、高度为400像素，当图片加载失败时使用Text组件展示一段文本，代码如‍下。加载网络图片023.2.2图片组件（Image）children:[//加载网络图片Iwork('',//随机生成一张图片width:400,height:400,errorBuilder:(context,error,stackTrace){returnconstText('图片加载失败');},),],),),),);}}图Image组件加载网络图片效果3.2.2图片组件（Image）Image.memory()方法用于显示内存中的图片数据，适用于处理从网络或其他途径获取的二进制图片数‍据。例如，加载一张内存中的图片，同时设置图片的宽度为400像素、高度为400像素，当图片加载失败时使用Text组件展示一段文本，代码如‍下。加载内存图片03import'package:flutter/material.dart';import'package:flutter/services.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(appBar:AppBar(title:constText('Image组件示例')),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[//加载内存图片FutureBuilder<Uint8List>(future:_loadImageData(),builder:(context,snapshot){if(snapshot.connectionState==ConnectionState.done){if(snapshot.hasData){returnImage.memory(snapshot.data!,width:400,height:400,);}else{returnconstText('图片数据加载失败');}}else{returnconstCircularProgressIndicator();}3.2.2图片组件（Image）},),],),),),);}}//模拟加载内存图片数据的方法Future<Uint8List>_loadImageData()async{finalByteDatadata=awaitrootBundle.load('assets/images/sample.jpg');returndata.buffer.asUint8List();}图

Image组件加载内存图片失败运行后，如果加载图片失败会在页面中显示“图片数据加载失败”的文本，如图所示。如果加载成功，页面中显示内存中的图片，同时会设置好图片的宽和高，如图所‍示。图

Image组件加载内存图片成功3.2.3图标组件（Icon）Icon组件用于显示图标，Flutter提供了丰富的图标库，用户也可以自定义图标。图标通常放置在按钮、导航栏、列表项等位置，以提供简洁的视觉提示，增强用户界面的可读性和易用‍性。Icon组件包含5个参数：第1个是Flutter内置的图标集，可通过Icons类来访问，如Icons.add、Icons.delete、Icons.favorite等；第2个参数用于指定图标的大小；第3个参数用于指定图标的颜色；第4个参数用于为图标提供语义化标签，这对于无障碍访问非常重要，屏幕阅读器会使用该标签来描述图标；第5个参数用于指定图标上文本的方向，通常在处理从右到左的语言时使用。3.2.3图标组件（Icon）Icon组件使用方法如‍下。例如：Icon(IconDataicon,{Key?key,double?size,Color?color,String?semanticLabel,TextDirection?textDirection,})import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('Icon组件示例')),body:Center(child:Icon(Icons.favorite,size:48.0,color:Colors.red),),),),);}图

Icon组件加载爱心图标3.2.4按钮组件（Button）ElevatedButton是一个带有阴影效果的按钮，通常用于强调主要操作。它包含onPressed、child、style（将在后文中进行介绍）等参数。其中，onPressed是一个回调函数，当按钮被点击时会触发该函数，如果将其设置为null，按钮将变为不可用状态；child用于定义按钮内部显示的内容，通常是一个Text组件，也可以是其他组件。使用方法如‍下。ElevatedButton（凸起按钮）01ElevatedButton(onPressed:(){//处理按钮点击事件print('凸起按钮被点击');},child:Text('点击我'),)3.2.4按钮组件（Button）TextButton(onPressed:(){print('文本按钮被点击');},child:Text('文本按钮'),)TextButton是一个没有阴影和背景的扁平按钮，通常用于次要操作，参数和ElevatedButton相同。使用方法如‍下。TextButton（文本按钮）02OutlinedButton是一个带有边框的按钮，视觉强调程度介于ElevatedButton和TextButton之间，参数和ElevatedButton相同。使用方法如‍下。OutlinedButton（边框按钮）03OutlinedButton(onPressed:(){print('边框按钮被点击');},child:Text('边框按钮'),)3.2.4按钮组件（Button）IconButton(icon:Icon(Icons.favorite),onPressed:(){print('图标按钮被点击');},)IconButton是一个只包含图标的按钮，通常用于工具栏或小操作区域，参数和ElevatedButton相同。使用方法如‍下。IconButton（图标按钮）04例如，分别使用ElevatedButton、TextButton、OutlinedButton和IconButton组件展示几种不同按钮的效果，代码如‍下。import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('Button组件示例')),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[ElevatedButton(onPressed:(){//处理按钮点击事件print('凸起按钮被点击');},child:Text('点击我'),),TextButton(onPressed:(){print('文本按钮被点击');},child:Text('文本按钮'),),3.2.4按钮组件（Button）OutlinedButton(onPressed:(){print('边框按钮被点击');},child:Text('边框按钮'),),IconButton(icon:Icon(Icons.favorite),onPressed:(){print('图标按钮被点击');},),],),),),),);}图几种不同的Button组件效果3.2.5输入框组件（TextField）使用TextField组件创建一个文本输入框，代码如‍下。基本用法01import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('TextField组件示例'),),body:Center(child:TextField(),),),));}图TextField组件创建文本输入框效果3.2.5输入框组件（TextField）import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('Text('TextField组件多行文本示例')),),body:Center(child:TextField(keyboardType:TextInputType.multiline,maxLines:3),),),));}TextField组件支持多种文本输入类型，可以通过keyboardType属性进行设置。当值设置为“TextInputType.text”时表示文本类型，此时在输入框中可以输入任意文本；当值设置为“TextInputType.number”时表示数值类型，此时在输入框中只能输入数字；当设置为“TextInputType.multiline”时表示多行文本，并可以通过maxLines属性控制行数，当maxLines属性值为“null”时，表示不限制行‍数。例如，使用TextField组件创建一个3行文本输入框，代码如‍下。设置文本输入类型02图TextField组件创建3行文本输入框效果3.2.5输入框组件（TextField）在创建输入框时可以传入decoration属性对输入框进行装饰，它的值使用InputDecoration来设置，InputDecoration是一个用于定义TextField外观（包括标签、占位符文本、前缀/后缀图标、错误文本等）的‍类。例如，使用InputDecoration定义文本输入框的图标、提示语、边框，边距和错误提示语等，代码如‍下。输入框装饰03import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('TextField组件装饰示例')),body:Center(child:TextField(decoration:InputDecoration(prefixIcon:Icon(Icons.person),suffixIcon:Icon(Icons.clear),hintText:'Enteryourname',errorText:'Thisfieldisrequired',contentPadding:EdgeInsets.all(8.0),border:OutlineInputBorder(),),),),),),);}图TextField组件装饰效果3.2.5输入框组件（TextField）import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('TextField组件监听变化')),body:Center(child:TextField(onSubmitted:(value){print('Submittedvalue:$value');},onChanged:(text){//内容改变的回调print('change$text');},onEditingComplete:(){print('editing');},),),),),);}TextField提供了多个监听文本输入状态的回调函数：onChanged()方法用于监听输入框内容变化，onEditingComplete()方法用于监听文本输入完成事件，onSubmitted()方法用于处理文本提交动作。代码如‍右侧。监听输入变化043.2.6表单组件（Form）Form组件是一种功能明确的组件，可用于对多个表单字段进行分组管理，支持表单验证和数据提交等操作。本小节从基本概念、常用属性、与表单字段的配合使用、表单验证与表单提交等方面系统介绍Form组件的功能与应‍用。Form组件是一个容器，它可以包含多个表单字段（如TextField、DropdownButtonFormField等）。通过Form组件，可以将这些表单字段组织在一起，统一管理它们的状态和验证逻辑。基本概念Form组件的常用属性有key和child，key属性表示类型为GlobalKey<FormState>，这是一个必需的属性。它用于标识表单，通过它可以访问表单的状态，如进行表单验证、重置表单等操‍作。常用属性Form组件通常与TextFormField等表单字段组件一起使用。TextFormField是TextField的一个特殊版本，它专门用于表单，支持验证功‍能。与表单字段的配合使用表单验证是Form组件的一个重要功能。可以通过TextFormField的validator属性来定义验证规则。Validator()是一个回调函数，它接收输入的文本作为参数，如果输入有效则返回null，否则返回一个字符串型的信息作为错误信‍息。表单验证与表单提交040302013.2.6表单组件（Form）import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('Form组件示例')),body:Form(key:GlobalKey<FormState>(),child:Column(children:[TextFormField(decoration:InputDecoration(labelText:'用户名')),TextFormField(decoration:InputDecoration(labelText:'密码'),obscureText:true,//展示成密码形式),],),),),),);}例如，创建一个表单，包含用户名和密码两个输入框，代码如‍下。图Form组件实现用户名和密码输入框3.2.6表单组件（Form）import'package:flutter/material.dart';voidmain(){finalformKey=GlobalKey<FormState>();String?email;runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('表单验证示例')),body:Form(key:formKey,child:Column(children:[TextFormField(decoration:InputDecoration(labelText:'邮箱'),validator:(value){if(value==null||value.isEmpty){return'请输入邮箱';}例如，创建一个表单，包含一个邮箱输入框和提交按钮，当点击提交按钮时会对输入框中的内容进行验证，如果没有填写或者填写的内容不符合要求，就会给出错误提示，代码如‍下。if(!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$',).hasMatch(value)){return'请输入有效的邮箱地址';}email=value;returnnull;},),ElevatedButton(onPressed:(){if(formKey.currentState!.validate()){print('表单验证通过，提交的邮箱是:$email');}},child:Text('提交'),),],),),),),);}3.2.6表单组件（Form）运行后，页面中显示邮箱输入框和提交按钮，当点击提交按钮时，调用formKey.currentState!.validate()方法来触发表单验证，验证通过或不通过时会显示不同内容，如图所‍示。图带验证的Form组件初始状态图Form组件实现用户名和密码输入框图

带验证的Form组件不输入内容提交时图带验证的Form组件输入正确格式的邮箱提交时目录02基础组件03基础布局组件01组件概念05尺寸和位置组件04排版组件基础布局是构建用户界面的结构骨架，用于控制组件的排列方式、空间分配和对齐方式，确保界面在不同屏幕尺寸和方向下保持合理的视觉效果。核心是利用Flutter的约束机制（父组件约束子组件的尺寸范围）和渲染逻辑（根据布局规则计算子组件的位置和尺寸），帮助开发者高效构建层次清晰、响应式的用户界‍面。3.3基础布局组件3.3.1容器布局组件（Container）import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('Container组件示例')),body:Container(margin:EdgeInsets.only(top:50.0,left:120.0),constraints:BoxConstraints.tightFor(width:200.0,height:150.0,),//卡片大小Container组件是一个常用的容器布局组件，它可以包含一个子组件，并支持设置容器的宽度、高度、颜色、边距及内边距等属‍性。例如，创建一个容器，显示文本“容器布局”，同时设置容器的宽高、边距、阴影和倾斜等属性，代码如‍下。decoration:BoxDecoration(//背景装饰gradient:RadialGradient(//背景径向渐变colors:[Colors.red,Colors.orange],center:Alignment.topLeft,radius:.98,),boxShadow:[//卡片阴影BoxShadow(color:Colors.black54,offset:Offset(2.0,2.0),blurRadius:4.0,),],),3.3.1容器布局组件（Container）transform:Matrix4.rotationZ(.2),//卡片倾斜变换alignment:Alignment.center,//卡片内文字居中child:Text(//卡片文字"容器布局",style:TextStyle(color:Colors.white,fontSize:40.0),),),),),);}图Container组件效果3.3.2网格布局组件（GridView）该函数用于创建具有固定列数的网格布局，有crossAxisCount和children两个参数，crossAxisCount为必需参数，用于指定每行的列数；children是包含所有子组件的列‍表。例如，使用GridView.count()函数创建一个九宫格布局，一行显示3个子组件，为每个子组件设置不同颜色的背景，代码如‍下。GridView.count()01import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('GridView组件示例')),body:GridView.count(crossAxisCount:3,//每行的列数children:List.generate(9,(index){returnContainer(color:Colors.primaries[index%Colors.primaries.length],child:Center(child:Text('Item$index')),);}),),),),);}图GridView.count()创建网格布局效果3.3.2网格布局组件（GridView）import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('GridView组件示例2')),body:GridView.extent(maxCrossAxisExtent:100,//子组件的最大宽度children:List.generate(9,(index){returnContainer(color:Colors.primaries[index%Colors.primaries.length],child:Center(child:Text('Item$index')),);}),),),),);}图GridView.extent()创建网格布局效果该函数用于创建子组件最大宽度固定的网格布局，列数会根据容器宽度和子组件最大宽度自动计算。该函数有maxCrossAxisExtent和children两个参数，maxCrossAxisExtent用于指定子组件的最大宽度，children是包含所有子组件的列‍表。例如，使用GridView.extent()函数创建一个包含9个子组件的布局，根据屏幕大小依次排开，为每个子组件设置不同颜色的背景，代码如‍下。GridView.extent()023.3.2网格布局组件（GridView）该函数用于动态生成大量子组件，它会根据需要动态创建子组件，以节省内存提高性能。该函数有gridDelegate、itemCount和itemBuilder这3个参数，gridDelegate是网格代理，用于控制子组件在GridView中的布局，类型是SliverGridDelegat，常用子类有SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent；itemCount是网格的item数量，若未指定，则默认有无穷多个item；itemBuilder是用于创建item的函‍数。例如，使用GridView.builder()函数创建一个包含20个子组件的布局，每行显示3个子组件，为每个子组件设置不同颜色的背景，代码如右侧。GridView.builder()03import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('GridView组件示例3')),body:GridView.builder(gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:3,//每行的列数crossAxisSpacing:10,//交叉轴方向的间距mainAxisSpacing:10,//主轴方向的间距),itemCount:20,//子组件的数量itemBuilder:(context,index){returnContainer(color:Colors.primaries[index%Colors.primaries.length],child:Center(child:Text('Item$index')),);},),),),);}3.3.2网格布局组件（GridView）import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('GridView组件示例4')),body:GridView.custom(gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:3,//每行的列数),childrenDelegate:SliverChildBuilderDelegate((context,index){returnContainer(color:Colors.primaries[index%Colors.primaries.length],child:Center(child:Text('Item$index')),);},childCount:20),),),),);}该函数比较灵活，允许完全自定义子组件的创建和布局。它有gridDelegate和childrenDelegate两个参数，gridDelegate和GridView.builder参数一样，用于控制网格的布局，类型是SliverGridDelegate,常用子类包括SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent；childrenDelegate用于自定义子组件的创建，这里使用SliverChildBuilderDelegate()动态创建子组‍件。例如，使用GridView.custom()函数创建一个包含20个子组件的布局，每行显示3个子组件，为每个子组件设置不同颜色的背景，代码如右则。GridView.custom()043.3.2网格布局组件（GridView）图GridView.builder()创建网格布局效果图GridView.custom()创建网格布局效果3.3.3列表布局组件（ListView）该函数适用于子组件数量较少且固定的情况，需要手动列出所有子组件，包含多个参数，详细说明如下所‍示。ListView()01ListView({//可滚动组件公共参数AxisscrollDirection=Axis.vertical,//滚动方向，可选值为Axis.vertical（垂直滚动，//默认值）和Axis.horizontal（水平滚动）boolreverse=false,//是否反转滚动方向，默认为false。当设置为true时，列表项会从相反//的方向开始排列和滚动ScrollController?controller,//用于控制列表的滚动位置，如滚动到指定位置、监听滚动事件等bool?primary,//是否将该列表作为当前页面的主要滚动视图。当设置为true时，会使用默认的滚动//控制器，并且在某些情况下会影响滚动行为。通常在有多个滚动视图时使用，默认为null，会根据情况自动判断ScrollPhysics?physics,//控制列表的滚动行为。常见的取值有AlwaysScrollableScrollPhysics()//（始终可以滚动）、NeverScrollableScrollPhysics()（禁止滚动）、BouncingScrollPhysics()（iOS//风格的弹性滚动效果）、ClampingScrollPhysics()（Android风格的滚动效果）EdgeInsetsGeometry?padding,//设置列表的内边‍距。

3.3.3列表布局组件（ListView）//ListView组件各个构造函数的共同参数double?itemExtent,Widget?prototypeItem,//列表项原型，后面解释boolshrinkWrap=false,//是否根据列表项的实际大小来确定列表的大小，默认为false。当设//置为true时，列表会根据内容自适应高度或宽度。通常在嵌套滚动场景中使用booladdAutomaticKeepAlives=true,booladdRepaintBoundaries=true,double?cacheExtent,//设置列表项的预加载区域大小，即超出可视区域提前加载的距离。适当设置//该值可以提高滚动的流畅性，但会增加内存开‍销。ClipclipBehavior,//指定列表项的裁剪行为。可选值有Clip.none（不裁剪）、Clip.hardEdge//（硬裁剪）、Clip.antiAlias（抗锯齿裁剪）、Clip.antiAliasWithSaveLayer（带保存层的抗锯齿裁剪）boolrestoreScrollOffset,//是否恢复滚动位置。当列表重新构建时，如果设置为true，会尝试恢//复之前的滚动位置

//子组件列表List<Widget>children=const<Widget>[],})3.3.3列表布局组件（ListView）import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('ListView组件示例2')),body:ListView.builder(itemCount:100,itemBuilder:(context,index){returnListTile(title:Text('Item$index'));},),),),);}该函数适合处理大量数据，它会根据需要动态创建列表项，避免一次性创建所有列表项，从而提高性能。主要包含itemCount和itemBuilder两个参数，itemCount用于指定列表项的总数；itemBuilder：是一个回调函数，用于创建每个列表项，它接收BuildContext和列表项的索引作为参‍数。例如，使用ListView.builder()函数创建一个包含100个子组件的列表布局，代码如‍下。ListView.builder()023.3.3列表布局组件（ListView）图ListView()创建列表布局效果图ListView.builder()创建列表布局效果3.3.3列表布局组件（ListView）与ListView.builder()类似，但ListView.separated()函数可以在列表项之间添加分隔线。主要包含itemCount、itemBuilder和separatorBuilder这3个参数，前两个参数和ListView.builder()中的一样，separatorBuilder是一个回调函数，用于创建列表项之间的分隔‍线。例如，使用ListView.separated()函数创建一个包含100个子组件的列表布局，代码如‍下。ListView.separated()03import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('ListView组件示例3')),body:ListView.separated(itemCount:100,itemBuilder:(context,index){returnListTile(title:Text('Item$index'));},separatorBuilder:(context,index){returnDivider();},),),),);}图ListView.separated()创建带分隔线的列表布局效果3.3.3列表布局组件（ListView）import'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text('ListView组件示例4')),body:ListView.custom(childrenDelegate:SliverChildBuilderDelegate((context,index){returnListTile(title:Text('Item$index'));},childCount:100),),),),);}ListView.custom()比较灵活，允许开发者完全自定义列表项的创建和管理，该函数有childCount和childrenDelegate两个参数，childCount表示创建的子组件数量，childrenDelegate需要使用SliverChildBuilderDelegate()方法返回子组件的内‍容。例如，使用ListView.custom()函数创建一个包含100个子组件的列表布局，代码如‍下。ListView.custom()04图ListView.custom()创建列表布局效果3.3.4表格布局组件（Table）基本概念Table组件用于将子组件排列成多行多列的表格形式，每个单元格可以放置任意类型的组件，表格的行数和列数由子组件的数量和布局规则决‍定。01参数说明Table组件包含children、columnWidths、defaultColumnWidth、textDirection、border、defaultVerticalAlignment和textBaseline等参数，详细参数说明如‍下。02使用方法在Table组件中通过children属性定义Table组件的表格布局，其值为数组类型；数组中使用TableRow()函数定义每一行，TableRow的children属性用于定义该行各单元格的内‍容。033.3.4表格布局组件（Table）Table({this.children=const<TableRow>[] //类型为List<TableRow>，是表格的行集合，每个TableRow包含多个单元格this.columnWidths, //类型为Map<int,TableColumnW