在本节中,无涯教程将学习窗口小部件的概念,如何创建它,以及Flutter框架中可用的不同类型。如果您熟悉React或Vue.js,那么很容易理解Flutter。
小部件彼此嵌套以构建应用程序。这意味着您的应用程序本身就是一个小部件,所有的方式也是小部件。例如,小部件可以显示某些东西,可以定义设计,可以处理交互等。
以下图像是小部件树的简单视觉表示。
无涯教程可以创建这样的Flutter小部件:
Class ImageWidget extends DateSswidget. { //Class Stuff }
hello world 示例
import 'package:flutter/material.dart'; class MyHomePage extends DateSswidget. { 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'), ), ); } }
无涯教程可以将Flutter小部件分为两类:
可见窗口小部件与用户输入和输出数据有关。这个小部件的一些重要类型是:
Text
Text窗口小部件包含屏幕上显示一些文本。无涯教程可以通过使用 textalign 属性对齐文本窗口小部件,而样式属性允许自定义包括font,font weight,font style,letter spacing,color等等。无涯教程可以将其用作以下代码片段。
new Text( 'Hello, Learnfk!', textAlign: TextAlign.center, style: new TextStyle(fontWeight: FontWeight.bold), )
Button
此窗口小部件允许您单击执行一些操作。Flutter不允许您直接使用Button小部件,相反,它提供一种像 flatputton 和 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属性用于更改它的突出数量。
Image
此窗口小部件包含可以从asset文件夹或直接从URL从多个源获取它的图像。它提供了许多用于加载图像的构造函数,如下所示:
要在项目中添加图像,您需要先在保留图像中创建assets文件夹,然后在 pubspec.yaml 文件中添加以下行。
assets: - assets/
现在,在DART文件中添加以下行。
Image.asset('assets/computer.png')
添加图像的完整源代码如下所示在 hello world 示例中显示。
class MyHomePage extends DateSswidget. { 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/computer.png'), ), ); } }
运行应用程序时,它将提供以下输出。
Icon
此小部件充当将图标存储在Flutter中的集合。以下代码更清楚地解释。
new Icon( Icons.add, size: 34.0, )
不可见小部件与小部件的布局和控制有关。它提供了控制小部件的实际行为以及它们将如何查看屏幕。这些小部件的一些重要类型是:
Column(列)
列窗口小部件是一种窗口小部件,可在垂直对齐方面布局所有子小部件。通过使用 mainaxisalignment 和 constraxisalignment 属性来提供小部件之间的间距。在这些属性中,主轴(main axis)是垂直轴,并且横轴(cross axis)是水平轴。
示例 - 以下代码片段垂直构造两个小部件元素。
new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( "VegElement", ), new Text( "Non-vegElement" ), ], ),
Row(行)
行窗口小部件类似于列窗口小部件,但它水平地构造窗口小部件而不是垂直。这里,主轴(main axis)是水平轴,横轴(cross axis)是垂直轴。
示例 - 以下代码片段水平构建两个小部件元素。
new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ new Text( "VegElement", ), new Text( "Non-vegElement" ), ], ),
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,浮动动作按钮(Floating Action Button),抽屉(Drawers)等。
Stack
它是必不可少的小部件,主要用于overlapping小部件,例如背景渐变上的按钮。
在Flutter中,主要有两种类型的小部件:
StatefulWidget具有状态信息。它主要包含两个类:状态对象和小部件。它是动态的,因为它可以在小部件生命周期内更改内部数据。该小部件没有build()方法。它具有createState()方法,该方法返回扩展Flutters状态类的类。 StatefulWidget的示例是Checkbox,Radio,Slider,InkWell,Form和TextField。
示例
class Car extends steelfulwidget. { 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 DateSswidget. { const MyStatelessCarWidget ({ Key key }) : super(key: key); @override Widget build(BuildContext context) { return Container(color: const Color(0x0xFEEFE)); } }
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)