如何通过列/行容器中的左(或右)边缘提供项的对齐？

Question

下面是函数的源代码，它允许通过在画布上单击来显示菜单。在这种情况下，菜单是无模式窗口。

​

​

  void _showModeless(BuildContext context) {
    _modeless = new OverlayEntry(
        opaque: false,
        builder: (context) {
          return new Positioned(
            top: 100.0,
            left: 100.0,
            child: new Column(
              children: [
                selectItem("properties"),
                selectItem("delete"),
                selectItem("zoom"),
              ]
            ),
          );
        });
    Overlay.of(context).insert(_modeless);
    _startWaiting();
  }

  GestureDetector selectItem(String text) {
    return new GestureDetector(
      onTap: () {
        setState(() {
          //_lights = true;
          _closeModelessWindow();
          print('=== tap ===');
        });
      },
      child: new Container(
        child: item(text),
        decoration: new BoxDecoration (
          color: Colors.blue, borderRadius: new BorderRadius.only(
          topLeft: Radius.circular(16.0),
          bottomRight: Radius.circular(16.0),
        ),
        ),
        padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 8.0, right: 8.0)
      ),
    );
  }

  Row item(String text)
  {
    return new Row(
      mainAxisAlignment:  MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize:       MainAxisSize.max,
      children: <Widget>[
        new Icon(Icons.content_paste, color: Colors.white),
        new Padding(
          padding: const EdgeInsets.only(left: 16.0, right: 24.0, ),
          child: new Text(text, overflow: TextOverflow.ellipsis,
            style: new TextStyle(fontSize: 16.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
                decoration: TextDecoration.none
            ),
          ),
        ),
      ],
    );
  }

我不喜欢这些项目位于这个窗口的中心。如何将它们移到左侧的某条垂直参考线上？

Answer 1

您可以在列构造函数中使用crossAxisAlignment: CrossAxisAlignment.start,左对齐列的子项。

Answer 2

请参阅下面的方法在列/行中左/右对齐。

列

//表示左对齐

new Container(
      width: double.infinity,
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Text('Building Name'),
          new Text(propertyModel.title),
        ],
      ),
    );

//用于右对齐

在上面的代码中，只需将CrossAxisAlignment.start更改为CrossAxisAlignment.end

行

//表示左对齐

new Container(
      width: double.infinity,
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          new Text('Building Name'),
        ],
      ),
    );

//用于右对齐

在上面的代码中，只需将MainAxisAlignment.start更改为MainAxisAlignment.end

有关更多参考信息，请参阅Column和Row

Answer 3

将crossAxisAlignment属性添加到Column

crossAxisAlignment: CrossAxisAlignment.start