写点什么

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

作者:坚果前端
  • 2021 年 11 月 27 日
  • 本文字数:3361 字

    阅读完需:约 11 分钟

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

在本节中,我们将学习小部件的概念、如何创建它以及它们在 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 小部件分为两类:


  1. 可见(输出和输入)

  2. 隐形(布局和控制)

可见小部件

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


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
用户头像

坚果前端

关注

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

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

评论

发布
暂无评论
Flutter 中的一切都是一个小部件【Flutter专题5】