Flutter 布局

2025年3月17日 | 阅读 8 分钟

布局机制的主要概念是小部件。我们知道 Flutter 将所有东西都视为一个小部件。因此，图像、图标、文本，甚至您的应用程序的布局都是小部件。在这里，您在应用程序 UI 上看不到的一些内容，例如排列、约束和对齐可见小部件的行、列和网格，也是小部件。

Flutter 允许我们通过组合多个小部件来构建更复杂的小部件以创建布局。例如，我们可以看到下图显示了带有每个标签下的三个图标。

在第二张图中，我们可以看到上图的视觉布局。该图显示了三列的行，这些列包含一个图标和一个标签。

在上图中，container 是一个小部件类，允许我们自定义子小部件。它主要用于添加边框、填充、边距、背景颜色等等。在这里，文本小部件位于容器下方以添加边距。整个行也放在一个容器中，用于在行周围添加边距和填充。此外，其余 UI 由 color、text.style 等属性控制。

布局一个小部件

让我们学习如何创建和显示一个小部件。以下步骤显示了如何布局一个小部件

第 1 步： 首先，您需要选择一个布局小部件。

第 2 步： 接下来，创建一个可见的小部件。

第 3 步： 然后，将可见小部件添加到布局小部件。

第 4 步： 最后，将布局小部件添加到您要显示它的页面。

布局小部件的类型

我们可以将布局小部件分为两种类型

单子小部件
多子小部件

单子小部件

单子布局小部件是一种小部件，它只能在其父布局小部件内包含 一个子小部件。这些小部件还可以包含特殊的布局功能。 Flutter 为我们提供了许多单子小部件，使应用程序 UI 具有吸引力。如果我们适当地使用这些小部件，它可以节省我们的时间并使应用程序代码更具可读性。不同类型的单子小部件的列表是

Container： 这是一个最受欢迎的布局小部件，它为小部件的绘制、定位和大小调整提供了可自定义的选项。

Center(
  child: Container(
    margin: const EdgeInsets.all(15.0),
    color: Colors.blue,
    width: 42.0,
    height: 42.0,
  ),
)

Padding： 这是一个小部件，用于通过给定的填充来排列其子小部件。它包含 EdgeInsets 和 EdgeInsets.fromLTRB，用于您要提供填充的所需侧。

const Greetings(
  child: Padding(
    padding: EdgeInsets.all(14.0),
    child: Text('Hello JavaTpoint!'),
  ),
)

Center： 此小部件允许您在其自身内居中子小部件。

Align： 这是一个小部件，它在其自身内对齐其子小部件，并根据子小部件的大小调整其大小。它提供了更多控制权，可以将子小部件放置在您需要的确切位置。

Center(
  child: Container(
    height: 110.0,
    width: 110.0,
    color: Colors.blue,
    child: Align(
      alignment: Alignment.topLeft,
      child: FlutterLogo(
        size: 50,
      ),
    ),
  ),
)

SizedBox： 此小部件允许您通过所有屏幕为子小部件提供指定的大小。

SizedBox(
  width: 300.0,
  height: 450.0,
  child: const Card(child: Text('Hello JavaTpoint!')),
)

AspectRatio： 此小部件允许您将子小部件的大小保持为指定的长宽比。

AspectRatio(
  aspectRatio: 5/3,
  child: Container(
    color: Colors.bluel,
  ),
),

Baseline： 此小部件根据子小部件的基线移动子小部件。

child: Baseline(
         baseline: 30.0,
         baselineType: TextBaseline.alphabetic,
         child: Container(
              height: 60,
              width: 50,
              color: Colors.blue,
         ),
)

ConstrainedBox： 这是一个小部件，它允许您在其子小部件上强制添加约束。这意味着您可以强制子小部件具有特定的约束，而无需更改子小部件的属性。

ConstrainedBox(
  constraints: new BoxConstraints(
    minHeight: 150.0,
    minWidth: 150.0,
    maxHeight: 300.0,
    maxWidth: 300.0,
  ),
  child: new DecoratedBox(
    decoration: new BoxDecoration(color: Colors.red),
  ),
),

CustomSingleChildLayout： 这是一个小部件，它将单子的布局委托给一个委托人。委托人决定定位子小部件，也用于确定父小部件的大小。

FittedBox： 它根据指定的 fit 缩放和定位子小部件。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // It is the root widget of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multiple Layout Widget',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("FittedBox Widget")),
        body: Center(
        child: FittedBox(child: Row(
          children: <Widget>[
            Container(
              child: Image.asset('assets/computer.png'),
              ),
              Container(
                child: Text("This is a widget"),
              )
            ],
          ),
          fit: BoxFit.contain,
        )
      ),
    );
  }
}

输出

FractionallySizedBox： 这是一个小部件，它允许根据可用空间的比例调整其子小部件的大小。

IntrinsicHeight 和 IntrinsicWidth： 它们是一个小部件，允许我们将子小部件的大小调整为其子小部件的固有高度和宽度。

