Flutter 布局方法

重點是什么?

• Widgets 是用于構(gòu)建 U I的類.
• Widgets 用于布局和 UI 元素.
• 通過簡單的 widget 來構(gòu)建復雜的 widget

Flutter 布局機制的核心就是 widget。在 Flutter 中，幾乎所有東西都是一個 widget - 甚至布局模型都是 widget。您在 Flutter 應(yīng)用中看到的圖像、圖標和文本都是 widget。 甚至你看不到的東西也是 widget，例如行（row）、列（column）以及用來排列、約束和對齊這些可見 widget 的網(wǎng)格（grid）。

您可以通過構(gòu)建 widget 來構(gòu)建更復雜的 widget。例如，下面左邊的屏幕截圖顯示了 3 個圖標，每個圖標下有一個標簽：

第二個屏幕截圖顯示布局結(jié)構(gòu)，顯示一個行包含 3 列，其中每列包含一個圖標和一個標簽。

注意: 本教程中的大多數(shù)屏幕截圖都是在debugPaintSizeEnabled為 true 時顯示的，因此您可以看到布局結(jié)構(gòu)。 有關(guān)更多信息，請參閱可視化調(diào)試，這是調(diào)試 Flutter Apps中的一節(jié)。

以下是此 UI 的 widget 樹示意圖：

大部分應(yīng)該看起來應(yīng)該像您所期望的，但你可能想了解一下 Container（以粉紅色顯示）。 Container 也是一個 widget，允許您自定義其子 widget。如果要添加填充，邊距，邊框或背景色，請使用 Container 來設(shè)置（譯者語：只有容器有這些屬性）。

在這個例子中，每個 Text 放置在 Container 中以添加邊距。整個行也被放置在容器中以在行的周圍添加填充。

本例 UI 中的其他部分也可以通過屬性來控制。使用其 color 屬性設(shè)置圖標的顏色。使用 Text 的 style 屬性來設(shè)置字體，顏色，粗細等。列和行的屬性允許您指定他們的子項如何垂直或水平對齊，以及應(yīng)該占據(jù)多少空間。

布局一個 widget

重點是什么？

• 即使應(yīng)用程序本身也是一個 widget.
• 創(chuàng)建一個 widget 并將其添加到布局widget中是很簡單的.
• 要在設(shè)備上顯示 widget，請將布局 widget 添加到 app widget 中。
• 使用 Scaffold 是最容易的，它是 Material Components 庫中的一個 widget，它提供了一個默認 banner，背景顏色，并且具有添加 drawer，snack bar 和底部 sheet 的 API。
• 如果您愿意，可以構(gòu)建僅使用標準 widget 庫中的 widget 來構(gòu)建您的應(yīng)用程序

如何在 Flutter 中布局單個 widget ？本節(jié)介紹如何創(chuàng)建一個簡單的 widget 并將其顯示在屏幕上。它還展示了一個簡單的 Hello World 應(yīng)用程序的完整代碼。

在 Flutter 中，只需幾個步驟即可在屏幕上放置文本，圖標或圖像。

1. 選擇一個 widget 來保存該對象。根據(jù)您想要對齊或約束可見窗口小部件的方式，從各種布局 widget 中進行選擇， 因為這些特性通常會傳遞到所包含的 widget 中。這個例子使用 Center，它可以將內(nèi)容水平和垂直居中。
2. 創(chuàng)建一個 widget 來容納可見對象注意：Flutter 應(yīng)用程序是用 Dart 語言編寫的。如果您了解 Java 或類似的面向?qū)ο缶幊陶Z言，Dart 會感到非常熟悉。 如果不了解的話，你可以試試 DartPad 一個可以在任何瀏覽器上使用的交互式 Dart playground。 Dart  語言之旅是一篇介紹 Dart 語言特性的概述。
   例如，創(chuàng)建一個Text widget:

   new Text('Hello World', style: new TextStyle(fontSize: 32.0))

   創(chuàng)建一個 Image widget:

   new Image.asset('images/myPic.jpg', fit: BoxFit.cover)

   創(chuàng)建一個 Icon widget:

   new Icon(Icons.star, color: Colors.red[500])

3. 將可見 widget 添加到布局 widget。 所有布局 widget 都有一個 child 屬性（例如 Center 或 Container ），或者一個 children 屬性，如果他們需要一個 widget 列表（例如 Row，Column，ListView 或 Stack）。將 Text widget 添加到 Center widget：

   new Center(
     child: new Text('Hello World', style: new TextStyle(fontSize: 32.0))

4. 將布局 widget 添加到頁面。Flutter 應(yīng)用本身就是一個 widget，大部分 widget 都有一個 build() 方法。在應(yīng)用程序的 build 方法中創(chuàng)建會在設(shè)備上顯示的 widget。 對于 Material 應(yīng)用程序，您可以將 Center widget 直接添加到 body 屬性中。

   class _MyHomePageState extends State<MyHomePage> {
     @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è)計用戶界面時，您可以使用標準 widget 庫中的 widget，也可以使用 Material Components 中的 widget。 您可以混合使用兩個庫中的 widget，可以自定義現(xiàn)有的 widget，也可以構(gòu)建一組自定義的 widget。對于非 Material 應(yīng)用程序，您可以將 Center widget 添加到應(yīng)用程序的 build() 方法中：

   // 這個App沒有使用Material組件,  如Scaffold.
   // 一般來說, app沒有使用Scaffold的話，會有一個黑色的背景和一個默認為黑色的文本顏色。
   // 這個app，將背景色改為了白色，并且將文本顏色改為了黑色以模仿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)),
         ),
       );
     }
   }

   請注意，默認情況下，非 Material 應(yīng)用程序不包含 AppBar，標題或背景顏色。 如果您想在非 Material 應(yīng)用程序中使用這些功能，您必須自己構(gòu)建它們。此應(yīng)用程序?qū)⒈尘邦伾臑榘咨?，將文本更改為深灰色以模?Material 應(yīng)用程序。