Flutter Widgets 怎么入门？新手如何快速上手 Widgets？

正如我们在前一章中学到的，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

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

平台特定 widgets

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

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

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

一些最常用的 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

一些最常用的Cupertinowidgets 如下 −

• 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。例如，可以使用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 的交互行为以及交互期间的状态变化。例如，点击计数器按钮会将计数器的内部状态增加/减少 1，Flutterwidget 的响应式特性会使用新的状态信息自动重新渲染 widget。

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

平台无关 / 基础 widgets

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

Text

Textwidget 用于显示一段字符串。可以通过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− 文本对齐方式，如右对齐、左对齐、两端对齐等，使用TextAlignclass

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

Image

Imagewidget 用于在应用程序中显示图像。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− 图像在其边界内的对齐方式

Icon

Iconwidget 用于显示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)), ); } }

加载的图标如下所示 −