Flutter:如何将小部件与列的右上角对齐?

标签 flutter flutter-layout

根据这个 SO 答案,我正在尝试将我的更多选项按钮对齐到我的专栏中的右上角。

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 first, then align

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

align first, then text

我想在右上角显示我的按钮,同时将文本小部件保持在中心顶部,但对齐小部件似乎占据整行(行)。

有没有办法正确地做到这一点,还是我需要将它们都包装成一行?

最佳答案

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

Final

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

关于Flutter:如何将小部件与列的右上角对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55259142/

相关文章:

flutter - 当我从首页登出并重新启动应用程序时,它会返回首页(使用flutter)

firebase - 什么用例有 FirebaseUser 的 reload() 功能?

flutter - 当按下按钮时,如何使IconButton保持TextField内部的焦点不突出文本字段?

flutter - 如何更改 Flutter Web 中的 chrome 标题颜色?

flutter - 定位的小部件必须直接放置在 Stack 小部件内

flutter - 如何告诉 itemBuilder Flutter 中没有更多的项目?

facebook - 如何确定用户登录的提供商

flutter - 了解 Flutter 的 ShaderMask

flutter - 如何使可滚动行的中间小部件在页面启动时显示在左侧?

dart - Flutter : Custom UI for Scan QR Reader. 请让我知道任何插件,以便我可以在扫描屏幕底部制作菜单