Flutter 中的一切都是一个小部件【Flutter 专题 5】

2021 年 11 月 27 日
本文字数：3361 字
阅读完需：约 11 分钟

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

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

每当你要在 Flutter 中编写代码以构建任何东西时，它都会在一个小部件中。核心目的是用小部件构建应用程序。它描述了您的应用程序视图在当前配置和状态下的外观。当您对代码进行任何更改时，小部件会通过计算前一个和当前小部件的差异来重建其描述，以确定在应用程序 UI 中呈现的最小更改。

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

下图是小部件树的简单视觉表示。

我们可以像这样创建 Flutter 小部件：

Class ImageWidget extends StatelessWidget {           // Class Stuff  }

复制代码

Hello World 示例

// ignore_for_file: prefer_const_constructors, unnecessary_newimport 'dart:convert';import 'package:http/http.dart' as http;import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      theme: ThemeData(primaryColor: Colors.green.shade800),      home: MyHomePage(        title: "坚果",      ),    );  }}
class MyHomePage extends StatelessWidget {  const MyHomePage({required this.title});  // 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'),      ),    );  }}

复制代码

小部件的类型

我们可以将 Flutter 小部件分为两类：

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

可见小部件

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

Text

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

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

复制代码

TextButton

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

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

复制代码

在上面的例子中，onPressed 属性允许我们在你点击按钮时执行一个动作

Image

此小部件保存可以从多个来源（例如从资产文件夹或直接从 URL）获取图像的图像。它提供了许多用于加载图像的构造函数，如下所示：

Image：它是一个通用的图像加载器，由 ImageProvider 使用。
asset 它从您的项目资产文件夹加载图像。
**文件**它从系统文件夹加载图像。
**内存**它从内存加载图像。
网络它从网络加载图像。

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

assets:    - assets/

复制代码

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

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

复制代码

添加图像的完整源代码如下面的 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'),        ),      );    }  }

复制代码

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

Icon

这个小部件充当在 Flutter 中存储 Icon 的容器。下面的代码更清楚地解释了它。

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

复制代码

隐形小部件

隐形小部件与小部件的布局和控制有关。它提供控制小部件的实际行为方式以及它们在屏幕上的显示方式。这些小部件的一些重要类型是：

Column

列小部件是一种将其所有子部件垂直对齐的小部件。它通过使用 mainAxisAlignment 和 crossAxisAlignment 属性提供小部件之间的间距。在这些属性中，主轴是纵轴，横轴是横轴。

例子

下面的代码片段垂直构造两个小部件元素。

new Column(    mainAxisAlignment: MainAxisAlignment.center,    children: <Widget>[      new Text(        "坚果前端",      ),      new Text(        "坚果前端t"      ),    ],  ),

复制代码

Row

行小部件类似于列小部件，但它是水平而非垂直构造一个小部件。这里，主轴为横轴，横轴为纵轴。

例子

下面的代码片段水平构造了两个小部件元素。

new Row(    mainAxisAlignment: MainAxisAlignment.spaceEvenly,    children: <Widget>[      new Text(        "坚果前端",      ),      new Text(        "坚果前端"      ),    ],  ),

复制代码

Center

此小部件用于将位于其中的子小部件居中。前面的所有示例都包含在中心小部件内。

例子

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

复制代码

Padding

这个小部件包装其他小部件，为它们提供指定方向的填充。您还可以在所有方向上提供填充。我们可以从下面的示例中理解它，该示例在所有方向上为文本小部件提供了 6.0 的填充。

例子

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

复制代码

Scaffold

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

Stack

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

状态管理小部件

在 Flutter 中，widget 主要有两种类型：

StatelessWidget
StatefulWidget

有状态小部件

StatefulWidget 具有状态信息。它主要包含两个类：状态对象和小部件。它是动态的，因为它可以在小部件生命周期内更改内部数据。这个小部件没有**build()方法。它有 createState()**方法，该方法返回一个扩展 Flutters State Class 的类。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 没有任何状态信息。它在整个生命周期中保持静态。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));    }  }

复制代码

今天的分享就到这儿，大家如果还要需要了解的，可以关注我哦！

发布于: 8 小时前阅读数: 5

原文链接:【http://xie.infoq.cn/article/87a3474daa43e479fb6820f35】。

坚果前端

关注

此间若无火炬，我便是唯一的光 2020.10.25 加入

公众号：“坚果前端”，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

发布

暂无评论

创作场景

Flutter 中的一切都是一个小部件【Flutter 专题 5】

小部件的类型

可见小部件

隐形小部件

状态管理小部件

有状态小部件

无状态小部件

坚果前端

评论