Flutter 小部件

17 Mar 2025 | 5 分钟阅读

在本节中，我们将学习 Widget 的概念、如何创建 Widget 以及 Flutter 框架中可用的不同类型。我们之前已经了解到 Flutter 中的一切都是 Widget。

如果您熟悉 React 或 Vue.js，那么很容易理解 Flutter。

无论何时您要编写代码以在 Flutter 中构建任何内容，它都将在 Widget 内部。其中心目的是使用 Widget 构建应用程序。它描述了您的应用程序视图应如何通过其当前配置和状态呈现。当您对代码进行任何更改时，Widget 会通过计算先前和当前 Widget 的差异来重建其描述，以确定在应用程序 UI 中呈现的最小更改。

Widget 相互嵌套以构建应用程序。这意味着您应用程序的根本身就是一个 Widget，并且一直向下也是一个 Widget。例如，Widget 可以显示某些内容，可以定义设计，可以处理交互等。

下图是 Widget 树的简单可视化表示。

我们可以这样创建 Flutter Widget

Class ImageWidget extends StatelessWidget {
         // Class Stuff
}

Hello World 示例

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {  
  MyHomePage({Key key, this.title}) : super(key: key);  
  // This widget is the home page of your application.  
  final String title;  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text(this.title),  
      ),  
      body: Center(  
        child: Text('Hello World'),  
      ),  
    );  
  }  
}  

Widget 类型

我们可以将 Flutter Widget 分为两类

可见（输出和输入）
不可见（布局和控制）

可见 Widget

可见的 Widget 与用户输入和输出数据相关。此 Widget 的一些重要类型是

文本

Text Widget 包含一些文本以在屏幕上显示。我们可以使用 textAlign 属性对齐 Text Widget，而 style 属性允许自定义 Text，包括字体、字体粗细、字体样式、字母间距、颜色等等。我们可以像下面的代码片段一样使用它。

new Text(   
'Hello, Javatpoint!',   
textAlign: TextAlign.center,     
style: new TextStyle(fontWeight: FontWeight.bold), 
)

Button (按钮)

此 Widget 允许您在单击时执行某些操作。Flutter 不允许您直接使用 Button Widget；相反，它使用一种类型的按钮，例如 FlatButton 和 RaisedButton。我们可以像下面的代码片段一样使用它。

//FlatButton Example
new FlatButton(
  child: Text("Click here"),
  onPressed: () {
    // Do something here
  },
),

//RaisedButton Example
new RaisedButton(
  child: Text("Click here"),
  elevation: 5.0,
  onPressed: () {
    // Do something here
  },
),

在上面的例子中，onPressed 属性允许我们在单击按钮时执行一个动作，而 elevation 属性用于改变它突出程度。

图像

此 Widget 包含图像，可以从多个来源获取，例如从资源文件夹或直接从 URL 获取。它提供了许多用于加载图像的构造函数，如下所示

Image: 这是一个通用的图像加载器，由 ImageProvider 使用。
asset: 它从您的项目资源文件夹加载图像。
file: 它从系统文件夹加载图像。
memory: 它从内存加载图像。
network: 它从网络加载图像。

要将图像添加到项目中，您需要首先创建一个 assets 文件夹来保存您的图像，然后在 pubspec.yaml 文件中添加以下行。

assets:
  - assets/

现在，在 dart 文件中添加以下行。

下面在 hello world 示例中显示了添加图像的完整源代码。

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  // This widget is the home page of your application.
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
        child: Image.asset('assets/computer.png'),
      ),
    );
  }
}

当您运行该应用程序时，它将给出以下输出。

图标

此 Widget 充当 Flutter 中存储 Icon 的容器。以下代码更清楚地解释了它。

new Icon(
  Icons.add,
  size: 34.0,
)

不可见 Widget

不可见的 Widget 与 Widget 的布局和控制有关。它提供了控制 Widget 的实际行为以及它们在屏幕上的外观。这些 Widget 的一些重要类型是

列

Column Widget 是一种将所有子 Widget 垂直排列的 Widget。它通过使用 mainAxisAlignment 和 crossAxisAlignment 属性来提供 Widget 之间的间距。在这些属性中，主轴是垂直轴，而交叉轴是水平轴。

示例

下面的代码片段垂直构建两个 Widget 元素。

new Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    new Text(
      "VegElement",
    ),
    new Text(
      "Non-vegElement"
    ),
  ],
),

行

Row Widget 与 Column Widget 类似，但它水平构建 Widget，而不是垂直构建。在这里，主轴是水平轴，而交叉轴是垂直轴。

示例

下面的代码片段水平构建两个 Widget 元素。

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    new Text(
      "VegElement",
    ),
    new Text(
      "Non-vegElement"
    ),
  ],
),

中心

此 Widget 用于居中包含在其中的子 Widget。之前的所有示例都包含在 Center Widget 内部。

示例

Center(
  child: new clumn(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      new Text(
        "VegElement",
      ),
      new Text(
        "Non-vegElement"
      ),
    ],
  ),
),

填充 (Padding)

此 Widget 包装其他 Widget，以在指定方向上为它们提供填充。您也可以在所有方向上提供填充。我们可以从下面的示例中理解它，该示例在所有方向上为文本 Widget 提供 6.0 的填充。

示例

Padding(
  padding: const EdgeInsets.all(6.0),
  child: new Text(
    "Element 1",
  ),
),

Scaffold

此 Widget 提供了一个框架，允许您添加常见的材料设计元素，例如 AppBar、浮动操作按钮、抽屉等。

Stack

这是一个必不可少的 Widget，主要用于重叠一个 Widget，例如背景渐变上的按钮。

状态管理 Widget

在 Flutter 中，主要有两种类型的 Widget

StatelessWidget（无状态 Widget）
StatefulWidget（有状态 Widget）

StatefulWidget（有状态 Widget）

StatefulWidget 具有状态信息。它主要包含两个类：状态对象和 Widget。它是动态的，因为它可以在 Widget 的生命周期内更改内部数据。此 Widget 没有 build() 方法。它具有 createState() 方法，该方法返回一个扩展 Flutters State 类的类。StatefulWidget 的例子有 Checkbox、Radio、Slider、InkWell、Form 和 TextField。

示例

class Car extends StatefulWidget {
  const Car({ Key key, this.title }) : super(key: key); 

  @override
  _CarState createState() => _CarState();
}

class _CarState extends State<Car> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xFEEFE),
           child: Container(
            child: Container( //child: Container() )
        )
    );
  }
}

StatelessWidget（无状态 Widget）

StatelessWidget 没有任何状态信息。它在其整个生命周期中保持静态。StatelessWidget 的例子有 Text、Row、Column、Container 等。

示例

class MyStatelessCarWidget extends StatelessWidget {
  const MyStatelessCarWidget ({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0x0xFEEFE));
  }
}

下一个主题Flutter 布局

← 上一个下一个 →