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

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

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

如何在“列/行”容器的左（或右）边缘提供项目辩护？

3 个答案: