Flutter - Widget 简介

正如我们在前面的章节中了解到的，小部件就是 Flutter 框架中的一切。我们已经在前面的章节中学习了如何创建新的小部件。

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

让我们检查一下Hello World应用程序的MyHomePage小部件。用于此目的的代码如下所示 -

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创建了一个新的小部件。

请注意，StatelessWidget仅需要在其派生类中实现一个方法构建。build方法通过BuildContext参数获取构建widget所需的上下文环境，并返回它构建的widget。

在代码中，我们使用title作为构造函数参数之一，并使用Key作为另一个参数。title用于显示标题，Key用于在构建环境中标识widget 。

这里，build方法调用Scaffold的build方法，Scaffold 又调用AppBar和Center的build方法来构建其用户界面。

最后，Center构建方法调用Text构建方法。

为了更好地理解，下面给出了相同的视觉表示 -

视觉表现

小部件构建可视化

在Flutter中，小部件可以根据其功能分为多个类别，如下所示 -

  • 平台特定的小部件
  • 布局小部件
  • 状态维护小部件
  • 平台独立/基本小部件

现在让我们详细讨论每一个。

平台特定的小部件

Flutter 具有特定于特定平台（Android 或 iOS）的小部件。

Android 特定的小部件是根据Android 操作系统的材料设计指南设计的。Android 特定的小部件称为Material 小部件。

iOS 特定的小部件是根据Apple 的人机界面指南设计的，它们被称为Cupertino小部件。

一些最常用的材质小部件如下 -

  • 脚手架
  • 应用栏
  • 底部导航栏
  • 标签栏
  • 标签栏视图
  • 列表图块
  • 凸起按钮
  • 浮动操作按钮
  • 平按钮
  • 图标按钮
  • 下拉按钮
  • 弹出菜单按钮
  • 按钮栏
  • 文本域
  • 复选框
  • 收音机
  • 转变
  • 滑块
  • 日期和时间选择器
  • 简单对话框
  • 警报对话框

一些最常用的库比蒂诺小部件如下 -

  • 库比蒂诺巴顿
  • 库比蒂诺挑选器
  • 库比蒂诺日期选择器
  • 库比蒂诺定时器选择器
  • 库比蒂诺导航栏
  • 库比蒂诺标签栏
  • 库比蒂诺Tab脚手架
  • 库比蒂诺选项卡视图
  • 库比蒂诺文本字段
  • 库比蒂诺对话
  • CupertinoDialog动作
  • 库比蒂诺全屏对话框过渡
  • 库比蒂诺页面脚手架
  • 库比蒂诺页面转换
  • 库比蒂诺行动表
  • 库比蒂诺活动指标
  • 库比蒂诺警报对话框
  • 库比蒂诺PopupSurface
  • 库比蒂诺滑块

布局小部件

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

一些流行的布局小部件如下 -

  • Container - 使用具有背景、边框和阴影的BoxDecoration小部件装饰的矩形框。

  • Center - 居中其子部件。

  • Row - 在水平方向排列其子项。

  • Column - 在垂直方向排列其子项。

  • Stack - 将一个排列在另一个之上。

我们将在即将到来的布局小部件简介章节中详细检查布局小部件。

状态维护小部件

在 Flutter 中，所有 widget 都派生自StatelessWidget或StatefulWidget。

从StatelessWidget派生的 Widget没有任何状态信息，但它可能包含从StatefulWidget派生的 Widget 。应用程序的动态本质是通过小部件的交互Behave以及交互过程中状态的变化来实现的。例如，点击计数器按钮将使计数器的内部状态增加/减少 1，Flutter小部件的反应性质将使用新的状态信息自动重新渲染小部件。

我们将在接下来的状态管理章节中详细学习StatefulWidget小部件的概念。

平台独立/基本小部件

Flutter提供了大量的基本小部件，以独立于平台的方式创建简单和复杂的用户界面。让我们看看本章中的一些基本小部件。

文本

文本小部件用于显示一段字符串。字符串的样式可以通过使用style属性和TextStyle类来设置。用于此目的的示例代码如下 -

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

文本小部件有一个特殊的构造函数Text.rich ，它接受TextSpan类型的子代来指定具有不同样式的字符串。TextSpan小部件本质上是递归的，它接受TextSpan作为其子项。用于此目的的示例代码如下 -

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

文本小部件最重要的属性如下 -

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

  • Overflow, TextOverFlow - 指定如何使用TextOverFlow类处理视觉溢出

  • style, TextStyle - 使用TextStyle类指定字符串的样式

  • textAlign, TextAlign - 使用TextAlign类进行文本对齐，如右对齐、左对齐、对齐等

  • textDirection, TextDirection - 文本流动的方向，从左到右或从右到左

图像

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

  • Image - 使用ImageProvider 的通用图像加载器

  • Image.asset - 从 flutter 项目的资产加载图像

  • Image.file - 从系统文件夹加载图像

  • Image.memory - 从内存加载图像

  • Image.Network - 从网络加载图像

在Flutter中加载和显示图像的最简单选项是将图像作为应用程序的资产并根据需要将其加载到小部件中。

  • 在项目文件夹中创建一个文件夹，assets 并放置必要的图像。

  • 在 pubspec.yaml 中指定资产，如下所示 -

flutter: 
   assets: 
      - assets/smiley.png

  • 现在，在应用程序中加载并显示图像。

Image.asset('assets/smiley.png')

  • hello world 应用程序的MyHomePage小部件的完整源代码和结果如下所示：

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

加载的图像如下所示 -

Hello World 应用程序输出

图像小部件最重要的属性如下 -

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

  • width, double - 图像的宽度

  • height, double - 图像的高度

  • alignment, AlignmentGeometry - 如何在其边界内对齐图像

图标

图标小部件用于显示IconData类中描述的字体的字形。加载简单电子邮件图标的代码如下 -

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

加载的图标如下所示 -

主页