在本节中，我们将学习小部件的概念、如何创建它以及它们在 Flutter 框架中可用的不同类型。我们之前已经了解到 Flutter 中的一切都是一个小部件。
如果你熟悉 React 或 Vue.js，那么很容易理解 Flutter。
每当你要在 Flutter 中编写代码以构建任何东西时，它都会在一个小部件中。核心目的是用小部件构建应用程序。它描述了您的应用程序视图在当前配置和状态下的外观。当您对代码进行任何更改时，小部件会通过计算前一个和当前小部件的差异来重建其描述，以确定在应用程序 UI 中呈现的最小更改。
小部件相互嵌套以构建应用程序。这意味着您的应用程序的根本身就是一个小部件，并且一直向下也是一个小部件。例如，一个小部件可以显示一些东西，可以定义设计，可以处理交互等。
下图是小部件树的简单视觉表示。
我们可以像这样创建 Flutter 小部件：
Class ImageWidget extends StatelessWidget { // Class Stuff }
复制代码
Hello World 示例
// ignore_for_file: prefer_const_constructors, unnecessary_new import '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'), ), ); } } @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 }, ), 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)); } }
复制代码
今天的分享就到这儿，大家如果还要需要了解的，可以关注我哦！
![[flutter专题]详解AppBar小部件](https://ucc.alicdn.com/pic/developer-ecology/a9027672869a462aa6fdc02de2d0a6bc.png?x-oss-process=image/resize,h_160,m_lfit)
