重點是什(shén)麽?
Widgets 是用(yòng)于構建 U I的類.
Widgets 用(yòng)于布局和(hé) UI 元素.
通過簡單的 widget 來(lái)構建複雜(zá)的 widget
Flutter 布局機制的核心就是 widget。在 Flutter 中，幾乎所有東西都是一個 widget - 甚至布局模型都是 widget。您在 Flutter 應用(yòng)中看(kàn)到(dào)的圖像、圖标和(hé)文(wén)本都是 widget。 甚至你(nǐ)看(kàn)不到(dào)的東西也(yě)是 widget，例如行（row）、列（column）以及用(yòng)來(lái)排列、約束和(hé)對(duì)齊這(zhè)些(xiē)可見 widget 的網格（grid）。
您可以通過構建 widget 來(lái)構建更複雜(zá)的 widget。
注意: 本教程中的大(dà)多數屏幕截圖都是在debugPaintSizeEnabled爲 true 時(shí)顯示的，因此您可以看(kàn)到(dào)布局結構。 有關更多信息，請(qǐng)參閱可視(shì)化調試，這(zhè)是調試 Flutter Apps中的一節。
大(dà)部分應該看(kàn)起來(lái)應該像您所期望的，但(dàn)你(nǐ)可能(néng)想了(le)解一下(xià) Container（以粉紅(hóng)色顯示）。 Container 也(yě)是一個 widget，允許您自(zì)定義其子 widget。如果要添加填充，邊距，邊框或背景色，請(qǐng)使用(yòng) Container 來(lái)設置（譯者語：隻有容器有這(zhè)些(xiē)屬性）。
在這(zhè)個例子中，每個 Text 放(fàng)置在 Container 中以添加邊距。整個行也(yě)被放(fàng)置在容器中以在行的周圍添加填充。
本例 UI 中的其他(tā)部分也(yě)可以通過屬性來(lái)控制。使用(yòng)其 color 屬性設置圖标的顔色。使用(yòng) Text 的 style 屬性來(lái)設置字體，顔色，粗細等。列和(hé)行的屬性允許您指定他(tā)們的子項如何垂直或水(shuǐ)平對(duì)齊，以及應該占據多少空(kōng)間。
布局一個 widget
重點是什(shén)麽？
即使應用(yòng)程序本身也(yě)是一個 widget.
創建一個 widget 并将其添加到(dào)布局widget中是很(hěn)簡單的.
要在設備上(shàng)顯示 widget，請(qǐng)将布局 widget 添加到(dào) app widget 中。
使用(yòng) Scaffold 是最容易的，它是 Material Components 庫中的一個 widget，它提供了(le)一個默認 banner，背景顔色，并且具有添加 drawer，snack bar 和(hé)底部 sheet 的 API。
如果您願意，可以構建僅使用(yòng)标準 widget 庫中的 widget 來(lái)構建您的應用(yòng)程序
如何在 Flutter 中布局單個 widget ？本節介紹如何創建一個簡單的 widget 并将其顯示在屏幕上(shàng)。它還展示了(le)一個簡單的 Hello World 應用(yòng)程序的完整代碼。
在 Flutter 中，隻需幾個步驟即可在屏幕上(shàng)放(fàng)置文(wén)本，圖标或圖像。
選擇一個 widget 來(lái)保存該對(duì)象。根據您想要對(duì)齊或約束可見窗口小(xiǎo)部件的方式，從(cóng)各種布局 widget 中進行選擇， 因爲這(zhè)些(xiē)特性通常會(huì)傳遞到(dào)所包含的 widget 中。這(zhè)個例子使用(yòng) Center，它可以将内容水(shuǐ)平和(hé)垂直居中。
創建一個 widget 來(lái)容納可見對(duì)象注意：Flutter 應用(yòng)程序是用(yòng) Dart 語言編寫的。如果您了(le)解 Java 或類似的面向對(duì)象編程語言，Dart 會(huì)感到(dào)非常熟悉。 如果不了(le)解的話(huà)，你(nǐ)可以試試 DartPad 一個可以在任何浏覽器上(shàng)使用(yòng)的交互式 Dart playground。 Dart 語言之旅是一篇介紹 Dart 語言特性的概述。
例如，創建一個Text widget:
new Text('Hello World', style: new TextStyle(fontSize: 32.0))
創建一個 Image widget:
new Image.asset('images/myPic.jpg', fit: BoxFit.cover)
創建一個 Icon widget:
new Icon(Icons.star, color: Colors.red[500])
将可見 widget 添加到(dào)布局 widget。 所有布局 widget 都有一個 child 屬性（例如 Center 或 Container ），或者一個 children 屬性，如果他(tā)們需要一個 widget 列表（例如 Row，Column，ListView 或 Stack）。将 Text widget 添加到(dào) Center widget：
new Center(
child: new Text('Hello World', style: new TextStyle(fontSize: 32.0))
将布局 widget 添加到(dào)頁面。Flutter 應用(yòng)本身就是一個 widget，大(dà)部分 widget 都有一個 build() 方法。在應用(yòng)程序的 build 方法中創建會(huì)在設備上(shàng)顯示的 widget。 對(duì)于 Material 應用(yòng)程序，您可以将 Center widget 直接添加到(dào) body 屬性中。
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Text('Hello World', style: new TextStyle(fontSize: 32.0)),
),
);
}
}
Note：在設計(jì)用(yòng)戶界面時(shí)，您可以使用(yòng)标準 widget 庫中的 widget，也(yě)可以使用(yòng) Material Components 中的 widget。 您可以混合使用(yòng)兩個庫中的 widget，可以自(zì)定義現(xiàn)有的 widget，也(yě)可以構建一組自(zì)定義的 widget。對(duì)于非 Material 應用(yòng)程序，您可以将 Center widget 添加到(dào)應用(yòng)程序的 build() 方法中：
// 這(zhè)個App沒有使用(yòng)Material組件, 如Scaffold.
// 一般來(lái)說, app沒有使用(yòng)Scaffold的話(huà)，會(huì)有一個黑色的背景和(hé)一個默認爲黑色的文(wén)本顔色。
// 這(zhè)個app，将背景色改爲了(le)白(bái)色，并且将文(wén)本顔色改爲了(le)黑色以模仿Material app
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(color: Colors.white),
child: new Center(
child: new Text('Hello World',
textDirection: TextDirection.ltr,
style: new TextStyle(fontSize: 40.0, color: Colors.black87)),
),
);
}
}
請(qǐng)注意，默認情況下(xià)，非 Material 應用(yòng)程序不包含 AppBar，标題或背景顔色。 如果您想在非 Material 應用(yòng)程序中使用(yòng)這(zhè)些(xiē)功能(néng)，您必須自(zì)己構建它們。此應用(yòng)程序将背景顔色更改爲白(bái)色，将文(wén)本更改爲深灰色以模仿 Material 應用(yòng)程序。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發