Question

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

Container的高度固定，宽度灵活。

如何将Text内的Container垂直对齐？我尝试使用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

我认为我们不应该将function YourExtension(){ //... this.viewer.loadExtension("Autodesk.Viewing.MarkupsCore").then(ext=>{ this.markupTool = ext } //... }用于对齐。更好的方法是使用Align小部件，如下所示：

Column

Answer 2

要垂直和水平对齐，只需使用Align小部件：

   Align(
    alignment: Alignment.center,
    child: Text(
      'hallo',
    ),

Answer 3

           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 4

background:绘画属性可能有问题。

如果使用以下示例，则在我的情况下，所有内容都垂直居中，并且无需添加任何对齐方式。

style: TextStyle(background: Paint()..color = Colors.red),

Answer 5

将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 6

如果将文本包装在一行中，请添加一个属性

crossAxisAlignment: CrossAxisAlignment.center,

喜欢

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
      Text(ucfirst(activity.name),
        style: TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 21,),
    ),

如果一行中有多个文本小部件或一个文本小部件，这应该对您有用，请参见下面的输出。

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

6 个答案: