Flutter的布局方法

Posted 2022-03-14 joe235

重点是什么?

• Widgets 是用于构建UI的类.
• Widgets 用于布局和UI元素.
• 通过简单的widget来构建复杂的widget

Flutter布局机制的核心就是widget。在Flutter中，几乎所有东西都是一个widget - 甚至布局模型都是widget。您在Flutter应用中看到的图像、图标和文本都是widget。 甚至你看不到的东西也是widget，例如行（row）、列（column）以及用来排列、约束和对齐这些可见widget的网格（grid）。

您可以通过构建widget来构建更复杂的widget。例如，下面左边的屏幕截图显示了3个图标，每个图标下有一个标签：

      

第二个屏幕截图显示布局结构，显示一个行包含3列，其中每列包含一个图标和一个标签。

注意: 本教程中的大多数屏幕截图都是在debugPaintSizeEnabled为true时显示的，因此您可以看到布局结构。 有关更多信息，请参阅可视化调试，这是调试 Flutter Apps中的一节。

 

以下是此UI的widget树示意图：

大部分应该看起来应该像您所期望的，但你可能想了解一下Container（以粉红色显示）。 Container也是一个widget，允许您自定义其子widget。如果要添加填充，边距，边框或背景色，请使用Container来设置（译者语：只有容器有这些属性）。

在这个例子中，每个Text放置在Container中以添加边距。整个行也被放置在容器中以在行的周围添加填充。

本例UI中的其他部分也可以通过属性来控制。使用其color属性设置图标的颜色。使用Text.style属性来设置字体，颜色，粗细等。列和行的属性允许您指定他们的子项如何垂直或水平对齐，以及应该占据多少空间。

布局一个 widget

重点是什么？

• 即使应用程序本身也是一个 widget.
• 创建一个widget并将其添加到布局widget中是很简单的.
• 要在设备上显示widget，请将布局widget添加到 app widget中。
• 使用Scaffold是最容易的，它是 Material Components库中的一个widget，它提供了一个默认banner，背景颜色，并且具有添加drawer，snack bar和底部sheet的API。
• 如果您愿意，可以构建仅使用标准widget库中的widget来构建您的应用程序

如何在Flutter中布局单个widget？本节介绍如何创建一个简单的widget并将其显示在屏幕上。它还展示了一个简单的Hello World应用程序的完整代码。

在Flutter中，只需几个步骤即可在屏幕上放置文本，图标或图像。

1.选择一个widget来保存该对象。
根据您想要对齐或约束可见窗口小部件的方式，从各种布局widget中进行选择， 因为这些特性通常会传递到所包含的widget中。这个例子使用Center，它可以将内容水平和垂直居中。

2.创建一个widget来容纳可见对象

例如，创建一个Text widget:

Text(‘Hello World‘),

或者

new Text(
  ‘Hello World‘, 
  style: new TextStyle(fontSize: 32.0,color: Colors.grey[500]),)
)

创建一个 Image widget:

Image.asset(
  ‘images/lake.jpg‘,
  fit: BoxFit.cover,
),

或者

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

创建一个 Icon widget:

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

或者

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：

Center(
  child: Text(‘Hello World‘),
),

或者

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

4.将布局widget添加到页面.
Flutter应用本身就是一个widget，大部分widget都有一个build()方法。在应用程序的build方法中创建会在设备上显示的widget。

对于Material应用程序，您可以使用Scaffold widget; 它提供默认横幅，背景颜色，and has API for adding drawers, snack bars, and bottom sheets。然后，您可以将Center widget直接添加到body主页的属性中。

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: ‘Flutter layout demo‘,
      home: new Scaffold(
        appBar: AppBar(
          title: Text(‘Flutter layout demo‘),
        ),
        body: Center(
          child: Text(‘Hello World‘),
        ),
      ),
    );
  

Note: 在设计用户界面时，您可以使用标准widget库中的widget，也可以使用Material Components中的widget。 您可以混合使用两个库中的widget，可以自定义现有的widget，也可以构建一组自定义的widget。

对于非Material应用程序，您可以将Center widget添加到应用程序的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应用程序不包含AppBar，标题或背景颜色。 如果您想在非Material应用程序中使用这些功能，您必须自己构建它们。此应用程序将背景颜色更改为白色，将文本更改为深灰色以模仿Material应用程序。

好了! 当你运行这个应用时，你会看到:

Dart 代码 (Material app): main.dart
Dart 代码 (仅使用标准Widget的app): main.dart