- 入门教程
- 进阶教程
- 基本组件
《Flutter入门教程》 Flutter部件(Widgets)
在本节中，无涯教程将学习窗口小部件的概念，如何创建它，以及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小部件分为两类:
- Visible (可见，如:输出和输入)
- Invisible (不可见,如:布局)
可见小部件
可见窗口小部件与用户输入和输出数据有关。这个小部件的一些重要类型是:
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从多个源获取它的图像。它提供了许多用于加载图像的构造函数，如下所示:
- Image - 它是一个通用图像加载器，使用 imageprovider 加载。
- asset - 它从项目asset文件夹中加载图像。
- file - 它从系统文件夹加载图像。
- memory - 它从内存加载图像。
- network - 它加载来自网络的图像。
要在项目中添加图像，您需要先在保留图像中创建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中，主要有两种类型的小部件:
- StatelessWidget
- StatefulWidget
StatefulWidget.
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没有任何状态信息。它在其整个生命周期中保持静态。 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));
}
}
祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)
Spring Cloud 微服务项目实战 -〔姚秋辰（姚半仙）〕