LimitedBox： 此小部件允许我们仅在未受约束时限制其大小。

Offstage： 它用于测量小部件的尺寸，而无需将其带到屏幕上。

OverflowBox： 这是一个小部件，它允许对其子小部件施加与从父级获得的不同约束。换句话说，它允许子级溢出父级小部件。

示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // It is the root widget of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Single Layout Widget',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("OverflowBox Widget"),
      ),
      body: Center(
      child: Container(
        height: 50.0,
        width: 50.0,
        color: Colors.red,
        child: OverflowBox(
          minHeight: 70.0,
          minWidth: 70.0,
          child: Container(
            height: 50.0,
            width: 50.0,
            color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

输出

多子小部件

多子小部件是一种小部件，它包含 多个子小部件，并且这些小部件的布局是 唯一的。例如，Row 小部件以水平方向布局其子小部件，而 Column 小部件以垂直方向布局其子小部件。如果我们组合 Row 和 Column 小部件，那么它可以构建任何级别的复杂小部件。

在这里，我们将学习不同类型的多子小部件

Row： 它允许以水平方向排列其子小部件。

示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // It is the root widget of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multiple Layout Widget',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        color: Colors.white,
        child: Row(
          children: <Widget>[
            Expanded(
              child: Text('Peter', textAlign: TextAlign.center),
            ),
            Expanded(
              child: Text('John', textAlign: TextAlign.center ),

            ),
            Expanded(
              child: FittedBox(
                fit: BoxFit.contain, // otherwise the logo will be tiny
                child: const FlutterLogo(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出

Column： 它允许以垂直方向排列其子小部件。

ListView： 这是最流行的滚动小部件，它允许我们在滚动方向上一个接一个地排列其子小部件。

GridView： 它允许我们将子小部件排列为小部件的可滚动、2D 数组。它由以水平和垂直布局排列的重复单元格模式组成。

Expanded： 它允许 Row 和 Column 小部件的子级占据尽可能大的区域。

Table： 这是一个小部件，它允许我们以基于表格的小部件排列其子级。

Flow： 它允许我们实现基于流的小部件。

Stack： 这是一个基本的小部件，主要用于重叠多个子小部件。它允许您将多个图层放置到屏幕上。以下示例有助于理解它。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // It is the root widget of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multiple Layout Widget',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        color: Colors.white,
        child: Stack(
          children: <Widget>[
            // Max Size
            Container(
              color: Colors.blue,
            ),
            Container(
              color: Colors.pink,
              height: 400.0,
              width: 300.0,
            ),
            Container(
              color: Colors.yellow,
              height: 220.0,
              width: 200.0,
            )
          ],
        ),
      ),
    );
  }
}

输出

构建复杂的布局

在本节中，我们将学习如何使用单子和多子布局小部件创建复杂的用户界面。布局框架允许您通过在行和列中嵌套行和列来创建复杂的用户界面布局。

让我们通过创建 产品列表 来了解一个复杂的用户界面示例。为此，您首先需要使用以下代码段替换 main.dart 文件的代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // It is the root widget of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo Application', theme: ThemeData(
      primarySwatch: Colors.green,),
      home: MyHomePage(title: 'Complex layout example'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Product List")),
        body: ListView(
          padding: const EdgeInsets.fromLTRB(3.0, 12.0, 3.0, 12.0),
          children: <Widget>[
            ProductBox(
                name: "iPhone",
                description: "iPhone is the top branded phone ever",
                price: 55000,
                image: "iphone.png"
            ),
            ProductBox(
                name: "Android",
                description: "Android is a very stylish phone",
                price: 10000,
                image: "android.png"
            ),
            ProductBox(
                name: "Tablet",
                description: "Tablet is a popular device for official meetings",
                price: 25000,
                image: "tablet.png"
            ),
            ProductBox(
                name: "Laptop",
                description: "Laptop is most famous electronic device",
                price: 35000,
                image: "laptop.png"
            ),
            ProductBox(
                name: "Desktop",
                description: "Desktop is most popular for regular use",
                price: 10000,
                image: "computer.png"
            ),
          ],
        )
    );
  }
}
class ProductBox extends StatelessWidget {
  ProductBox({Key key, this.name, this.description, this.price, this.image}) :
        super(key: key);
  final String name;
  final String description;
  final int price;
  final String image;

  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(2),
        height: 110,
        child: Card(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Image.asset("assets/" + image),
                  Expanded(
                      child: Container(
                          padding: EdgeInsets.all(5),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              Text(
                                  this.name, style: TextStyle(
                                  fontWeight: FontWeight.bold
                              )
                              ),
                              Text(this.description), Text(
                                  "Price: " + this.price.toString()
                              ),
                            ],
                          )
                      )
                  )
                ]
            )
        )
    );
  }
}

在上面的代码中，我们创建了一个小部件 ProductBox，其中包含产品的详细信息，例如图像、名称、价格和描述。在 ProductBox 小部件中，我们使用以下子小部件：Container、Row、Column、Expanded、Card、Text、Image 等。此小部件包含以下布局