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

好吧，所以我修改了您的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(),
          ],
        ),
      );
    }

Answer 2

尝试使用 alignment：Alignment.bottomRight 作为 Container 类

的命名参数

在展开后的容器中向左上方和右下方颤动对齐小部件？

2 个答案: