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

Question

我想在其父级中对齐Flutter小部件.我知道我可以将一个小部件包装在一个Center小部件中.

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

但是我如何将它与右边,底部,顶部中间等对齐？

笔记:

我说的是一个孩子,而不是一排或一列中的多个孩子.看到这些SO问题:

• 在一个行小部件中对齐Text小部件
• FLUTTER | 对齐不工作

这个是正确的轨道,但我想提出一个更加古老的问题:

• 如何在Flutter中左对齐OutlineButton图标

这是一个自我回答问答.我的答案如下.

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"),
    ),
  )