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

Question

我Wrap和一些Container孩子有一个布局。每个容器都有一个孩子，Text

所述Container具有固定的高度，但柔性的宽度。

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

我无法设置 的宽度，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为中心

  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),
                      ),
                    ],
                  ),
                ),

Answer 2

           Container(
                alignment: Alignment.center,
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    border: Border.all(width: 1), color: Colors.blueGrey),
                child:Text('Enter a url')

              )

Answer 3

我认为我们不应该Column用于对齐目的。更好的方法是使用 Align 小部件，如下所示：

Container(
  height: 30,
  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
  decoration: BoxDecoration(
  color: Colors.grey[200],
    borderRadius: BorderRadius.circular(15),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Text(
      'hallo',
      style: TextStyle(background: _paint),
    ),
  ),
),