正如我们在前一章中学到的widgets 是 Flutter 框架中的一切。我们已经在前几章中学习了如何创建新的 widgets。在本章中让我们了解创建 widgets 背后的实际概念以及Flutter框架中可用的不同类型的 widgets。让我们检查Hello World应用程序中的MyHomePagewidget。此目的的代码如下所示 −class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(this.title), ), body: Center(child: Text( Hello World,)), ); } }在这里我们通过扩展StatelessWidget创建了一个新的 widget。请注意StatelessWidget仅要求在其派生类中实现一个方法build。build方法通过BuildContext参数获取构建 widgets 所需的环境上下文并返回它构建的 widget。在代码中我们将title用作构造函数的一个参数并将Key用作另一个参数。title用于显示标题而Key用于在构建环境中标识 widget。在这里build方法调用了Scaffold的build方法该方法又调用了AppBar和Center的build方法来构建其用户界面。最后Center的 build 方法调用了Text的 build 方法。为了更好地理解以下给出了相同的视觉表示 −Widget 构建可视化在Flutter中widgets 可以根据其特性分为多个类别如下所示 −平台特定 widgets布局 widgets状态维护 widgets平台无关 / 基础 widgets现在让我们详细讨论它们。平台特定 widgetsFlutter 提供了特定于特定平台的 widgets - Android 或 iOS。Android 特定 widgets 按照 Android OS 的Material design guideline设计。Android 特定 widgets 被称为Material widgets。iOS 特定 widgets 按照 Apple 的Human Interface Guidelines设计它们被称为Cupertinowidgets。一些最常用的 material widgets 如下 −ScaffoldAppBarBottomNavigationBarTabBarTabBarViewListTileRaisedButtonFloatingActionButtonFlatButtonIconButtonDropdownButtonPopupMenuButtonButtonBarTextFieldCheckboxRadioSwitchSliderDate Time PickersSimpleDialogAlertDialog一些最常用的Cupertinowidgets 如下 −CupertinoButtonCupertinoPickerCupertinoDatePickerCupertinoTimerPickerCupertinoNavigationBarCupertinoTabBarCupertinoTabScaffoldCupertinoTabViewCupertinoTextFieldCupertinoDialogCupertinoDialogActionCupertinoFullscreenDialogTransitionCupertinoPageScaffoldCupertinoPageTransitionCupertinoActionSheetCupertinoActivityIndicatorCupertinoAlertDialogCupertinoPopupSurfaceCupertinoSlider布局 widgets在 Flutter 中可以通过组合一个或多个 widgets 来创建 widget。为了将多个 widgets 组合成单个 widgetFlutter提供了大量具有布局功能的 widgets。例如可以使用Centerwidget 将子 widget 居中。一些流行的布局 widgets 如下 −Container− 使用BoxDecorationwidgets 装饰的矩形盒子具有背景、边框和阴影。Center− 将其子 widget 居中。Row− 将其子元素沿水平方向排列。Column− 将其子元素沿垂直方向排列。Stack− 将一个叠放在另一个之上。我们将在即将到来的Introduction to layout widgets章节中详细介绍布局 widgets。状态维护 widgets在 Flutter 中所有 widgets 要么派生自StatelessWidget要么派生自StatefulWidget。派生自StatelessWidget的 widget 不包含任何状态信息但它可能包含派生自StatefulWidget的 widget。应用程序的动态特性来自于 widgets 的交互行为以及交互期间的状态变化。例如点击计数器按钮会将计数器的内部状态增加/减少 1Flutterwidget 的响应式特性会使用新的状态信息自动重新渲染 widget。我们将在即将到来的State management chapter中详细学习StatefulWidgetwidgets 的概念。平台无关 / 基础 widgetsFlutter提供了大量基础 widgets以平台无关的方式创建简单或复杂的用户界面。在本章节中我们将介绍一些基础 widgets。TextTextwidget 用于显示一段字符串。可以通过style属性和TextStyleclass 设置字符串的样式。用于此目的的示例代码如下 −Text(Hello World!, style: TextStyle(fontWeight: FontWeight.bold))Textwidget 有一个特殊的构造函数Text.rich它接受TextSpan类型的子元素以指定具有不同样式的字符串。TextSpanwidget 具有递归特性它接受TextSpan作为其子元素。用于此目的的示例代码如下 −Text.rich( TextSpan( children: TextSpan[ TextSpan(text: Hello , style: TextStyle(fontStyle: FontStyle.italic)), TextSpan(text: World, style: TextStyle(fontWeight: FontWeight.bold)), ], ), )Textwidget 最重要的属性如下 −maxLines, int− 要显示的最大行数overflow, TextOverFlow− 使用TextOverFlowclass 指定如何处理视觉溢出style, TextStyle− 使用TextStyleclass 指定字符串样式textAlign, TextAlign− 文本对齐方式如右对齐、左对齐、两端对齐等使用TextAlignclasstextDirection, TextDirection− 文本流动方向左到右或右到左ImageImagewidget 用于在应用程序中显示图像。Imagewidget 提供了不同的构造函数来从多个源加载图像它们如下 −Image− 使用ImageProvider的通用图像加载器Image.asset− 从 flutter 项目的 assets 加载图像Image.file− 从系统文件夹加载图像Image.memory− 从内存加载图像Image.Network− 从网络加载图像在Flutter中加载并显示图像的最简单方法是将图像作为应用程序的 assets 包含并在需要时加载到 widget 中。在项目文件夹中创建一个 assets 文件夹并放置必要的图像。在 pubspec.yaml 中指定 assets如下所示 −flutter: assets: - assets/smiley.png现在在应用程序中加载并显示图像。Image.asset(assets/smiley.png)MyHomePagewidget 的完整源代码以及结果如下所示 −。class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(this.title), ), body: Center( child: Image.asset(assets/smiley.png)), ); } }加载的图像如下所示 −Imagewidget 最重要的属性如下 −image, ImageProvider− 要加载的实际图像width, double− 图像宽度height, double− 图像高度alignment, AlignmentGeometry− 图像在其边界内的对齐方式IconIconwidget 用于显示IconDataclass 中描述的字体中的字形。加载简单邮件图标的代码如下 −Icon(Icons.email)将其应用于 hello world 应用程序的完整源代码如下 −class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(this.title),), body: Center( child: Icon(Icons.email)), ); } }加载的图标如下所示 −