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

Question

我想将颤振小部件与其父部件对齐。我知道我可以通过将小部件包装在中心小部件中来将其居中。

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

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

笔记：

我说的是一个孩子，而不是一行或一列中的多个孩子。见以下问题：

• 对齐行小部件中的文本小部件
• 颤振|右对齐不工作

这一条是正确的，但我试图提出一个更尖锐的问题：

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

Answer 1

您可以将定位和对齐与堆栈小部件一起使用

堆栈允许您将元素堆叠在彼此的顶部，数组中的最后一个元素的优先级最高。您可以使用对齐、定位或容器来定位堆栈的子级。

排列

通过使用具有静态属性（如topCenter、底部右侧等）的对齐设置对齐来移动小部件。或者您可以完全控制并设置对齐（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)),
    ],
  ),
)

Answer 2

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

Answer 3

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

包装要与align小部件对齐的小部件，并设置其对齐属性。例如，这会将文本小部件与父窗口的右中对齐。

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

其他选择包括

• Alignment.top左
lignment.top中心
• Alignment.top对
• 左lignment.center
• lignment.center
• 一个lignment.center对
• 左lignment.bottom
lignment.bottom中心
• 一个lignment.bottom对

看起来是这样的：

您不仅限于这些位置。通过指定一个x， y对，其中（0,0）是视图的中心，边缘是围绕它的1.0单元。也许一张图片会有所帮助：

其中对于任何相对位置（x， y）

• 对齐。左上方是对齐（-1.0，-1.0）
• 对齐。topCenter是对齐（0.0，-1.0）
• 对齐。右上角是对齐（1.0，-1.0）
• 对齐。中间偏左是对齐（-1.0,0.0）
• 对齐。中心是对齐（0.0，0.0）
• 对齐。中心右侧是对齐（1.0，0.0）
• 对齐。左下是对齐（-1.0，1.0）
• 对齐。底部中心是对齐（0.0，1.0）
• 对齐。右下是对齐（1.0，1.0）

请注意，在图像中对齐方式（x，y）不需要在范围[-1，1]内。对齐方式（1,2）意味着它位于小部件的右侧，并且在小部件的下方是其高度的一半。

以下是html" target="_blank">自定义对齐位置的示例。

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

这里是主菜单。省道用于制作上述示例的代码，以方便剪切和粘贴。

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),
    ),
  );
}