如何在 Flutter 中对齐单个小部件？

Posted 2023-02-23

【中文标题】如何在 Flutter 中对齐单个小部件？

【英文标题】：How to align single widgets in Flutter?

【发布时间】：2019-05-11 23:55:20

【问题描述】：

我想在其父级内对齐 Flutter 小部件。我知道我可以通过将一个小部件包装在一个中心小部件中来居中它。

  Center(
    child: Text("widget"),
  )

但是如何将其对齐到右侧、底部、顶部中间等？

注意事项：

我说的是单个孩子，而不是行或列中的多个孩子。请参阅这些 SO 问题：

Align Text widgets in a row widget FLUTTER | Right Align not working

这个问题是正确的，但我想提出一个更规范的问题：

How to left align the OutlineButton icon in Flutter

【参考方案1】：

如何对齐小部件

要在其父窗口中对齐子窗口小部件，您可以使用Align 窗口小部件。如果您知道如何使用 Center 小部件，那么您就是正确的轨道，因为 Center 只是 Align 的一个特例。

用 Align 小部件包装您希望对齐的小部件并设置其对齐属性。例如，这会将文本小部件与父小部件的右中对齐。

Align(
  alignment: Alignment.centerRight,
  child: Text("widget"),
)

其他选项是

Alignment.topLeft Alignment.topCenter Alignment.topRight Alignment.centerLeft Alignment.center Alignment.centerRight Alignment.bottomLeft Alignment.bottomCenter Alignment.bottomRight

看起来是这样的：

您不仅限于这些位置。您可以在任何地方对齐小部件。通过指定 x,y 对，其中 (0,0) 是视图的中心，边缘是 1.0 围绕它的单位。也许一张图片会有所帮助：

任何相对位置的位置(x,y)

Alignment.topLeft 是 Alignment(-1.0, -1.0) Alignment.topCenter 是 Alignment(0.0, -1.0) Alignment.topRight 是 Alignment(1.0, -1.0) Alignment.centerLeft 是 Alignment(-1.0, 0.0) Alignment.center 是 Alignment(0.0, 0.0) Alignment.centerRight 是 Alignment(1.0, 0.0) Alignment.bottomLeft 是 Alignment(-1.0, 1.0) Alignment.bottomCenter 是 Alignment(0.0, 1.0) Alignment.bottomRight 是 Alignment(1.0, 1.0)

注意图像中的对齐(x,y) 不需要在[-1, +1] 范围内。对齐(1,2) 意味着它位于小部件的右侧，并且在小部件的下方再次与其高度一样多。

这是自定义对齐位置的示例。

Align(
  alignment: Alignment(0.7, -0.5),
  child: Text("widget"),
)

补充代码

这是用于制作上述示例的main.dart 代码，方便您进行剪切和粘贴。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: myLayoutWidget(),
      ),
    );
  


Widget myLayoutWidget() 
  return Align(
    alignment: Alignment(0.7, -0.5),
    child: Text(
      "widget",
      style: TextStyle(fontSize: 30),
    ),
  );

【参考方案2】：

  Expanded(
    child: Align(
      alignment: Alignment.centerRight,
      child: Text("widget"),
    ),
  )

【讨论】：

我还没试过这个。 Expanded 小部件在这里有什么作用？

Expanded 将填满所有可用空间（并使任何同级小部件占用更少空间）。它会将孩子放置在新创建空间的中心，如果您不希望它位于（扩展空间的）中心，则需要使用Align

这仅适用于您的父母是Column 或Row。

@CopsOnRoad SizedBox.expand() 可以在没有 Column 或 Row (flex) 作为父级的情况下使用。

【参考方案3】：

您可以将Positioned 和Align 与Stack 小部件一起使用

堆栈允许您将元素堆叠在一起，数组中的最后一个元素具有最高的优先级。您可以使用Align、Positioned 或Container 来定位堆栈的子级。

对齐

通过使用Alignment 设置对齐方式来移动小部件，Alignment 具有 topCenter、bottomRight 等静态属性。或者您可以完全控制并设置Alignment(1.0, -1.0)，它的 x,y 值范围为 1.0 到 -1.0，其中 (0,0) 为屏幕中心。

Stack(
    children: [
        MyWidget(),
        Align(
            alignment: Alignment.topCenter,
            child: MyWidget(),
        ),
        Container(
            alignment: Alignment(-0.9, -0.9),
            child: MyWidget(),
        )  
    ]
);

定位

作为对齐的替代方法，您可以相对于父小部件定位子小部件。

ConstrainedBox(
  constraints: BoxConstraints.tight(Size(double.infinity, 256)),
  child: Stack(
    alignment: AlignmentDirectional.center,
    children: <Widget>[
      Positioned(
        top: 0.0,
        child: Icon(Icons.calendar_today,
            size: 128.0, color: Colors.lightBlueAccent),
      ),
      Positioned(
          top: 4,
          right: 110,
          child: CircleAvatar(radius: 16, backgroundColor: Colors.red)),
    ],
  ),
)