Flutter 布局方法

重點(diǎn)是什么?

• Widgets 是用于構(gòu)建 U I的類.
• Widgets 用于布局和 UI 元素.
• 通過(guò)簡(jiǎn)單的 widget 來(lái)構(gòu)建復(fù)雜的 widget

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

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

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

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

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

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

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

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

布局一個(gè) widget

重點(diǎn)是什么？

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

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

在 Flutter 中，只需幾個(gè)步驟即可在屏幕上放置文本，圖標(biāo)或圖像。

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

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

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

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

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

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

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

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

4. 將布局 widget 添加到頁(yè)面。Flutter 應(yīng)用本身就是一個(gè) widget，大部分 widget 都有一個(gè) build() 方法。在應(yīng)用程序的 build 方法中創(chuàng)建會(huì)在設(shè)備上顯示的 widget。 對(duì)于 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è)計(jì)用戶界面時(shí)，您可以使用標(biāo)準(zhǔn) widget 庫(kù)中的 widget，也可以使用 Material Components 中的 widget。 您可以混合使用兩個(gè)庫(kù)中的 widget，可以自定義現(xiàn)有的 widget，也可以構(gòu)建一組自定義的 widget。對(duì)于非 Material 應(yīng)用程序，您可以將 Center widget 添加到應(yīng)用程序的 build() 方法中：

   // 這個(gè)App沒(méi)有使用Material組件,  如Scaffold.
   // 一般來(lái)說(shuō), app沒(méi)有使用Scaffold的話，會(huì)有一個(gè)黑色的背景和一個(gè)默認(rèn)為黑色的文本顏色。
   // 這個(gè)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)),
         ),
       );
     }
   }

   請(qǐng)注意，默認(rèn)情況下，非 Material 應(yīng)用程序不包含 AppBar，標(biāo)題或背景顏色。 如果您想在非 Material 應(yīng)用程序中使用這些功能，您必須自己構(gòu)建它們。此應(yīng)用程序?qū)⒈尘邦伾臑榘咨瑢⑽谋靖臑樯罨疑阅７?Material 應(yīng)用程序。