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