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

Question

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

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

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

备注：

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

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

Answer 1

如何对齐小部件

要在父窗口中对齐子窗口小部件，您可以使用 Align 窗口小部件。如果您知道如何使用 Center 小部件，那么您是对的，因为 Center 只是 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),
    ),
  );
}

Answer 2

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

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

How to align single widgets in Flutter?

text-align

alignment

dart

flutter

如何对齐小部件

补充码