Flutter - 组件介绍

正如我们在前一章中学到的，widgets 是 Flutter 框架中的一切。我们已经在前几章中学习了如何创建新的 widgets。

在本章中，让我们了解创建 widgets 背后的实际概念，以及 Flutter 框架中可用的不同类型的 widgets。

让我们检查 Hello World 应用程序中的 MyHomePage widget。此目的的代码如下所示 −

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

现在让我们详细讨论它们。

平台特定 widgets

Flutter 提供了特定于特定平台的 widgets - Android 或 iOS。

Android 特定 widgets 按照 Android OS 的 Material design guideline 设计。Android 特定 widgets 被称为 Material widgets。

iOS 特定 widgets 按照 Apple 的 Human Interface Guidelines 设计，它们被称为 Cupertino widgets。

一些最常用的 material widgets 如下 −

• Scaffold
• AppBar
• BottomNavigationBar
• TabBar
• TabBarView
• ListTile
• RaisedButton
• FloatingActionButton
• FlatButton
• IconButton
• DropdownButton
• PopupMenuButton
• ButtonBar
• TextField
• Checkbox
• Radio
• Switch
• Slider
• Date & Time Pickers
• SimpleDialog
• AlertDialog

一些最常用的 Cupertino widgets 如下 −

• CupertinoButton
• CupertinoPicker
• CupertinoDatePicker
• CupertinoTimerPicker
• CupertinoNavigationBar
• CupertinoTabBar
• CupertinoTabScaffold
• CupertinoTabView
• CupertinoTextField
• CupertinoDialog
• CupertinoDialogAction
• CupertinoFullscreenDialogTransition
• CupertinoPageScaffold
• CupertinoPageTransition
• CupertinoActionSheet
• CupertinoActivityIndicator
• CupertinoAlertDialog
• CupertinoPopupSurface
• CupertinoSlider

布局 widgets

在 Flutter 中，可以通过组合一个或多个 widgets 来创建 widget。为了将多个 widgets 组合成单个 widget，Flutter 提供了大量具有布局功能的 widgets。例如，可以使用 Center widget 将子 widget 居中。

一些流行的布局 widgets 如下 −

• Container − 使用 BoxDecoration widgets 装饰的矩形盒子，具有背景、边框和阴影。

• Center − 将其子 widget 居中。

• Row − 将其子元素沿水平方向排列。

• Column − 将其子元素沿垂直方向排列。

• Stack − 将一个叠放在另一个之上。

我们将在即将到来的 Introduction to layout widgets 章节中详细介绍布局 widgets。

状态维护 widgets

在 Flutter 中，所有 widgets 要么派生自 StatelessWidget，要么派生自 StatefulWidget。

派生自 StatelessWidget 的 widget 不包含任何状态信息，但它可能包含派生自 StatefulWidget 的 widget。应用程序的动态特性来自于 widgets 的交互行为以及交互期间的状态变化。例如，点击计数器按钮会将计数器的内部状态增加/减少 1，Flutter widget 的响应式特性会使用新的状态信息自动重新渲染 widget。

我们将在即将到来的 State management chapter 中详细学习 StatefulWidget widgets 的概念。

平台无关 / 基础 widgets

Flutter 提供了大量基础 widgets，以平台无关的方式创建简单或复杂的用户界面。在本章节中，我们将介绍一些基础 widgets。

Text

Text widget 用于显示一段字符串。可以通过 style 属性和 TextStyle class 设置字符串的样式。用于此目的的示例代码如下 −

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

Text widget 有一个特殊的构造函数 Text.rich，它接受 TextSpan 类型的子元素，以指定具有不同样式的字符串。TextSpan widget 具有递归特性，它接受 TextSpan 作为其子元素。用于此目的的示例代码如下 −

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Text widget 最重要的属性如下 −

• maxLines, int − 要显示的最大行数

• overflow, TextOverFlow − 使用 TextOverFlow class 指定如何处理视觉溢出

• style, TextStyle − 使用 TextStyle class 指定字符串样式

• textAlign, TextAlign − 文本对齐方式，如右对齐、左对齐、两端对齐等，使用 TextAlign class

• textDirection, TextDirection − 文本流动方向，左到右或右到左

Image

Image widget 用于在应用程序中显示图像。Image widget 提供了不同的构造函数来从多个源加载图像，它们如下 −

• 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')

• MyHomePage widget 的完整源代码以及结果如下所示 −。

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")),
      ); 
   }
}

加载的图像如下所示 −

Image widget 最重要的属性如下 −

• image, ImageProvider − 要加载的实际图像

• width, double − 图像宽度

• height, double − 图像高度

• alignment, AlignmentGeometry − 图像在其边界内的对齐方式

Icon

Icon widget 用于显示 IconData class 中描述的字体中的字形。加载简单邮件图标的代码如下 −

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)),
      );
   }
}

加载的图标如下所示 −