flutter - 如何垂直对齐容器内的文本

Question

我有一个 Wrap 布局，其中包含一些 Container 子元素。每个容器都有一个子容器，Text

Container 具有固定的高度和灵活的宽度。

如何垂直对齐 Container 中的 Text？我尝试使用 alignment: Alignment.centerLeft，但 Container 的宽度跨越了整个父级。

我无法设置 Container 的宽度，因为我不知道文本的宽度。

Wrap(
      spacing: 3.0, // gap between adjacent chips
      runSpacing: 3.0, // gap between lines
      children: <Widget>[
        new Container(
          height: 30,
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: BorderRadius.circular(15),
          ),
          child: Text(
            'hallo',
            style: TextStyle(background: _paint,),
          ),
        ),
        ...

它应该是这样的 - 但红色文本应该垂直居中:

Answer 1

将您的 Container 包裹在 Column 中并将 mainAxisAlignment 设置为 Center

  new Container(
                  height: 30,
                  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'hallo',
                        style: TextStyle(background: _paint),
                      ),
                    ],
                  ),
                ),