Flutter将扩展容器中的小部件对齐到左上角和右下角？

Question

我的应用程序中有一个布局，其中包含一些文本和一个时间戳。我希望时间戳（图片中的时钟图标）位于展开小部件的左下角，而文本（图片中的“what”字符串）应从右上角开始。

代表：

|text|              |
|    -----------    |
|    empty space    |
|    -----------    |
|              |time|

目前，我在下面管理的内容使它们与极左和极右对齐，但它们似乎受到 Column 小部件的限制，因此与小部件的中心对齐。而且我似乎无法扩展以在另一个扩展中工作。

小部件代码：

return new Container(
      child: new Row(
        children: <Widget>[
          new Column(
            children: <Widget>[
              new MaterialButton(
                minWidth: 60.0,
                child: new Icon(Icons.keyboard_arrow_up),
                onPressed: () => null,
              ),
              new Container(
                padding: new EdgeInsets.all(5.0),
                child: new Text("1231"),
              ),
              new MaterialButton(
                minWidth: 60.0,
                child: new Icon(Icons.keyboard_arrow_down),
                onPressed: () => null,
              ),
            ],
          ),
          new Expanded(
            // child: new Container(
            // padding: EdgeInsets.all(10.0),
            child: new Column(
              // mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Align(
                  alignment: Alignment.topLeft,
                  child: new Text("what"),
                ),

                // "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."),
                new Align(
                  // padding: new EdgeInsets.all(10.0),
                  alignment: Alignment.bottomRight,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      new Container(
                        padding: new EdgeInsets.all(2.0),
                        child: new Icon(
                          Icons.access_time,
                          size: 12.0,
                        ),
                      ),
                      new Container(
                        padding: new EdgeInsets.all(2.0),
                        child: new Text("1 hr"),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            // ),
          ),
          new Column(
            children: <Widget>[
              new MaterialButton(
                minWidth: 60.0,
                child: new Icon(Icons.save, size: 20.0),
                onPressed: () => null,
              ),
              new Container(
                padding: new EdgeInsets.all(5.0),
                child: new Text("8"),
              ),
              new MaterialButton(
                minWidth: 60.0,
                child: new Icon(Icons.comment, size: 20.0),
                onPressed: () => null,
              ),
            ],
          ),
        ],
      ),
    );
  }

Answer 1

尝试使用 alignment: Alignment.bottomRight 作为 Container 类的命名参数

Answer 2

好的，所以我修改了您的Widget，并在容器中添加了一些颜色以非常容易地跟踪更改：

        double maxHeight = 130.0;

    Widget _buildLeft() {
      return Container(
        height: maxHeight,
        color: Colors.red,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new MaterialButton(
              minWidth: 60.0,
              child: new Icon(Icons.keyboard_arrow_up),
              onPressed: () => null,
            ),
            new Container(
              padding: new EdgeInsets.all(5.0),
              child: new Text("1231"),
            ),
            new MaterialButton(
              minWidth: 60.0,
              child: new Icon(Icons.keyboard_arrow_down),
              onPressed: () => null,
            ),
          ],
        ),
      );
    }

    Widget _buildCenter() {
      return Expanded(
        child: Container(
          height: maxHeight,
          color: Colors.blue,
          child: Stack(
            children: <Widget>[
              Positioned(
                child: new Text("what"),
                top: 0.0,
                left: 0.0,
              ),
              // "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."),
              Positioned(
                bottom: 0.0,
                right: 0.0,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    new Container(
                      padding: new EdgeInsets.all(2.0),
                      child: new Icon(
                        Icons.access_time,
                        size: 12.0,
                      ),
                    ),
                    new Container(
                      padding: new EdgeInsets.all(2.0),
                      child: new Text("1 hr"),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    }

    Widget _buildRight() {
      return Container(
        height: maxHeight,
        color: Colors.green,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new MaterialButton(
              minWidth: 60.0,
              child: new Icon(Icons.save, size: 20.0),
              onPressed: () => null,
            ),
            new Container(
              padding: new EdgeInsets.all(5.0),
              child: new Text("8"),
            ),
            new MaterialButton(
              minWidth: 60.0,
              child: new Icon(Icons.comment, size: 20.0),
              onPressed: () => null,
            ),
          ],
        ),
      );
    }

    @override
    Widget build(BuildContext context) {
      return new Container(
        child: new Row(
          children: <Widget>[
            _buildLeft(),
            _buildCenter(),
            _buildRight(),
          ],
        ),
      );
    }