Flutter：如何将小部件与列的右上角对齐？答案

【问题标题】：Flutter: How to align widget to the topRight of column?Flutter：如何将小部件与列的右上角对齐？
【发布时间】：2019-08-11 01:13:52
【问题描述】：

根据this SO answer，我正在尝试将我的更多选项按钮与我的专栏的右上角对齐。

How to align single widgets in Flutter?

这是我的代码。

return Card(
      color: Colors.blueAccent,
      child: Container(
        height: 100,
        width: 350,
        child: Column(
          children: <Widget>[
            Text(
              'Day ${widget._dayNumber}',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            Align(alignment: Alignment.topRight,
             child: IconButton(onPressed: () {}, icon: Icon(Icons.more_vert),)),

          ],
        ),
      ),
    );

如果我更改对齐和文本的顺序，就会发生这种情况。

我想在右上角显示我的按钮，同时将 Text 小部件保持在中心顶部，但 align 小部件似乎占据了整行（行）。

有没有办法正确地实现这一点，还是我需要将它们都包装成一行？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

我使用 Stack 和 Positioned 小部件来实现该效果。

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Card(
          color: Colors.blueAccent,
          child: Container(
            height: 100,
            width: 350,
            child: Column(
              children: <Widget>[
                Text(
                  'Day ${widget._dayNumber}',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          top: 0,
          right: 0,
          child: IconButton(
            onPressed: () {},
            icon: Icon(Icons.more_vert),
          ),
        ),
      ],
    );
  }

【讨论】：

小部件的另一个选项而不是 Positioned 将两个属性设置为 0 是使用 Align 并将 alignment 属性设置为 topRight

【解决方案2】：

如果你想让它们在同一个Column中，你需要用Row包装

  return Card(
    color: Colors.blueAccent,
    child: Container(
      height: 100,
      width: 350,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(),
              Text(
                'Day 1',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.more_vert),
              ),
            ],
          ),
        ],
      ),
    ),
  );

【讨论】：